Gutenberg Changelog #55 – Gutenberg 11.9, WordPress 5.9, Navigation Block

Birgit Pauli-Haack, Grzegorz Ziolkowski discuss Gutenberg 11.9, WordPress 5.9 and Navigation Block. Surprise Guest: Riad Benguella

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Announcements

Nov 22, 2021 7pm EST / 0:00 UTC
JerseyPress: What is Full-Site Editing?
WordPress Meetup in Montclair, New Jersey

𝗕𝗹𝗼𝗰𝗸 𝗕𝗮𝘀𝗲𝗱 (𝗙𝗦𝗘 𝗰𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲) Theme in the WordPress Directory

What’s released:

WordPress 5.8.2

Gutenberg 11.9

What’s new in Gutenberg 11.9.0 (10 November)

Gutenberg 11.9 Focuses on Navigation Menus and Block Theming

What’s in active development or discussed

FSE Program Testing Call #11: Site Editing Safari

Stay in Touch

Transcription

Birgit Pauli-Haack: Well, hello and welcome to our 55th episode of the Gutenberg Changelog podcast, recording on November 15th, 2021. In today’s episode, we will talk about Gutenberg 11.9, WordPress 5.9 coming up to a WordPress instance near you and then about navigation area block on Full-Site Editing and all the good things that come to WordPress.

I’m Birgit Pauli-Haack, curator of the Gutenberg Times and WordPress developer advocate. And today, I have two co-hosts. You all know Grzegorz Ziolkowski, JavaScript developer at Automattic and WordPress core contributor. And our surprise guest today is Riad Benguella, one of the lead developers on Gutenberg and also code wrangler at Automattic. I am delighted you are here with us Riad, thanks for joining us.

Grzegorz Ziolkowski: Hi, Birgit. Thanks for having me. It’s an honor for me to join you and Grzegorz on the show, and help spread the Gutenberg love to the community.

Birgit Pauli-Haack: Yeah, yeah. It’s good. Yeah. Well, your passion for it is really contagious when I saw you before at WordCamp US and so when we met, it’s always nice and yeah patiently explaining things to me. So are you both on a team retreat? Where are you right now in the world and how are you doing?

Grzegorz Ziolkowski: Hola, qué tal? That means greetings from Spain. So I’m so happy that Riad joins us today to discuss the latest 11.9 Gutenberg plugin release and the upcoming COR press 5.9 release.

Riad Benguella: Yeah. It’s so great to be able to meet colleagues again, we are kind of learning to travel again. Right?

And yeah, I’m also, so looking forward to be able to join the community in upcoming word camps in-person events. We miss these a lot.

Birgit Pauli-Haack: Oh, yeah.

Grzegorz Ziolkowski: The one is happening in Seville in December. That’s going to be fun.

Birgit Pauli-Haack: You’re going to be there in December in Seville.

Grzegorz Ziolkowski: I’m not it’s the connection to Seville is bad for me, but I know that some of my colleagues from Spain, which will be there from Automattic.

Birgit Pauli-Haack: Yeah.

Riad Benguella: Personally I’m so looking forward to word camp Europe in Porto in June, hopefully.

Birgit Pauli-Haack: Yeah, me too. Me too. And I’m so excited. I was excited two years ago when it was supposed to happen and now I’m even more excited to come to Portugal and to see everybody from Europe again, it’s going to be such a great event. And I hope that all the people that are still hesitant about vaccinations, that they get their shots, also the booster shots so we can all be together. Because I found that in-person meetings are so much richer than even though an online meeting like this, it’s good to help out and kind of bridge the gap. But the in-person meeting, even with family, we visited the family for five weeks in August and September. And there was such a relief to finally be together in one room again, and just hang out and go out and eat and just sit and chat. Yeah. But back to here.

Announcements

So I just wanted to let you know that November 22 is a WordPress meetup in Montclair, New Jersey, which is a virtual meetup and anybody can join. And I will demo the concept of full-site editing. And I will also take questions, AMA style, ask me anything style and it will take place on 7:00 PM eastern 12:00 AM. I was just going to think, is this am or PM because, it’s 12:00 AM UTC. And if you go to meetup.com, look for WordPress Montclair in New Jersey to sign up for it. Well, of course we will have the link in the show notes but it would be great if you want to learn more about what’s coming to WordPress 5.9 and Full Site editing to join us there.

Grzegorz Ziolkowski: And speaking of that, I would like to thank props to Munir Kamal for reminding us on Twitter about the new tag that is in the WordPress teams directory, which called Full-Site editing. And it allows you to see all the block teams that are already there and it looks that we have 27 teams that are marked with this tag.

Birgit Pauli-Haack:  Yeah. That’s great that, tweeting that out Munir. I’m also seeing that’s also a link that I will share in the show notes, of course, and also in the meeting at Montclair and some of the themes that are in there are actually universal themes. They work for a classic theme or a block theme. So it’s quite interesting to see how you can switch it over. But don’t use them on production caveat it’s still a beta kind of feature.

Grzegorz Ziolkowski: Yeah, it’s like in one month, everything could change.

Birgit Pauli-Haack: Right. Everything, the whole Internet’s going to change. But only if you want it. Yeah, we don’t want to scare anybody to upgrade to 5.9 because it’s all opt in. And it’s only when you have a block theme available, the Full-Site Editing is actually available to you. 

What’s Released – WordPress 5.8.2 and Gutenberg 11.9 

So what’s released in last week, we had the WordPress 5.8.2 release, that’s a maintenance and security fix. And if you haven’t updated yet, you definitely should do so now. Most WordPress managed hostings automatically update to a point release, but not everybody is comfortable doing that, but update it. And the other release was of course the Gutenberg 11.9 plugin release with 223 PRs, yes I counted them and they made it into the release.

Grzegorz Ziolkowski: The largest ever.

Riad Benguella: I also counted the PRs for WordPress 5.9, and it’s actually 600 feature PRs and like 400 bug fixes.

Birgit Pauli-Haack: Wow.

Riad Benguella: So it’s like 1000 PRs that are coming to WordPress 5.9.

Birgit Pauli-Haack: Whoa.

Riad Benguella: In a couple of weeks.

Birgit Pauli-Haack: Well, that’s huge. Yeah. So the…

Riad Benguella: I don’t know how the community managed to do that, but yeah. It’s very impressive.

Birgit Pauli-Haack: Yeah. Wow. Yeah. Well, thank you for the data. So 600 features and 400 bug fixes. That’s a thousand, wow. Yeah and how many contributors, you don’t know, but we will know in December.

Grzegorz Ziolkowski: Yeah. That’s important. Someone will run the script that will calculate everything for us.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: So stay tuned.

Birgit Pauli-Haack: Stay tuned. Right. Okay. So what’s in Gutenberg 11.9. 

Enhancements

Grzegorz Ziolkowski: So first we start with new blocks, but they are not part of WordPress 5.9’s release. They are still experimental and they are related to comments block, we already have one that is going to be in 5.9, this which is called post comments and is basically everything you see when you go to the comments section under the post. And this one is something brand new. So we are doing it in a way that is more granular and similar to the way how the query loop block works. So the new blocks are comment replying, comment edit link, comment outer avatar, and the comments query loop. There is also comment templates. So the idea is you can combine everything, decide what you want to display and so on.

Birgit Pauli-Haack: Yeah.

Riad Benguella: I was going to mention the navigation block and the work that has been performed during this release, which is an important work that was actually answering some feedback from the user testing that happened on FSE. So users were finding it a bit hard to actually reuse navigation across teams and across templates for FSE teams. So an important work went into the navigation block during this release. So now the blocks are actually saved into their own custom post type. They work like template parts so you should be able to reuse navigation menus more easily across templates, and when you switch teams.

Also the same features will allow classic themes to migrate more seamlessly into a block theme. So when you switch from a classic theme to a block theme, all your navigation should probably be retained. And yeah, these are some important change that are coming and actually was important before the beta of WordPress 5.9, which is I think coming tomorrow.

Birgit Pauli-Haack: Right. Yeah. It needed to be within the feature freeze. So it makes it in 5.9 and bug fixes will come probably with the next plugin release that will be back porting some of the issues.

Yeah. Thank you for mentioning the navigation block I have, in the last few days before I went to Chicago, tested some of the navigation items, and I’m glad that some made it in there. One is the single placeholder for the block. Where you can actually select the menu when you already have one or add all the pages or start an empty navigation block. And that is really helpful for users to get it all set up. But I also like, and I don’t think it’s in the release note now, but what also helps is that you can add the site title to the navigation or a site logo to the navigation block.

So it’s all kind of one unit that is on the header. That definitely spruces up the FSE, as Riad mentioned, FSE means Full-Site Editing and listeners will know, that referred to the Full Site Editing outreach program, that is run by Anne McCarthy. Do we have anything else? Oh, what I also like is the responsive navigation, there is a way to get the hamburger menu out of the box with a little feature there. And you can decide if you want the hamburger menu by default, also for your desktop site or just for the mobile site. And another tool is there that you can have the menu, have a navigation, an orientation horizontal or vertical. So you could if you wanted to put it in a column block on the left hand side, and it kind of goes down the left hand side, like one of the default themes, I think it was 15 that had a navigation block on the left hand side, yeah. All right and then we had these post comments, but it was interesting to hear that will not come into 5.9. Thanks for pointing that out. 

Grzegorz Ziolkowski: There, are two things it’s quite confusing because we had a post comments like plural, a post comment, but also post comment, singular block. So the, the one that has that got deprecated was the more or less what we are trying to replicate now with comment template block. But the old one, it was just very limited. And it worked more like a format you had to provide a comment ID, which was very hard to use for you. You don’t know the comment ID of your comments. So yeah.

Birgit Pauli-Haack: I don’t even know the post ID. Yeah. Okay.

Grzegorz Ziolkowski: Otherwise there was enhancement to the post comments blocks that will be included also in Twenty Twenty-Two default theme. And there was some features missing, there was some issues with the marking inside the block, and also in some cases is when the outer of the site decides to close the comments. So we should show proper messaging or you can also on your website decide that after a certain amount of time, you can no longer comment on posts anymore. So these cases are sorted it out and it should work pretty good in those situations.

Birgit Pauli-Haack: Yeah. And I also see that the post comment form that’s now available for block based theme on the post template, I would think. Yeah. Excellent. Excellent. 

Then there were some enhancements for accessibility with announcing the formatting change to screen readers also communicate to the screen reader the post title is a text area and some other smaller fixes or enhancements there, which is in all the little things that kind of make a user experience so much richer.

On the block editor we have the enable rich previews in the link UI for the site editor. That is something that had been in the block editor for, I think two versions of the plugin and now it also comes to the site editor. That’s a feature that when you put a link text in a paragraph or in a navigation or wherever you need it and you save it and then come back to it, you come back to update the post or you just kind of continue editing it, and you hover over the link, you get a rich preview with a title, a description as well as if it’s available, a feature image. So, you know exactly if the link is still working or if you need to update it in your content.

Riad Benguella: Yeah. As we get closer to 5.9 the contributors worked more on parity between site editor and post editor. So they brought these features, the link preview, the save keyboard. Now you can press command S and it triggers the saving. And there were some discussions also about the menu item of site editor and where we place it exactly and where it makes most sense. So for the moment, this decision has been to use editor and move it in their appearance. And it’s now worked that way across WordPress trunk. And also the Gutenberg plugin.

Grzegorz Ziolkowski: Now the controversy is that under appearance, we have editor and a theme editor, so that’s a confusing thing that probably needs to be further discussed among the contributors.

Birgit Pauli-Haack: Yeah. I hear you there. There is a lot of editing going on. Yeah. And the theme editor it’s really hazard because it gets you to the files of your PHP theme. And if you change a code and leave a quote out or something like that, you can actually create fatal error messages on your site. And it’s very hard to get to them to fix it. So I would always suggest to take away the theme editor instead of the site editor, because the site editor is a much safer place to be for someone who is not particularly technical.

Riad Benguella: Makes me wonder if it’s basically the ancestor of the site editor. In classic themes, you cannot edit the theme directly, you have to edit the code. So you go to the theme editor, or you edit the files manually. So now that you have the site editor, maybe we could consider removing the theme editor’s UI entirely. I don’t know if it makes sense anymore to have it there. Maybe some people still would still need it from time to time, but is it something that the user should be exposed then by default? That’s I think a question that could be discussed.

Birgit Pauli-Haack: Yeah I think so. You’re right.

Grzegorz Ziolkowski: Could be left somewhere, but probably you need to know what to do and finding in one place or when you know the link. And the other things that maybe the only reason why we should keep that exposed is for the CSS code. Maybe at this time, when not everything is covert with global styles. There are some reasons for people to use that.

Birgit Pauli-Haack: Yeah. It’s a similar case with the customizer. Yeah. When you have a Full Site Editing theme, a block by theme, the customizer itself, link in the appearance menu disappears, but the customizer is still available through the theme card on the theme screen. So you could still use the customizer if there’s something in there that a plugin put in there that the theme doesn’t have a control yet for it. And that could be a similar way to do, okay a Full-Site Editing theme is a block theme, is active. Yeah. Let’s remove the theme editor for that part and see what happens and just let the functionality be in there, but not have it in the menu. I think that will be valid to have that discussion. Yes. All right. 

Yeah, and then the next one of Full-Site Editing Enhancement is the Search. Control Component that you can have inside the navigation menu. I really like that. It could use a few more controls to adjust the size of it a bit in relation to the other items in the navigation menu. But that is certainly fixable in a later version, but just having it there, it really helpful.

Grzegorz Ziolkowski: Yeah. This navigation block becomes so powerful, there are so many options. And I really like how it evolves over time also, how it becomes easier to use with every release. It came a really long way from the beginning.

Birgit Pauli-Haack: Yeah.

Riad Benguella: And the challenge always with these powerful features is to find the balance between the good user experience, and also continue adding features without deteriorating the simplicity of the block. So, yeah I think we will continue to iterate on these things until we find the right balance there.

Birgit Pauli-Haack: Yeah. I think the other balance is also to strike, what do we want as feature parity to the previous version or the previous way of doing menus? Because there were quite a few extenders who extended the menu controls through plugins and themes and all that. I’m not sure that they all have been tested and kind of migrated over. I think there’s still some experience and some learning to be done, but is there a way to do it differently?

Yeah. Well, and then we have duo tone component there was only one change in the description that the underlying image that is to which the duo tone is applied is not changed. I think that’s a very important distinction because people always fear that something changes that they don’t have any control over and there was something else in duo tone.

Oh yeah. The duo tone now is using transparency as well. So you could have a background and a duo tone and transparency and have the background shine through. So it’s multiple layers of features that you can put on top of it, and I will share in the show notes, a video that Anne McCarthy did to kind of show you how this all works together. And she has some very neat representation of some of her photos now with the different duo tones there. Yeah, you have to see it to actually appreciate it really and not get confused about things, but I really love it. Duo tone. It’s almost like gradients and I love gradients. You could do now gradients in duo tone with transparency, background on cover. So yeah, what else can you need?

Riad Benguella: There’s so many customization control now available on the plugin and the contributors keep adding more and more. And I think it’s an infinite work. You can open your imagination and just make it happen.

Birgit Pauli-Haack: Yeah. Riad in 10 years we will still talk about gradients and where we can apply it. Yeah, no, absolutely. Yeah.

Grzegorz Ziolkowski: And there is now also a change to the tools panel, which is related mostly to the setting sidebar. So the thing that change is the type of section. So in the past, you would have a list of controls displayed at once. Now, you have better control over what’s displayed by default and you can enable more controls or hide some of them when you stop using them. It’s very similar to the dimension panel. That’s already in the plugin for quite a while. And the direction is just to give the same capabilities to all sections. So they work the same way. Yeah. 

Birgit Pauli-Haack: This change also use a, a little bit that you can actually have multiple columns in the theme, in the typography controls, when they’re just small controls, you get two next to each other, and that certainly saves you some real estate or some spool on up and down on that. And, and I like it. It has a more harmonious layout there. So like that. Yeah. 

Riad Benguella: The idea with these tools panels is that we should unify how blocks show their different customization option on the sidebar. So typography uses the tools panel color U could use the tools panel. I think there is another one dimensions could use the tools panel. So that way, no matter the block you are using, you could SU similar things on the, on this side. And if you find it too overwhelming, you could show and hide the controls you want.

Birgit Pauli-Haack: It’s awesome. Yeah. Yeah. It kind of goes a little bit towards what, what we have been discussing on the developer advocacy relations team that can we have some best practices on yeah. If somebody builds a custom block yeah. Best practices on how to distinguish between the side settings and the toolbar settings and all that. I think it’s, it’s time to kind of put some of those best practices in writing. So of people can look it up and I will going to work that’s part of our 2022 kind of plan to figure that out and work with the developers on that. So consistency goes a long way in not having to figure out this for every single block or for every single type of block. How is a car applied cred and applied and all that. Yeah.

Grzegorz Ziolkowski: In this case, we are following what Riad did for the block toolbar. So he created groups like for block, for formatting controls and so on. And here we will have also those extension points for dimension colors, typographic easy. You know, it’s not still setting stone, how it’ll end up. So we don’t want to spoil the game and like introduce any hustle to the community. But once everything is ready, then we’ll definitely come up with some recommendations that we share with the community. Awesome.

Birgit Pauli-Haack: So the template editor has as a template part focus mode. Now that means that you can separately change the header or the footer in your site editor. There’s also a post available on the make blog/core about those editor improvements and the template part focus mode that you now can use to, when you look in the site editor, you have always the full page, but if you just want to isolate the header and just look at that, you can switch over to the template part focus mode.

Riad Benguella: The next thing is, if you are building a theme, whether it’s classic or block theme and using theme JSON, there is a small change that you could apply to your theme JSON. So for consistency, we removed some custom prefixes from some settings like custom line height, custom margin and custom filing, I think. So you could move to theme JSON version two and remove these prefixes that way you’re on the last version.

Grzegorz Ziolkowski: So to do that, you need in your team, JSON, at a new field called, version. Oh, it’s not in new field, but you need to set version to number two. And that basically enables this new updated APIs.

Birgit Pauli-Haack: Yeah. And I know that there were quite a few efforts around the development team to put actually a schema up on schema store and have also the link via.webpress.org. And are those schema already updated to the version two? Do we know?

Grzegorz Ziolkowski: Oh, thank you for reminding about that yet. It’s done. It’s ready for both block JSON and theme JSON it’s now in WordPress domain and the new member, the URL, we will show that later in the show notes. And yes, it’s already the old one that you could use will still work because the schema in the schema store it has a very interesting configuration. So it’s now referencing the new URL, so whatever use it will work anyway. And as we found out, someone pointed that out, I don’t remember but anyway, even if you don’t provide the dollar schema field, most of the editors will be able to recognize that based on the name of the file and they will show you hints anyway. So you only need probably to do that for visual studio code explicitly.

Birgit Pauli-Haack: Mm. Yeah. That’s interesting to know there’s some learning to be on the editor. So, oh you use it once I know where that was. See here. Yeah, I excellent. Speaking of gradients, now you can show all the colors on the gradient origin in the different panels. So there’s a new panel when you do site editing and color configuration, and it has the core color palette, the themed color palette. And if a user creates their own color palette, it will show there too.

It’s a little bit crowded and I know there’s also an issue posted to find a way to actually remove the core color palette because it has so many colors and when people use it some team developers or agencies definitely would want to remove that. But it’s a nicer interface, but it has the text color 1, 2, 3 core theme and user. And then it has the background color in core theme and user colors. And then it has the link colors as well. If it, theme JSON says, please use the link color scheme as well, and then it will go in there as well. And it’s interesting to see. So I’m looking forward to the user feedback that we are going to get there to adjust an next iteration now.

Riad Benguella: So one of the original reasons for this feature, why do we introduce these different pallets core theme and user is, if you think about patterns, we have now a directory for patterns and theme could provide patterns and we wanted to have some color in these patterns, right? And so how can we make sure that these patterns work across themes, if teams change their own palette, it becomes harder. So the idea is to allow themes to still rely on core palettes, and pattern to still rely on core palettes. So for example, when you build a palette, you should probably only use core colors that way it works across themes, if you want to publish it to the pattern directory. And yeah, in terms of UI, it’s kind of crowded right now, especially in the post editor.

But I think the idea is that it should get closer and closer to how it looks in the global style bar, which is kind of nested navigation. So the idea is that it should look like the global styles view of colors. So you will see at the high level button to go to the link color, another one to go to the button background and another one to go to the text color. And they are not shown every time, all the colors at the same time. So that way it’s less crowded and it allows you to navigate more efficiently. Yeah.

Birgit Pauli-Haack: Yeah. And I can and see, that’s a very good reason to have the block parents be consistent, not so much depending on the theme color scheme, but so it shows up as you see it in the preview. And I can also see to just switch off the core colors in the user interface, so the pattern comes over, but the user can only use the theme and their own color to modify it and not have the core colors as well. Because the core colors always show up on other places when it’s not a pattern from the repository and using those core colors on other things that might not be wanted by the site owner or the theme author. Yeah.

Riad Benguella: Yeah. Theme authors and agencies also want to control these things more strictly. So yeah there is, they is some work in progress to allow actually to remove the core powers entirely. And yeah it’s going to be sitting in team JSON and you just enable it and it’s gone.

Birgit Pauli-Haack:  Awesome. It’s all so well thought through. Excellent.

Grzegorz Ziolkowski: And there is now also change for the typographic block support. So because we had this change, we discussed about the block tools feature. So now most of the typography controls were added to the existing text blocks, like heading, paragraph and so on. And there are also some default controls enabled for them. So you just go and check those blocks and see how many new options are there now.

Birgit Pauli-Haack: Yeah. It’s a great variety there. Yes, indeed. 

Riad Benguella: The next change is another change that is meant to be for WordPress 5.9. So now that global styles are actually the landing in WordPress 5.9, and even the UI, some plugin developers and then some team developers need some API to access these settings and access these styles. If they want to adapt their code. For example, to check whether there’s a global layout or to retrieve whether I don’t know, there’s a color palette or anything, basically any settings in or style in the global style. So a new idea has been introduced, it allows you to retrieve these settings pretty easily in just a function call. You don’t have to go check directly in the theme JSON file or the user settings or anything, you just get the current value. That’s pretty handy, another also global style related API that landed pretty recently is actually arrest API to retrieve modified global styles and also the base global styles for the active team. So this could be pretty handy for plug-in and team authors.

APIs

Grzegorz Ziolkowski: And regarding the API functions that were introduced, they are called get_global_settings, get global_styles and get global_style sheet. So pretty easy to remember and expect a dev note published in a few weeks.

Birgit Pauli-Haack: Excellent. Yeah, I think that was the missing piece that we got quite a few questions about in the community. So having that public API available is now so much better. So believe it or not, we’re still talking about enhancements and new features. 

Bug Fixes

Now we, I think there were about 80 or so in them, 73 and we didn’t talk about all of them, but the bug fixes also are 73 bug fixes in this release. And some of them are very granular and in the back end of it. But the one that stood out for me was that for the blocks, it fixes the relative URLs for the inline styles. So if you had a style sheet with a background color or a background image and the URL if it wasn’t an absolute URL but only relative like ../ it wouldn’t find that anymore, and that has been fixed. So quite a few developers will say finally!

Grzegorz Ziolkowski: They should still exist in WordPress 5.8. And yeah, this is something we missed because it only happens for the custom blocks and only when you opt in for the option to use those in line styles.

Birgit Pauli-Haack: Good. So wasn’t all that big. Okay. So are there any other bug fixes that you wanted to mention here, Grzegorz or Riad?

Grzegorz Ziolkowski: No, it’s like bugs you wanted to forget about them. You don’t want to speak.

Birgit Pauli-Haack: Well, sometimes I find it interesting to, oh yeah that’s a bug from 2018, we finally fixed it. But I haven’t seen any of those here. So yeah, do you want to go to the next section and talk about performance Riad?

Performance

Riad Benguella: Let’s speak about performance actually. Pretty interesting subject and I enjoy working on performance a lot. So on the editor theme, we have this metrics we keep track of over time, the loading time, the typing time and we keep adding new metrics every time. And the interesting one that was worked on during this release was the list view. We added a new metric to measure how the editor performs while the list view is open. And the list view is pretty powerful to navigate the editor, but since it shows a long list of blocks, it can create some performance issues sometimes. So a new technique has been used during this release. It’s called windowing techniques for the technical folks listening to us. Basically it means the list that is currently visible is rendered, but all the remaining items on the list are actually hidden and not rendered at all. Unless you scroll the list and show them. Historically we’ve been avoiding this kind of solutions because they could have some accessibility issues and also it is very hard to get right. But thanks to the work of contributors, I think Carrie worked this a lot, we now have a solution that we think works pretty well and doesn’t introduce any accessibility problems. So now they invite you to test this and if there are any issues, please let us know.

Birgit Pauli-Haack: So well, thank you. And yes, indeed. The list view is one of the most powerful tools that would come revamped WordPress 5.9, but going back to performance, I know that you all also had this check and we talked about it on the show before, where you had, 30,000 blocks in a post to kind of see the performance of it and measure it from between the different versions. How many blocks do you have in the list view to test this?

Riad Benguella: Oh, we use the exact same post, which I think it’s a thousand blocks or something like that. It’s a very long post. You can find it on the Gutenberg repository. You can search for large post @HTML. And it’s actually executed automatically in the CI. And every time we check the numbers. And on each release post, you can go to the bottom of the post and you see there’s a table that is there that compares the current release with the previous release and also the current release with the previous WordPress release, so that’s how we keep track of these things. We also have a separate website, which I think at the moment is not working, but I promise I’ll fix it very soon where you see the evolution of the different metrics over time for each actual comment. So that way we can pretty easily find the exact comments, the introduced performance regressions.

Grzegorz Ziolkowski: Yeah, I saw yesterday that was going back in time and checking the performance for WordPress 5.6 and other major releases, and maybe do you have those results? Because I was pretty excited hearing how it changes.

Riad Benguella: Yeah I do have results. I think loading time improved quite a bit from WordPress 5.7 And to WordPress 5.8, and in WordPress 5.9, it improved a little bit as well, 200 milliseconds or 300 milliseconds out of 3.5 seconds. The typing time also improved, by 20% or something from WordPress 5.8 and WordPress 5.9.

The other metric that improved a lot between these two versions is inserter opening. We did a lot of work there. And now when you opened the inserter, it is actually quite snappy compared to how it was in the previous version. There is also another one, so the only metric that I think we need to work on a little bit more for this release is block selection. We lost 10% time on it, but I think we can improve this one and do better there. And for the inserter it’s actually quite impressive because at some point in the inserter, we had collapsible panels. So we didn’t show a lot of things at the same time when you open the inserter and there’s collapsible panels, it should open quick, right? And now we show everything at once. So there’s a lot of things, but we still manage to make it fast. So I’m pretty proud of about it.

Birgit Pauli-Haack: That’s impressive. Yes. Yeah, because now we have the inserter we don’t only have the core blocks, but we also have the theme blocks in there. And then also block patterns, a tab and then another reusable block tab. Yeah. Your website, Riad, I think you shared the link at one point maybe two or three months ago. And you also did performance testing with plugins. Is that a different project or is that pretty much the same kind of performance?

Riad Benguella: Yeah. So what I did is I was curious to check actually if I enable plugin or not, how it impacts the editor’s performance. So I actually use the exact same metrics. We have these coded up in the plugin, so I can just run the test, enable the plugin, change the plugin and run the test again, right? And then compare the numbers.

Actually, I also spend some time with some plugin authors, because in the initial run I had some issues there and I saw some plugins impacted a lot, and I was very happy to see that they were all pretty receptive and we did some work together. And in the end, I will say the major plugins right now are doing good enough. I think that we can always do better, but we are doing good enough. And I actually encourage plugin authors to check the post if they didn’t see it, because there are their instructions to check their own plugins, to see how their own plugin impacts the editor performance. Because sometimes we get reports that the editor is very slow and I cannot choose the editor or whatever when I type it’s very slow. And sometimes we cannot do anything about it. So we have to check all the possible reasons that could cause this and plug ins can be a reason. So it’s important for both plug in authors and users to be aware of it.

Birgit Pauli-Haack: Wow. That’s good to know. I think I will come back to you and kind of talk about this, or at least get all the information for the show notes, but also maybe have a block post about it. That’s a little bit more prominent, because now more and more people are going to use or come on board with adopting Gutenberg and having that resource available is really, really helpful. All right. Well, thank you, Riad, for that little excursion into performance.

Riad Benguella: Thanks I’m always happy to dive there. It’s my personal favorite feature or favorite topic.

Birgit Pauli-Haack: Aspect, yeah.

Riad Benguella: …Topic, I would say favorite topic.

Documentation

Birgit Pauli-Haack: Yeah. So now we are at the documentation section of the changelog and there were two things that stood out amongst typo changes and improving landing pages and all that one was the block schema and documentation has changed or not has changed particularly, but it’s better documented in terms of the block JSON. And that’s the follows the same process as the theme JSON does. Right. Is that what I’m saying, Grzegorz?

Grzegorz Ziolkowski: Yeah. So the view is a new API option in block, JSON, that will allow authors to provide Java script code. That’s going to be executed only in the front and only when the block is rendered there, so it’s pretty handy thing. And the other change is, because we are preparing to WordPress 5.9. So both features are for the upcoming major WordPress release is that there will be possibility to define more than one style sheet. And the reason for that is twofold. First, sometimes there are some styles that block author would like to apply to more than one block. So this is a way to share them through using style handle. And the other reason is that plugging out, they also want to add their own styles in a batch mode. So instead of doing their own magic, they can just use the existing APIs and inject that to all the blocks they want.

Birgit Pauli-Haack: I like that instead your own magic, use core magic. Yeah, excellent. Well, thanks for letting us know. So there are some features, of course, the theme JSON documentation has been updated with missing settings and styles that is also in preparation of 5.9 and the version change there.

Grzegorz Ziolkowski: I think that there was link added for ways to keep up with Gutenberg and Full-Site Editing. I suspect that the link is to your resources that you keep up to date.

Birgit Pauli-Haack: Keeping up with Gutenberg, yeah.

Grzegorz Ziolkowski: Yes. So that’s great to see it finally happening because it’s the best page to look at.

Birgit Pauli-Haack: And if you are listening to the show and don’t know what Grzegorz is talking about, in the handbook on core on the make block on the references, there is a page called Keeping up with Gutenberg and it’s an index page with all the block posts from the teams that work on Gutenberg in chronological order. So it starts from the newest to the oldest, but it’s per year. So we started that 2020 in June.

So the last half of 2020 is in the 2020 page. And this year, November, we are coming up to the end of the year, so we have all the editor meetings, what the theme team does, the design team also, publishers, the tests and the summary of the tests from the FSE program and all the other related posts. I started that because the core make block, within a day or two, you have to scroll to the third or fourth page to find something that was published yesterday. And it was really interesting to do that. So keeping up with Gutenberg index, you can actually Google that now, keeping up with Gutenberg and it comes up first. All right, so is there anything else in the changelog? Oh yeah, we have on the tool sections, we have some FSE backboard and core.

Tools

Riad Benguella: Yeah. That another kind of magic. Basically on each WordPress release, we need to backboard all the changes that are on the Gutenberg plugin and include them into core. Maybe a lot of people don’t know that’s a lot of work and that’s a lot of invisible work. We do that in two separate ways. Basically the JavaScript changes are more automatic. So we do a package NP and package release, and then we include them in core, but we also need to check all the PHP changes that happened in the work Gutenberg plugin and move them into core. And sometimes when we do that, some problems happen. For example, a function that exists in the Gutenberg plugin can exist at the same time on core. So at, on this small period of time, we need to make some adaptation, both code based, to ensure they work together. So a lot of changes on this Gutenberg release are related to that. Yeah I want to send kudos to Robert, the editor tech lead for this release. He did an awesome job to make sure everyone is on the same page and works to make sure all the changes are on WordPress trunk at the right moment.

Birgit Pauli-Haack: Excellent. Yeah. All right. So I think unless…

Code Quality

Grzegorz Ziolkowski: Something, yeah. I have something in the code quality section, it has 25 items. So that’s great that we still remember about that aspect of work in the lights of the upcoming release and all the work caused by that. So there is new API endpoint it looks like is going to be included in the WordPress core, is it right? So this one is called the WP block V1 URL/details. This one is for the link previews. So this one is getting stable, also plugin authors will be able use to do whatever they need with that.

Riad Benguella: Indeed, that could be useful to show previews or get more information about URLs and exploit that in very different ways for plugin authors.

Birgit Pauli-Haack: Yeah. That feature is such a small feature when you think about it, but it has so much power that it could definitely be explored quite a bit for plugin authors and even do a list of all this week’s links and then collect them all, might be a good use case. 

What’s in Active Development or Discussed

All right yeah, so that’s pretty much it with our Gutenberg changelog this week. Thank you Riad and Grzegorz who get us through it. I think I have only one thing… So where is WordPress 5.9 now headed? What are the next steps?

Riad Benguella: I think as we mentioned to tomorrow is November 16. So it’s the release of WordPress 5.9 beta 1. I think that’s the best time for people to test. So I’m asking everyone just code, download WordPress 5.9. It is the start of a new with Full Site Editing and block teams and all global styles and all navigation on all these features. So go grab your coffee and start a block team and just try things and try to break it and just tell us what goes wrong. And we have a number of weeks to fix all the bug fixes, and we’re looking forward to your feedback on that.

Birgit Pauli-Haack: Excellent. Yeah. I just also want to point out there is a WordPress beta test plugin in the repository, so you don’t have to install all that. So you just make it a normal WordPress install and then install the plugin for WordPress beta tester plugin, and the stream would be the point release instead of the daily trunk. But if you are brave, you could also do the daily trunk. There are core committers who actually have run trunk on their personal blogs. They’re quite brave in doing that. So yeah, beta 1 is tomorrow, November 16th, and then a week later, supposedly beta 2, the first release candidate is scheduled. And of course, that all depends on what the test was bringing all back to us or to the team.

Release candidate, we know sometimes there’s beta 3 and beta 4, depending on how that all works, but then there’s a release candidate. One is scheduled for November 30th, and that’s also the date where the field guide with the dev notes come out and where the about page is done, and also the release post is draft and there’s a hard string freeze, means there is no bug fixing anymore. And there’s not a whole lot that can go in there in a release candidate after release candidate is available. And then there will be a dry run for the releasing workers, 5.9 in the 24 hour code freeze December 13th. But if you want to be part of the release party, that’s going to happen December 14th in the slack channel of core.

Riad Benguella: And it’s something else I wanted to mention about WordPress 5.9 Is the dev notes. So after beta one, you can expect a list of dev notes on the make core and if you are a plugin author or an agency or WordPress developer app, update your code accordingly, if there are changes and also use the new APIs.

Birgit Pauli-Haack: Wonderful, thank you for a reminder of that.

Grzegorz Ziolkowski: You can also subscribe to the Gutenberg changelog newsletter and get the list with all the links directly from Birgit.

Birgit Pauli-Haack: Thank you for making a pitch on the Gutenberg Times again. That’s awesome. And if you need instructions on how to test Full-Site Editing, so Anne McCarthy published a test call for the Full-Site Editing outreach program. That’s for the non-techy people who are using site builder or page builders to build sites for others. And it’s called the site editing safari, and you get different scenarios that you can follow along with instructions on how to test this because…

Grzegorz Ziolkowski: Also with zebras, giraffes and elephants.

Riad Benguella: What about Chrome and Firefox? Is this just a safari?

Birgit Pauli-Haack: Good point? No, safari is like the African safari with the giraffes and the rhinos and everything. So one scenario is personalize your homepage and setting your styles. Add some button patterns and use some of the layout controls for that, one set of instructions also is how to add a dual filter and the single post template. Those test instructions are actually also quite nicely to use for exploring the new interface on a more scripted schedule. So you don’t have to come up with ideas on how to test it. So you just use those and it really helps if you would comment on that post on the test block by November 30th. And then what normally happens is after a week or so, the feedback comes in and then Anne writes a summary for the developers working on it so they can see what else then to be changed, or she also puts issues together for the GitHub repository of a box coming out.

Grzegorz Ziolkowski: I also want to mention one more thing. So the release date, December 14, it reminded me that it’s also the day when the state of the word 2021 will be by the WordPress projects co-founder Matt Mullenweg.

Birgit Pauli-Haack: Excellent. Yes, yes. And that is scheduled for, I think it’s noon Eastern, which is dinner time in central Europe.

Grzegorz Ziolkowski: Yeah. So it’s 10:00 AM between 10:00 AM and 2:12 PM Eastern time and 5:00 PM UTC, which means at my place, it would be 6:00 PM Central European Time.

Birgit Pauli-Haack: Excellent. I’m glad we got it all in. Yes. And so on the webpress.org/news, there is actually a call for of questions because the state of the word is normally about 45 minutes when Matt Mullenweg walks us through the last year and what’s coming up in the next year and then the next 30 minutes or so will be answering questions from the community. And there is some instructions on the webpress.org/newspost instructions, you can send them via a video and how to get them to the people who help prepare for the state of the word.

All right, with that, that’s a very good time to end it. If you like our shows, help us spreading the word by adding a review to your favorite podcast directory. If you have news or suggestions or questions sent them to [email protected] via email [email protected] and you can always also reach us via Twitter. So my Twitter handle is at B-P-H. Grzegorz is G-Z-I-O-L-O. And then Riad’s Twitter handle is Riad Benguella. And we will of course share that all in the show notes. So it was wonderful to have you both here. Thank you, Riad for joining us. How do you feel about it?

Riad Benguella: Thank you. I really enjoyed the show and thank you for having me and please do continue to spread the Gutenberg word.

Birgit Pauli-Haack: All right. Will do. Will Do.

Grzegorz Ziolkowski: That was fun. Yeah, to have fun to have Riad on the shows like.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: Probably that was the best I show ever. We had so much fun together.

Birgit Pauli-Haack: Yeah, we did. All right. Okay. Well, let’s just get out of here for more fun. Thank you all for listening. Thank you for joining us. And I say goodbye until the next time.