Gutenberg Changelog #81 – WordPress 6.2, Gutenberg 15.4 and 15.5, Phase 3 – Collaboration and a new Interactivity API

Cover image of Gutenberg episode 81 with Leonardus Nugrapha and Birgit Paulil-Haack
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #81 - WordPress 6.2, Gutenberg 15.4 and 15.5, Phase 3 - Collaboration and a new Interactivity API
/

Leonardus Nugraha and Birgit Pauli-Haack discuss WordPress  6.2, Gutenberg Releases 15.4 and 15.5, Phase 3 of the Gutenberg Project and a new Proposal on Interactivity API.

Show Notes / Transcript

Leonardus Nugraha

20-Year WordPress Anniversary

Community Contribution

Block Visibility 3.0.0: A New Chapter Begins

What’s released

WordPress 6.2

Gutenberg 15.4 & 15.5

What’s in active development or discussed

Phase 3: Collaboration

Improve the Site Editor

Interactivity API

WordPress Design Team

Design Share: Mar 13–Mar 24

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 81st episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about WordPress 6.2, Gutenberg releases 15.4 and 15.5, Phase 3 of the Gutenberg project, a new proposal on the interactivity API, and so much more. I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and full-time core contributor to the WordPress Open Source Project, and I’m so thrilled to introduce to you Leonardus Nugraha as my special guest today. Leonardus is a contributor to the WordPress docs team and content specialist at Hostinger, and we personally met at WordCamp Asia and had some great meals together. So welcome to the show, Leonardus. Thank you so much for agreeing to come to the show and talk about Gutenberg with me. How are you?

Leonardus Nugraha:  Yeah. Ah, thank you. Very good. Thank you for having me in the show. I’m good. And yeah, it’s nice to be here with your Gutenberg Changelog podcast. And it’s good to meet you again here after our in-person meetings. Yeah. It’s been two months we met in WordCamp Asia, right?

Birgit Pauli-Haack: Yeah. Yeah.

Leonardus Nugraha:  So it’s nice to have a chat with you again, talk about Gutenberg, talk about WordPress. Yeah. And yeah, thanks for introducing me as well. Yeah, you can call me Leo for short.

Birgit Pauli-Haack: Oh, hi, Leo.

Leonardus Nugraha:  And yeah, content. Yeah, Leo. And as a content specialist, I curate and organize WordPress content in hosting our tutorials and blogs. And with the documentation team, I also work on mainly end user documentation articles. So yeah, my work is all about WordPress articles. Yeah, I’m loving it. I’m loving to do things and work about WordPress.

Birgit Pauli-Haack: Well, wonderful, wonderful. Yeah. Tell us a little bit about you. Where you live and what you do for fun. Do you have family?

Leonardus Nugraha:  Yeah, I live in Indonesia in a city named Bogor, and it’s known as Rain City.

Birgit Pauli-Haack: Oh, no.

Leonardus Nugraha:  Yeah, it rains a lot here, but it’s nice, it’s cool, it’s chill. I think personally, I love the weather. I’m not sure everyone else. Yeah, when I’m not working with content or WordPress in general, just for fun, I usually play music. I play guitar, electric guitar mainly, and listening to music on my free time, or just have fun with my dogs. I have two big dogs and I consider them as my family, to be honest.

Birgit Pauli-Haack: Yeah, yeah, of course, of course. Yeah. That’s awesome. So many of our listeners are also dog people, and I’m sure they would like to know what kind of dogs you have, and do you share photos of them somewhere online?

Leonardus Nugraha:  Yeah, one of them is a mixed breed. It’s a quite big dog. It’s about 20 kilograms. And the other one is a big golden retriever. So I have big dogs with me. I think with a combined weight, they’re bigger than me, to be honest. I love taking photos. Actually, as you may know, I’m a photography team in WordCamp, and I do have a online portfolio called LeoandLens.com, and I have some of photos of my docs there as well. And also WordCamp Asia photos, obviously. So, and I do have Instagram as well, and I upload or post docs, photos or just random photos there if you want to see it.

Birgit Pauli-Haack: Yeah. And we’ll share the links in the show notes to catch up with you online or stalk you online.

Leonardus Nugraha:  Sure.

Birgit Pauli-Haack: So speaking of music, as part of the 20-year celebration coming up for WordPress, Julia Golomb published a playlist on Spotify of 20 Years of WordPress Jazz. From Miles Davis to Mikhail “Misha” Alperin. And it includes one song for each of the 45 jazz artists selected to represent the releases in the last 20 years. So this is really cool. And sometimes I just listen to it when I’m curating content, reading, copy-pasting and doing that. So yeah, what kind of music do you play?

Leonardus Nugraha:  To be honest, it’s not jazz, so I hope I don’t disappoint the WordPress community for that.

Birgit Pauli-Haack: No.

Leonardus Nugraha:  Mainly I listen to ’80s, ’90s rock and heavy metal, probably some blues and rock and roll. But as a part of WordPress committee and celebrating 20 years of WordPress, probably I should start listening to jazz.

Birgit Pauli-Haack: Well, we have all our preferences. And some of the jazz like Django Reinhardt or something like that, it’s really great guitars showing off. So yeah, I’m not always a fan of jazz. It depends on my mood when I listen to jazz. Yeah. So yeah. So you want, let’s get further into the show. 

Community Contributions

We have a great show coming to you, dear listeners. And for the “Community Contributions” section we have in his post, Block Visibility 3.0. A new chapter begins. Nick Diego announced that he’s making all Pro features available for free on his plugin, Block Visibility. And there are a couple of exceptions for which he needs just more time to integrate them into the free versions, but he’s aiming to pack it all in one version, make it available at no cost. And with a plugin, if you don’t know it, Block Visibility plugin, you can control, show or hide blocks depending on, for instance, a date or a user role or a location or a referral source, and it extends the core block editor with additional settings on the right. So this is a really good plugin, and it has a few fans.

Leonardus Nugraha:  Yeah, it’s definitely great plugins, especially if you are collaborating with big team on your WordPress site. Of course, we have user rules and user permissions, but with this plugin, you can extend the functionality and the controls with this plugin towards the blocks. And yeah, this is definitely good news to have this plugin for free for the community at no cost. And I read the blog post, and I really appreciate how Nick mentioned the importance of giving back to the community. It is all WordPress is about, right, to give to the community. And I believe with this decision, there will be more and more aspiring WordPress website owners to benefit from next creation. So yeah, everybody’s win.

Birgit Pauli-Haack: Yeah, right. Everybody’s win. Yes, indeed. And since the plugin came out two years ago, I always had the hope that the core developers would consider bringing it to the core functionality of the Block Editor. Maybe that’s still in the stars, but the future is bright, so we never know what comes. But by the way, Nick Diego as a news item, joined Automattic as a full-time sponsored contributor, and I’m thrilled that he became a teammate. He has been a special guest on the show before, and I certainly see him joining again in the future. So watch out. 

What’s Released – WordPress 6.2

Now we come to the last two weeks where a lot of releases happened, or actually four weeks since the last episode, and we’ll start with the big one, that’s WordPress 6.2. You heard us talking here on the show before. So WordPress 6.2 had over 600 contributors, and it’s the first major release in 2023.

The contributors come from at least 50 countries with 900 enhancements, 10 full Gutenberg releases or features from those releases, and then a slew of performance improvements. You might not be surprised to learn that Dolphy reached the impressive milestone of 2 million downloads in under two hours. So after the release and in the first week, it reached over 18 million downloads. So that’s pretty impressive. And also shows maybe there are some hosting companies that actually automatically update to new versions or at least other, there is a mechanism there that you can automatically update to the new version. And it seems to be working. So are you doing that at Hostinger, that there are automatic updates to the new version for WordPress sites?

Leonardus Nugraha:  Yeah, we do have a feature for the users to enable auto updates, both for the minor versions and major versions. Usually we enable it for the minor versions, like 6.2.1 because usually there’s not many new features or bug fixes. Users can enable for the major updates like 6.2, but usually it’s better to have that tested on staging site as well, which Hostinger also have, to make sure the site’s working properly, there’s no compatibility issues with their plugins or with their content. So yeah, we do have that feature, but it’s safer for the users to test it first for major updates like this, especially with more than 900 enhancements and new features to the workplace.

Birgit Pauli-Haack: No, totally get it. Yeah, when I was working with the agency and our client sites, we would wait at least two weeks, if not four, to see what’s happening with a new release and if there’s a patch release coming out. So yeah, test it please, dear listeners. So if you haven’t yet, the release candidate actually came out March 8th or 7th, so the last four weeks, it could have been that you could already test some of that quite extensively. So.

Now Rich Tabor and I discussed the site editor updates in WordPress 6.2 in the last episode, and summarize their significant updates to revamp the site editing interface to get new styling features for various blocks that were typography, styling, dimensions, and also color stylings. And then there’s a Distraction Free Writing mode and a new integration with Openverse, formerly Creative Commons Search, that enables a quick access to listen to that; 700 million free and openly licensed images and audio. So Leo, you published a blog post taking a detailed view on WordPress 6.2, and you are certainly now an expert on all the features. Have you decided what are your most exciting features for you?

Leonardus Nugraha:  It’s hard to pick one most exciting features, because I think this release is probably, in my opinion, brings more and more enhancement compared to 6.1, 6.2, from the perspective of end users. But obviously, for me, it’s the revamped Site Editor that is really exciting to have. Finally, we have a new, fresh, clean view of the interface. And users can just switch between templates, have a preview before actually start editing. And it’s also easy to pick a template. You just click on the canvas and start editing. You don’t have to actually click the button as well. So that’s a nice little touch there. And also the Global Styles panel with the zoom in, zoom out effect. Now users can just see the whole template and how the style federations affect the site. And the style works. It’s interesting to have it, to have all the blocks previewed with the tabs. And it also works with Commerce as well.

If you have WooCommerce installed, you can have the new tabs for the WooCommerce blocks and the Global Style Book as well. And Openverse integration, very exciting to hear, especially when the Openverse became the part of WordPress project. It’s already exciting, but still, back then, you still have to download the content to your local computer and then re-upload to WordPress, which is a lengthy process, to be honest. And with the new integration, everything’s now works seamlessly.

And I really do appreciate how to developers improve it during, was it on that? I think during the beta phase when they decided to upload the image to Media Library automatically instead of just linking to the content. So that’s nice. Lastly, for me, the biggest one, everything is big, but this one, Distraction Free mode is personally my favorite. Because I don’t remember how many times I got distracted or obscured by the block toolbar. When you start a new paragraph below the headings or maybe you have some few blocks near on top of each other, sometimes the block tool can obscure the content. And it’s annoying when you have a paragraph below a heading and you want to move back to edit the heading, you have to get rid of the toolbar first. So you have to click elsewhere, and it’s complicated.

But now with the Distraction Free, no toolbar, I can just focus on my content, writing. And yeah, that’s the main highlight for me personally. There’s other things like copy-paste styles, which speeds up the customization process. When you pick a block that you like and you decide, “Ah, I want to use this style,” you can just copy to another one. Or you can just post it globally to apply it to all blocks on your side.

Birgit Pauli-Haack: Yeah. The changing of things, you can get very granular and you can escalate some of the styles to the global styles. And I think it’s quite intuitive to do that. But the Distraction Free mode is definitely one of the, I’m so glad that came to core. There was a plugin available called Iceberg by Rich Tabor and Jeffrey Caradang for a long time, and they actually created a Distraction Free mode. And I really loved it when I was doing some journaling, where you don’t need any pictures or something like that, you’re just channel your inner self or inner mom or inner dad and just write. And that makes it much better writing experience. And I think quite a few bloggers were put off by the block toolbar that gets in the way every time. And there was this, or there is still this feature that you can patch or stick the toolbar to the top, but you still get all the distractions from other things.

You move the mouse and something happens, and then it goes. And it’s just sometimes a little noisy. So the Distraction Free mode is definitely beneficial. I also like to surface some great material around the Site Editor for educators. So with WordCamps and conferences on the horizon, meetups are getting re-energized to meet in place, face-to-face meetings and localities, presentations need to be prepared. And Anne McCarthy has a post on her personal blog that’s called, “So you want to talk about Site Editor, Part Four.” And gives you all the resources that would need to speed up your preparations for any presentations. And of course, we’ll share that in the show notes. 

Gutenberg 15.4

So that brings us to the next Gutenberg plugin release. Gutenberg 15.4 was released. Justin Tadlock and Ryan Welcher handled it and it contained 186 PRs with 57 contributors. Six of them were first-timers, so congrats all around.

And it was a smaller release, because it also had a few bug fixes for the 6.2 that were doing the beta and release backported, as the techies say, to the release version of 6.2. 

Enhancements

So there are a few enhancements I wanted to talk about. So one is go direct to edit from a “Manage all template” list. That’s something you just mentioned, Leo, that you see the template in the preview and the Template Editor or in the Site Editor, you see the template. And then you click on it, and you’re right there in the edit mode for the template. And that came with 15.4, you mentioned it. Now you also see in the panel on the left-hand side, the PR says, “The Site Editor’s dark side.” Which, it’s not philosophical, it’s the black sidebar on the left-hand side. And now there are descriptions for each of the templates. So you know a little bit more when a theme comes in or you enable a new theme, what the templates are supposed to do. And theme editors are able to add templates as well.

Leonardus Nugraha:  Yeah, I think the description, I didn’t really notice at first when the full Site Editor came to WordPress, but I think having description for its templates like 404 or “Single post” or “Archive,” it helps many, many first-time users, WordPressers who are still learning. Having this description will be great for them, definitely.

Birgit Pauli-Haack: Yeah. And when you switch theme or have Template Parts or create new ones, you also get a signal from who created them, and from which theme do they come over. That is a signal for the future, where there is thinking about how to make Template Parts and templates less reliant on particular theme. So when you switch the theme and you created a new template as a site owner, you want the template to come over to the new theme as well and not just go away with the old theme. So there’s some big thinking to be done, because that can get complex so fast.

Leonardus Nugraha:  Yeah. But that will really relevant with the next phase, which is collaboration, to have Template Parts and templates stick to the WordPress instead of the themes. And you can know which user create the template, or whether it’s made from the themes. So yeah, hopefully it’s a great path to the future.

So yeah, we can move on to the next one. It’s a navigation sidebar. So we have the new logic, which navigation to be shown on the dark side, as you mentioned. I think the first iteration, it shows the first navigation that is created on the team or templates. And now it shows the latest one that is published, which in my opinion, it’s really logical. It’s a good step because most likely users will use the latest one and the latest navigation block that they made.

But yeah, this is definitely still something, in my opinion, can be improved further, especially with the James Koster’s idea about having a label or hint to identify which menu actually been shown on the dark side. As for now, if you change the menu on the block tools, the navigation block tools, which on the right side, sometimes it doesn’t really change the one on the dark side. So you can switch to the older menu on the block tools, but then the dark side stick. And yeah, sometimes it can be confusing for new users. So hopefully, we are moving to the right direction here, in my opinion. But definitely, James Koster’s idea is definitely something worth to think about and to have labeling or hint, especially for new users again, who are still learning.

Birgit Pauli-Haack: Yeah. And I think there was a reason why the navigation part was actually pulled from 6.2. It’s now coming back with a Gutenberg plugin, but it was pulled from the 6.2 because it was still not performing to the quality that I want. And it wasn’t really all that intuitive, because the sidebar, when you actually edit a navigation block on the sidebar, it behaves differently than what was on the left side. So that was good. I think it was a good decision, even late in the cycle. That’s what the next part is, the height navigation screen, that was in 15.4 and was backported to 6.2.

Leonardus Nugraha:  Yeah, I remember testing it on the beta and the RC. The experience is still not perfect yet, I remember, because why is it different between the block tools and the sidebar? And then I heard the news from AN and that it’s backported again put from 6.2. So yeah, for me, it’s perfectly make sense. And hopefully they can deliver it, on the next layer is 6.3. They can get everything perfect with a perfect experience for users. And yeah.

Birgit Pauli-Haack: Good. Yeah, the Cover Block now also has constrained flow layout, which means that it can be used in different context, and then applied the block inner wrapper by default. And it means that the layered support will work in the Cover Block the same way as it does for the group block, but without the facts variations. So you cannot change how the Cover Block children behave in the full end wide alignment of the Cover Block context. I don’t know if that makes sense.

Leonardus Nugraha:  Yeah, I think it makes sense for the Cover Block. Yeah.

Birgit Pauli-Haack: Yeah, the FontSizePicker, that’s just a small note here that the FontSizePicker now allows custom units for theme developers that you can offer to your users. It before was only using pixels, and what was the other one?

Leonardus Nugraha:  RVM?

Birgit Pauli-Haack: Oh yeah, RVM. Yeah, or EMs. And now you can use all of them that are possible. Like VW and all that. Yeah.

Leonardus Nugraha:  Yeah. And on the next one we have new block support. So have a text column, or column support on the typographic settings. So I think on this PR, the example, the great example is the paragraph block. So usually if you have a paragraph block, it’s just like a block of text. But now with this text column support, you can add columns, the number of columns. So you can split the paragraph into separate columns without actually using a column blocks, which is a great option if you want to customize your content, maybe make it like a newspaper style. You don’t have to use the column block separately. You can just split your paragraph into columns.

Birgit Pauli-Haack: Yeah. And it adjusts if you add more text to it and adjust the columns to it. And it’s great that there’s now typography support available, so you can actually change fonts or make them larger, smaller, or change the line height. What might be needed when you are in smaller columns, you can reduce the line height on your texts. So those controls are now available in the user interface. But one caveat on this, the text columns is only available when the theme actually enables it. It’s not coming out of the box yet, so you need to adjust the theme a little bit to actually be able to use that.

Leonardus Nugraha:  Yeah, I think it used to, you have to add a little bit of code to make it enabled in the theme that JSON file, right?

Birgit Pauli-Haack: Correct. Yeah.

Leonardus Nugraha:  For now.

Birgit Pauli-Haack: Yeah, for now. And I need to figure out maybe next release, there will be a way to enable it as a site builder with not access to code to also make use of it. And the Cover Block now got Text Scholar Block support. I was thinking, “Okay, that didn’t happen before.” But obviously it didn’t, because it’s now in the plugin. Yes, those design tools are rolled out to the core blocks one at a time to enable them and then test them, to make sure that they’re work in every context nicely.

Leonardus Nugraha:  And the next one, adding compound class to layout wrapper or global style spacing. Maybe you can cover this.

Birgit Pauli-Haack: So the problem was that the Cover Block didn’t work out of the box. The covers mark up the structure and they needed to change the classes to make them also available to the float. And so the Cover Block was a little bit revamped to specify target wrapper for the class, and for the layout of the object. So it was hard to target things that are inside the inner blocks. So that was a revamp that was necessary. So those who style themes can actually access those easily and style them. There was a specificity problem, I think. So for theme developers, they will make sense of it. So the spacing wasn’t clear for the block children. It was random inside the Cover Block. So they changed that and fixed it. It was a long way around it, explaining it, but sorry. Yeah.

Leonardus Nugraha:  Yeah, so developer focus one. Yeah.

Birgit Pauli-Haack: Yeah, seem develop the styles. Yeah, CSS. And sometimes I have a hard time with it. 

Bug Fixes

So now we come to the bug fixes, those were all the enhances of the 15.4 Gutenberg plugin release. We have, I think only two bug fixes that we want to point out, because sometimes you want to know when a bug is fixed. And the first one is that to ensure that the aspect ratio selected is also applied to the post feature image block, and in the Post Template block. So it shows up when you have a summary page, and you have the featured image with the blocks in a grid, that the aspect ratio is actually applied to the post featured block. That’s really important. Yeah.

Leonardus Nugraha:  I remember I was having problem with featured image ratio quite a long time ago, but I didn’t realize that it’s actually a bug. So yeah, I’m glad that it’s fixed now with the 15.4. And I think the aspect ratio option is only available when you actually enable the link option for the featured image, right?

Birgit Pauli-Haack: Yeah, yeah, yeah. That was the problem. And then for the navigation block, there is a major bug fix that when the input, the classic menu using in the menu name, that it’s also going to be the title for the block menu. So there is a seamless integration there. And people are not getting confused. They did not take my menu that I wanted to, or didn’t do it when you imported a classic menu. So this is fixed now with the Gutenberg 5.4. What else is in there? 

Leonardus Nugraha:  I think this pull request in the demonstration, it’s actually hide the Meta Box at the bottom by default. Previously it shows the Meta Box when you’re in a certain width, but now it just hidden. So the interface is much more cleaner than ever now.

Birgit Pauli-Haack: Yeah, Distraction Free. Don’t get distracted.

Leonardus Nugraha:  Yes.

Birgit Pauli-Haack: The Meta Boxes, yes. Yeah.

Leonardus Nugraha:  It’s small, but sometimes people can get distracted by that, even though it’s this small thing at the bottom.

Birgit Pauli-Haack: Yes. Yeah. But if you have multiple custom fields or something like that, that can be quite long. So it’s good to hide it. Yes.

Documentation

And then there are quite a few documentation changes, and I want to mention them. So your listeners, you can go and look them up. They added examples on how programmatically remove the panels in the document sidebar. So if you don’t want featured image or don’t want the tags or the categories, now developers can look up how to actually remove those for their plugins, or for their theme, or the bespoke agency theme development.

Leonardus Nugraha:  And then the next one is for the sticky position documentation. So I think this relates to the new sticky position features site. So this also been added to documentation.

Birgit Pauli-Haack: Yeah. And that also fills in with a second one that we…

Leonardus Nugraha:  Oh, yeah.

Birgit Pauli-Haack: Which is, so the theme, JSON Schema now has two places where the sticky option is mentioned, and it didn’t before, but it’s now in the controls for the appearance tools. When you set them for true, there’s also a sticky option there. And then you can also in these further down in the Schema, you can add the sticky positions, and minimum height for the styles section as well. So that is now all documented, and you can look up how it works and how it helps you.

Gutenberg 15.5

And I think that’s the Changelog for Gutenberg 15.4, and we are now right into the Changelog for the latest Gutenberg 15.5 release that was released Wednesday, April 4th. And was again, the team Ryan Welcher and Justin Tadlock. April 5th, sorry. And it has 143 PRs with 52 contributors and some updates there. So the first enhancement is that the post date now block has now a variation to use the modified date rather than the published date. And it’s really important when you have a new site, and you want to get the updated post higher into the latest news, then you want to use the modified date. So it bubbles up again. “Okay, look here. There were changes in that and it’s still important.”

Leonardus Nugraha:  Yeah. And this is also great for end user as well, in my opinion, because this is basically the same block with this variation, with the modified date enabled by default. But for new users, it’s just much easier to find having a separate post date and post modified date. So if they want to show both in the single Post Template, they can just find these blocks without having to fiddle with the settings. So yeah, it’s a much more seamless and easier work process, workflow. And then similar to the post that we have “Time to Read” block, which I believe was released on 15.3. It was right?

Birgit Pauli-Haack: Yes.

Leonardus Nugraha:  And now we have a plethora of settings like typographic support to the “Time to Read” block, and also spacing tool. So after this was introduced in 15.3, with 15.5, now you can customize the typography and the spacing tools.

Birgit Pauli-Haack: Yeah. Sorry, go ahead.

Leonardus Nugraha:  No, I’m finished.

Enhancements

Birgit Pauli-Haack: Yeah, no, I used it. So the “Time to Read” was actually already available in the outline of the post when you were in the block editor. You could see “Time to Read.” Two minutes, 15 minutes, yeah, 25 minutes. Never going to read that. But then immediately as it was available, people were asking, “Well, can I use that information also on my front end so I can notify or I can show it with my post grid or something like that? How long the Time to Read for that?” So because readers like that, they found. And it took a while to get it right, to get a new block in and figure out what’s the best approach. So it now only shows a number and the minutes, and that was the easiest way to make it available through all the languages, because each locale works differently with minutes, three minutes kind of thing in different languages.

So now you can put them in a row with your wording. So Time to Read, 15 minutes. The “Time to Read” is a paragraph, and then you stack it with a row. Group block, in a group block with the “Time to Read” block, and then you can have that in your Post Template block. So what did happen was that when I was testing it, I saw immediately that my default font size was different for the paragraph as it was for the Time to Read, but I didn’t have any controls to change that for the Time to Read. So I filed an issue and said, “Okay, I need typography control there, please.” And then I also thought, “Okay, I need some spacing as well,” because it was a little lower than the Time to Read. It was really weird. I figured it out for my personal blog, but then also found that it would probably be best to have both controls available to that.

Leonardus Nugraha:  Yeah. And in case everyone wondering, it is actually possible to have Time to Read information previously, but you have to code it to your theme or install a plugin specific for that function. So yeah, it’s nice to have it in Gutenberg. And hopefully, in the future it’ll push to the core as well.

Birgit Pauli-Haack: Yeah, yeah.

Leonardus Nugraha:  So the next one, oh yeah, the sticky position. I think this feature didn’t have chance to see the light of day, because when the feature is added, it’s now reverted back. But essentially, there was a pull request to enable Template Part blocks to be sticky, which is perfectly logical. Because if you have a header, you want to have a sticky header, that means you have to make the Template Part for the header sticky. So there’s this pull request that adds that feature, but the way it worked was adding the Template Parts into a group block, which is already have the sticky position support, but that doesn’t really consistent with how the Template Part works. So we are now referred back to how it was, you cannot make it sticky anymore. But yeah, the idea is there. So hopefully, this will be a good starter to see, to look for a better solution for this one. Because yeah, I think many users will want to have Template Part header to be sticky instead of they have to use a group block on route level.

Birgit Pauli-Haack: Yeah. And it’s quite unintuitive to figure out, “Okay, if I want to make it sticky, I need to put it in a group block, but it’s already a Template Part. Can’t we have that support just for the Template Part?” But yeah, that adds definitely to the complexity, because the Template Part sometimes doesn’t have, the sticky doesn’t know where to stick it, so to speak. When the Template Part is further down the page, then it’s hard where to stick it to. And yeah, where is it located? Is the Template Part on the sidebar? Then you have a sticky sidebar, but the sticky sidebar behaves totally differently from a sticky header or a sticky footer. So when you read through the PRs, your head might spin because it really shows the discussion between the designers.

Leonardus Nugraha:  It’s just the complexity.

Birgit Pauli-Haack: It’s totally complex. Yeah, just take it from us. It’s a complex thing.

Leonardus Nugraha:  I just skip to Rich Tabor feedback about how it doesn’t really sit with the consistency of the sticky position as well. Because on this PR, you make it sticky, I think to the Ellipsis menu instead of from the block tools. So it will create a different experience.

Birgit Pauli-Haack: Yeah. And the same complexity we will enter when you make the experiment available on, so there is a new feature in 15.5 that’s first take on the grid layout group variation. So we have flex layouts, we have flow layouts, and now the designers and developers try to get it working with the grid layout. And if you want to try it, you need to enable it through the experiments menu item on the Gutenberg plugin menu item, and check that part to test it out. But please do test it. Because if you want it to get out of experiments and then into the Gutenberg plugin by default and then further into WordPress, it needs to be really working well. And all the use cases, people cannot think up about all the use cases that you would use it. So yeah, please test it and give feedback on the PRs. Or create new issues on the Gutenberg repo so the developers have a better feel from what is still missing and how it’s not working. Yeah.

Leonardus Nugraha:  Yeah. I just test the feature for a few minutes after the launch, because this is also on the launch post. So it’s quite interesting. And I love it because it was only after this update, I just realized that if you want to create a block, a grid layout with, let’s say, three columns and three rows, you have to mix it with row blocks or stack blocks, and you just create the whole complex structure. But now with the grid layout, it can just go straight out from the box with the way you want. You can have four columns, you can have six rows, maybe. And yeah, it’s nice to have this variation. I already tested, even though just few minutes, but I already see possibilities to use this layout for my website, my portfolio website.

Birgit Pauli-Haack: Well, it’s great when those new features actually trigger some creativity on “Well, how can I use it? Yeah. Can I push it to the limits?” And that’s what it’s all for. Yeah.

Leonardus Nugraha:  And the great thing is it’s not something that I have in mind. So previously, okay, row blocks, type blocks, columns blocks, that works, but now you have a grid. “Oh my God, I can have that all in one now.”

Birgit Pauli-Haack: And that was quite a few themes developers or theme builders were actually missing that, because grids came in to the CSS part, I think it was in ’16 or 2017, and it’s been a while that other web developers were able to use it in different settings. But WordPress didn’t have. There was a plugin or there is a plugin where Automattic created some grid layouts. But now that this is in core, I think we can push it really further into the internet, so to speak. There’s another item that now you can actually style the caption element, also via the UI controls for color and topography. That’s the caption for the image…

Leonardus Nugraha:  Image block.

Birgit Pauli-Haack: Image block, yeah, and Video block and Table block and all that. So now we have that, but it seems to have also the UI for you were able to do this via the theme JSON, but now you can do it without using the code for it.

Leonardus Nugraha:  Yeah. You can access it through the global style panels for typography, there will be a new caption options, and the color as well.

Birgit Pauli-Haack: Yeah.

Leonardus Nugraha:  So yeah, the next one, we have the patterns to the template start modal. So when you add new templates now instead of having a fallback default templates, you can have this options to pick a pattern to start with. So yeah, this is also interesting, because in my opinion, this is a perfect middle ground. I remember when the Site Editor came in 5.9, when you add a new template, you start with blank canvas, which is quite daunting, to be honest. And then it was fixed in the feature of this 6.2, 6.0, I can’t remember that one. But basically, now you can choose it with the black templates and a default fallback template, which is great. But the problem is if you have different ideas with the default templates, you basically have to modify the existing template. You can remove some blocks, and you have to add more blocks. But now with the increasing number of patterns and increasing number of the pattern adoption by the theme developers, it’s nice to have just simply options to add patterns for the template and choose whatever suits your needs.

Birgit Pauli-Haack: Yeah, definitely. Yeah, the blank page is not good for anybody, not for writers and not for style, for theme builders. So what’s next?

Bug Fixes

Leonardus Nugraha:  It’s quite a lot showing the featured images placeholders. Again, this is something I didn’t realize at first. Is it Blockfish? Oh, no, it’s block library. Yeah. It’s something that I didn’t realize previously that sometimes the featured image doesn’t show on the Query Loop block when there’s no featured set for the certain post. But I think now when you’re in the Site Editor and some posts may have a featured image and some don’t, the post with featured image will show the featured image on the Query Loop. And the post that doesn’t have any featured image will have this gray placeholder so you know that the featured image will be there.

Birgit Pauli-Haack: Yeah. Or say, “Oh,” and if I want that design, it alerts you to not every post can help you with that design because there is no featured image. So it gets a little bit skewed there, where the headline comes up on the top of the image to the next post. Yeah, so it really helps with what you see is what you get kind of approach. Yeah. Yeah, there was quite a daunting bug there. And then the one other bug fix was that the Selecta’s API, the hook for the global style variation and Duotone has been fixed, and it’s now behaving consistently throughout the site. There’s a whole list of PRs that are with that. Not all of them are actually placed in, but this is definitely a very major fix to revamp the code consistency and code quality for it.

What’s in Active Development or Discussed

All right. And this was Gutenberg 5.5. I’m glad that they were a little smaller as plug-in releases, because first, we got two and then, but we also have a lot to talk about what’s in active development and what’s discussed. And I prefixed that next section for the section is, we will include three and a half topics to talk about. First we talk about a little bit about Matias Ventura’s post on the next phase of the Gutenberg project, Phase 3. And there’s also work being done on making content and template editing less confusing, and then a proposal on the interactivity API by core contributors. And the half-topic is the design shares by Joen Asmussion from the WordPress design team showed what they are working on. Yeah.

Leonardus Nugraha:  Let’s start with Phase 3. Personally for me, this is the most excitingness of the year, probably, ever since Matt mentioned it on the State of the Word, that this year we are moving to Phase 3 with real-time collaboration. Personally, I believe if the Phase 3 is what I have in mind, and officially just like what Matias posted on his blog post. This is my personal take, but I really think, I believe that it will be a game changer in the content industry. Because right now, we rely on other tools like Google Docs to collaborate and create the draft for the content and then push it on the WordPress, which, it’s now better with the Block Editor, but still, you have to move the draft, you still have to clean the code, you still have to move the image with the alt tags. So if the Phase 3 finally mature, this can significantly improve the workflow and the pace of the content industry. So yeah, I really hope the Phase 3 gets underway as soon as possible. And let’s see how the development then. Definitely can’t wait for that.

Birgit Pauli-Haack: Yeah, I’m totally with you. The other, I think the whole web development and web content creators of the last 25 years is actually waiting for this, that two people at the same time or four people at the same time can access a post and edit it. And not the last person who’s clicks saves wins. So yes, I think that, and bringing that to a web editor is certainly cutting down on the workflow of a lot of people that had to collaborate on Google Docs to get input from other people, to get approval from other people. So that definitely is that real-time collaboration part that Matias Ventura was talking about in his post. What he also sees is that there are asynchronous collaboration. That if Leo in Indonesia is writing a post, and I’m in America and that’s 12 hours apart, I want to comment on it, and it’s really hard right now to do this because there is no revision comments.

There is no comments at all unless you have a plugin. There were always a few things already, a plugin there. So PublishPress is one, and then Edit Flow that took care of some of that, but you weren’t able to customize it to your own liking. And then he also talks about the published flows where you have publishing checklists. So is the image rate in the aspect ratio? Do we have an excerpt? Do we have all the categories and tags, and do we have a different image for the header section and for the footer section? Or when different contacts can have different publish flows. So that is definitely going to be a little bit more complicated to make it extensible. And then also the post revisions interface, it’s really hard right now to see what really changed when you have a long post from one revisions to the next.

And this Phase 3 is aiming to make it understand blocks, and then also help you with theme switching as well as applying some other styles. And also have revisions that are scheduled. We have on the documentation team, yeah, Leo, you probably know this better than I do, but if you want to prepare for a release, you need to wait till the release is out, so you can publish it, publish the new version of your documents. But not everybody has time to wait for the release and be there in the middle of a night, and hit the publish button or the save button. You definitely want to schedule that. And yeah, we use a plugin for that, but having that in core would be definitely, we are not the only ones who have that trouble. Yeah, yeah.

Leonardus Nugraha:  Yeah, definitely.

Birgit Pauli-Haack: Yeah.

Leonardus Nugraha:  But with the post revision interface, I think that’s the main, when talking about collaboration, people might think about real time and asynchronous collaboration. But post revisions are as important as the other ones. Because when you collaborate, especially with bigger themes, you really want to see not only what part has been changed, but who made the change to keep the accountability and content to be as good as possible. And to make sure there’s no mistake in the process. So yeah, and I think, I’m not sure, did Matias actually talk about this, but with the collaboration is now on WordPress, there must be some thinking to grant more access to collaborators, maybe from links and maybe how to control the user’s permissions. So I believe that’s something to tackle as well on the first three.

Birgit Pauli-Haack: Yeah, it’s definitely will, especially the post revision interface. And although it will need different user roles for different things to do, and I know that bigger publishing houses, they have that really huge requirement that they need to have people access the images but not the text kind of thing or vice versa. And yeah, there’s definitely a part of the development will be about user roles and user capabilities that come with the publishing flow, for sure. There’s also the admin design. There was a separate post by Matias back in January, I think, that was thinking about through the WordPress admin experience. And that will now be part of the collaboration phase, where certain pieces of the admin definitely would need a revamp, like how we organize posts. What’s in the post you need for the collaboration you need, yeah, when was it revisioned?

Does that need to be in the list view of things? And all that kind of thing. And then also have a library. Expansion, that means spaces where you can manage your patterns, where you can manage your blocks, your styles and your fonts on the site, or at least for the site admin to be able to do that. Right now, there’s the two, all four of them that I’ve just mentioned. And the Matias mentioned in his post where are actually missing, and it’s felt quite a bit throughout the five years that the Block Editor is there, especially the blocks where you can switch on and switch off blocks in the interface. But then if you have third-party blocks, you don’t know which of the blocks have you used or which post uses which block. So you can switch it over to a different one when you say, “Okay, I want to remove the plugin.” But all of a sudden, some of your content disappears as well.

So there definitely needs to be a little bit more manageable space there. And then the last item is develop a global search and command component where you can say, “Okay, edit post in a search box,” and then it opens up the “Edit post” admin screen. So you don’t have to click through all the different levels of things. That’s the idea behind it. So I’m not sure if we do it really justice, going through those different sections of the collaboration post by Matias. Give it a read. It’s definitely is a little bit more expanded at what we are doing here. And see, and especially what Matias Ventura is asking and the whole core contributors are asking. So if there’s something that you are doing on your website and you want it in one part of the collaboration, because it fits in that scope, but it wasn’t yet mentioned, comment on the post, describe your flow, and see if that’s something that could be in core.

Nothing is, of course, prominent at this stage because I haven’t started working on it yet. So in the WP Briefing podcast, Episode 52, Josepha Haden Chomphosy and Hector Prieto also talking about the Phase 3, the workflows, the visioning about it. So it’s another version of it, and you probably can hear more about it. All right. So I mentioned it before, is also work being done, and we’ll share the links to the PR and discussions in the show notes.

Users repeatedly mentioned that they sometimes get confused of what they are actually editing in the Site Editor. And then they see a page and make updates to the content, and then they’re surprised that page template, actually, that they’re actually changed the page template. And that the content that they changed or that they added is replicated on all the pages because it was a template. So that’s quite a surprising thing, and it’s nowhere really alerted that that might happen. So the developers and designers are really working hard to make it a seamless switch from editing your content to editing a template. And there are two, there’s one PR that actually caters to that, but then there is a bigger effort to optimize also the content-centric editing experience in the site editor. So I’ll share those in the side notes. Show notes, side notes, show notes. Yeah.

Leonardus Nugraha:  It’s definitely a nice addition to the Site Editor. I remember when the browse mode first mentioned in past updates, I believe, this is actually what I had in mind. Users can browse their websites, can open pages and blog post to the Site Editors. And when they want to edit the content, they can just switch from editing the templates and just editing the page or post they’re browsing in. And I think with the new navigation UI in the site bar or the dark side of the Site Editor, it’s like that already. We can see the menu items in there and just click on it, and you can see the page. And if you click it, you can edit the page on the Site Editor. So yeah, it’s already in the good direction now. So it’s only the matter of expanding it to be more integrated between the Site Editors and put editor, and the post and page editor.

To be honest, when the first Site Editor came out in 5.9, this is also my first issue, figuring out what is the new Site Editor? And I just click it. “Okay, this is the template, so how do I edit the post or page? Oh, I still have to go to the old post and page editor.” Because in my mind, it was a page builder or website builder, but it’s not right. So it took me a while to understand what it is. And now we are working to integrate the Site Editor and the content editor better. So in the future, we might have a better experience with Block Editor and seamless content editing.

Birgit Pauli-Haack: Yeah. And for a newer WordPress user, the difference between the page and the template for the page, that’s a certain cognitive hurdle there. An abstraction level that not everybody who wants to get their work done wants to deal with. So it’s definitely something that needs to be handled, but it’s also sometimes really hard to make that intuitive. And if the context is not known with a switch, so it’s going to be a training. Sometimes we always think that web editing should be something like using a car, without forgetting that we went to traffic school before we actually learned driving. And we don’t want have traffic school for the web there. So we need to make a compromise there.

I also wanted to point the more the developers amongst our listeners to the proposal for an interactivity API that a team of contributors has worked almost a year around it to figure out how can this be standardized. There is, of course, available any of the block builders or block developers or third-party blocks or core blocks. There is some interactivity already available, but it’s not standardized. And standardization also means that developers don’t have to relearn everything. Users don’t have to relearn everything every time they have a new plugin. And also, you can share data. So if one plugin knows about the block of another plugin, then new things and better things can happen. So Mario Santos published a proposal for the Interactivity API.

And for those of us who need a practical application to think through the abstractions there, it’s all very theoretically, Mario also put in a video demo of a movie database, where in you can browse the site publicly and developers can look at the code of things. But the video shows two use cases for add an interactivity to that movie directory. And navigating the directory is already by search, and that is one of the interactivity API, because it doesn’t go back to the server and reloads things. That’s pretty much what it abstracts is that only parts of the data will be replaced on the site, but it will not go back to reload the whole page that you’re looking at. And then the other one is click on hearts to favorite some of the movies. And it also has a favorite counter on that. So these kind of interactivity, that’s a simple example that we can all rely on or relate to.

And then there is the whole proposal itself. As a developer, you learn about directives, you see some code examples, and the FAQ also answers some of the more in-depth questions you might have. The post has already 40 comments. So grab a cup of coffee, put on some nice, slow music and read through it. It’s almost a book, but it’s very, very interesting in terms of what can actually happen when we standardize things. And then there is next week, no. Okay, so I don’t want to count it because I don’t know when you are listening to it. So two developers from the team who came up with a proposal will be speakers of the Developer Hours on April 17. I don’t know if you know about Developer Hours, but they had been revitalized from an experiment last year where you can connect with developers on the core team and have questions answered.

And this time has a little bit of a different format, when there is an introduction to the interactivity API. And they will hold two events to accommodate as many time zones as possible. One is at 8:00 AM UTC. And the other one, that’s with Mario Santos. And the other one is at 17:00 UTC. That’s going to be with Michal Czamplinski. And yeah, so that is actually the next generation of block development getting more interactivity into, it’s called a hydration process, where things come from the server. Yeah, it’s a connecting PHP with JavaScript and just update the necessary data on the front end upon user interactions. That’s pretty much the explanation for it. Yeah, so I don’t know if you have any comments on that, Leo?

Leonardus Nugraha:  Nope.

Birgit Pauli-Haack: Yeah.

Leonardus Nugraha:  Because I’m more of an end user in this regard.

Birgit Pauli-Haack: Yeah. And what you see in the demo is actually quite impressive, because you see the seamless, that there is no time lost between changing different screens. So that’s really cool. 

So there are two articles in the show notes, one from the Tavern and one the proposal. And then if you as a developer or want to be a developer kind of person, share or join those two developer hours with Michal and Mario. And the last thing, the half about topic for, what’s in the works is Joen Asmussen’s Design Share from March 27th on the “Make WordPress Design,” make blog. And he shares what’s happening, with one is that the mercantile store, the swag store gets some social images that are designed. Then the design team also thinks through making the padding and margin controls a little bit more intuitive and see how to provide easily clickable preset sizes and unlink variations, and take a look at it.

And he connects with the PRs on issues that are on the GitHub repo. They also have a visual idea on how to scale the Block Options menu. That gets really long now to cluster some of them, and then you can access and an arrow with a secondary menu item there. That’s quite nice. And then he had, the last one is the ideation of the Template Management view where he has a small video to mock up the view toggle patterns to moving between the browsing and the managing context. So that’s pretty much the topic that we talked before about content-centric Site Editor kind of thing. So they’re, of course, design, it’s all visuals. And we are here on a podcast, so it’s really hard. But we have the link in the show notes for you, so you can browse them at your own leisure. Yeah. All right.

Leonardus Nugraha:  The block option in particular caught my eye because as you say, the block options get longer and longer over time. So it is quite short. But then we have block locking tools, we have “Create Template Part” options. We now have a copy style and paste styles. I mean, if we have a minimized Windows Manager, try to open the options, so you might have to scroll it down just to find the bottom ones. So yeah, it’s nice to have the new designs to just split it and with the sub-menus. Yeah.

Birgit Pauli-Haack: Yeah. You still need the space on the right-hand side when they pop out. So if there are too many options, it’s not enough room. But yeah, gradual adoption is pretty much the keyword word for that. Yeah. All right. This is the end of the Gutenberg Changelog Episode 81. Thank you so much for listening, people. Leo, thank you so much for being here and talking this through. You did an excellent job. It was wonderful to have the chat with you, and I really enjoyed it, being on the show with you. So you mentioned…

Leonardus Nugraha:  Yeah. Go ahead. Go ahead.

Birgit Pauli-Haack: You mentioned a few links to your social web. If you can repeat the website where you have your portfolio for the photography, that would be great.

Leonardus Nugraha:  Yeah, the website is Leo and Lens. I will type it down for you later, and maybe you can put it on the show notes.

Birgit Pauli-Haack: There’s no maybe about it.

Leonardus Nugraha:  Thank you. Yeah. And yeah, lastly, thank you all, listeners, for listening to this episode. Thank you, Birgit, for having me. It’s such an honor to be in the Gutenberg Changelog podcast with you.

Birgit Pauli-Haack: It was definitely, the pleasure was all mine. And well, I might ask you to maybe come back in the future. Yeah.

Leonardus Nugraha:  Yeah, yeah, just contact me. I’ll definitely be happy to be in here again and talk about Gutenberg, about WordPress and how it evolves. Yeah, it is a great pleasure for me.

Birgit Pauli-Haack: Thank you. Yeah, and as always, hey listeners, the show notes will be published on GutenbergTimes.com/podcast. This is Episode 81. And if you have questions or suggestions or news you want us to include, send them to Changelog@Gutenbergtimes.com. That’s email Changelog@Gutenbergtimes.com. And thanks again, and I wish you all a good weekend, a good day, a good year, and a good month, so bye. That’s it for me. Goodbye.

Leonardus Nugraha:  Goodbye.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.