Gutenberg Changelog #25 – Gutenberg 8.6, Block Patterns in WordPress 5.5 and Active Development

In this episode, Birgit Pauli-Haack and Mark Uraine discuss Gutenberg 8.6, Block Patterns for WordPress 5.5, active development and a Live Q&A Announcement.

APIs

We also have three new APIs. One as we mentioned, disabling core block patterns, and one is to make the line height and custom units theme support flags consistent and opt in. The paragraph got some, not only the paragraph, but that’s where I saw it most or often enough, is that the line height controls in there, that’s new. And now we have theme can now tap into that. And the third new API is having the ability for a plugin to disable the image editor in the block editor. It was a new feature, and of course with every new feature also comes the new feature request, “How can I disable it?” And here it is, there is the API. Read up on that.

Mark Uraine: Wow, that’s so funny. We introduce a feature and we get a feature request how to disable it. Oh, goodness.

Experiments 

Okay. So that, Birgit, that brings us to the experiments. There are about 10 experiments that went into this release grouped into mainly two categories, but you have the site editor, which we’re calling the whole full-site editing experience, right? And so there’s been some updates there, integrating the quick insert or in between, in the canvas post date block, adding style attributes and changing references to the section back to template part. So if you remember, there’s a whole conversation around what do we call these global pieces, like a header and a footer? And so we had changed calling them sections at one time. Now we’ve come back to calling them template parts. We’ll see how it goes.

Birgit Pauli-Haack: That’s one of the things when you land on a 50/50 decision, yeah? It kind of goes for three months, it goes this way, and then three months goes the other way, and you compare whatever happened with it.

Mark Uraine: And then there were a lot of, also a lot of experiments, updates added to the navigation screen and the blocks. I know there, recently, maybe it’s one of these that was added in here. The navigation screen or the widget screen, I think, was being looked at as a way for a theme to enable it right now. So if you have a theme, you need to add support for it. And this way we were hoping to get a little more testing involved with the screens that are coming out that include blocks, and that was kind of a one solution to try to do this. But with the navigation screen and the blocks, it was like restoring block movers, adding error boundaries, show block appenders by default, really trying to get that UI dialed in better.

And the last experiment that wasn’t included in those two blocks was one called, one that was fixing the inserter on the widget screen. So if you tried out the widget screen lately, there’s some improvements there happening.

Bug Fixes

And that takes us to bug fixes. About 40 bug fixes went into this release, several of these being accessibility related, which is a really great addition here. I think I count about five right here that say accessibility next to them about persist, tooltips on hover, fixed toolbar, arrow key navigation, and right to left content, restoring the Aria multi-line in the rich text editor, and another one, fix the copy block button focus loss, and try to remove the visually hidden text area. So, and something about radio controls as well for accessibility.

There were some of the other ones included block patterns, override the patterns that were registered by core, which we talked about. Fixed blocks dropping to incorrect positions and inner block lists.

Birgit Pauli-Haack: Very helpful.

Mark Uraine: Yeah. And preventing content loss after refreshing an editor with unsaved auto draft posts. This was kind of a big one. Someone I know kind of happened to do this and really brought this to our attention. And so I’m so glad to see we got that fix in right away.

Birgit Pauli-Haack: Yeah. I was … I stumbled over that quite a bit, but I could never nail down which part I was actually, or could test it consistently, which part I was losing or when, what the situation was. So I’m glad somebody figured that out and fixed it so I don’t have to worry about. What I did was I, once in a while, when I saw, okay, my site is acting really weird, I went into the code editor, copy-pasted everything from that post, and then put it in a text file so I could get it back again if I would lose it. Yeah.

Mark Uraine: That is scary. You know, especially if you’re typing a whole lot of stuff in there, that you don’t want to lose that. I’ve had it happen several times where I can see in the corner of my eye in the top bar that it saves, it says it saves, and then I don’t do anything, but I look back and it says to save again, right? Like to interact with the save button and save it. And so I’m not sure, like, okay, I thought it auto saved already, but maybe it missed something and I still have to save it?

Birgit Pauli-Haack: Yep. There was also, there’s also, or was also a hiccup where it would save, but not the metadata from the sidebar, on the auto-save. That was also something, but that was fixed three or four versions ago. I recognize that. So this happened to me that I lost something when from one day to the next, I kept the post open and was just editing again. It would not save the new thing because I lost my session, but it would not come up with the screen to log in again and kind of pick it up. So I knew that, that I can’t do that from one day to the next, but yeah. So that’s, yeah, it’s really hard sometimes.

Mark Uraine: So a few other bugs included fixing the drag and drop to empty block lists, fixing the drag and drop for aligned blocks, sidebar controls. So there’s more space now for German and other locales. That’s great.

There is button property handle border radius resets. So this one’s, yeah, this one was an interesting one I was stumbling across, too, is the border radius on buttons wasn’t, I guess in this case for this particular bug, wasn’t resetting, but it’s also not defaulting with the correct border radius that should be there as well. I was coming across, but finally, the last bug worth mentioning here … well, they’re all worth mentioning, but in the timeframe that we have. Block directory and removing content admin messaging, so….

Birgit Pauli-Haack: That’s when an editor doesn’t have access to the plugins, they had the message, “No other blocks found. Please contact your admin,” to open that up. But the admin obviously has already decided that that person doesn’t have plugin capabilities. So removing that is definitely a good decision.

Performance

So we are coming to the section of poor performance, and there were six items that made it as performance improving. And one of them was the cover site editor loading time to be included in the performance testing. And then one was to avoid the re-rendering of a post saved state component for each change. So it would load again and again, even if you only did small changes, and that certainly affected the performance of the app.

And then there were two performance enhancements for the development environment, to not install all that expensive scripts or downloads, only when it’s required and not just have a blanket download from all those scripts that could be in there to have them there. And then that improved definitely the installed performance of the WordPress development environment.

I put the benchmark here to look at. So from WordPress 5.4 to Gutenberg 8.6, the loading time decreased by roughly five seconds and that’s, or four seconds, and that’s really good.

Mark Uraine: Yeah.

Birgit Pauli-Haack: Yeah. The key press event is probably not that noticeable because that’s in microseconds. So, but it went also down from 54 microseconds to 35. And if we haven’t talked about it yet, the benchmark for that is actually using a sizable post, which is the understatement of the year because that post has 36,000 words in it and a thousand blocks, and that’s used for these performance benchmark tests. It’s really, it’s not a representative post, but it’s really a big post. It’s almost a book in the Gutenberg. That’s a Gutenberg book. Bible. So yeah, that’s where those benchmark data comes all up, are created.

Documentation

And then we have 17 documentation items and updates. I’m going to pick a few of them. So they expanded and updated the block-based theme documentation. That’s very important for theme developers that want to get started there to have accurate documentation there.

They also removed the experimental flag from, you guessed it, the block pattern documentation, because it will come into core, so it’s not experimental at all anymore.

Mark Uraine: Right.

Birgit Pauli-Haack: Yeah. And then they added basic documentation for the toolbar button component. And we see this quite a bit that there are questions about, “How do I get a button into the toolbar, an additional button?” Because a lot of plugin developers did this for the classic editor. They just added a button, either on the toolbar or above. How can you do this on the block editor? And the basic documentation for that is now available.

Anne McCarthy created a page listing all the Gutenberg releases in relation to each WordPress version. That was something that a lot of people asked about and now it’s there, and I’m going to single that out for, normally we don’t put all the changelog items into the show notes. We just have the release notes from the team in there, but I will single that out so people can actually look at it and find it easily.

Mark Uraine: That’s a good idea.

Birgit Pauli-Haack: Another documentation item is clarify interactive mode for the create block. That’s the scaffolding tool create block. Greg, who is now in vacation, it’s too short of a word. He’s in hiatus. He’s coming back in October, but the documentation team developed a documentation, moved the ESNext to a JavaScript tutorial, and moved the dev environment into its own section of the documentation.

And they updated, and another big item or important item was updated, the nested blocks, inner blocks documentation. There were quite a few changes since the beginning of, nested blocks were always in Gutenberg, but it changed how it behaved throughout the various versions. Now they updated it, which is a very good thing.

And then they updated the block registration, and then also link to the theme experiments report in the block-based team documentation. That’s a small thing, but it’s a big thing because the theme experiments are what you can use to build your first block-based theme and kind of follow along on how the Gutenberg envisions that.

Code Quality

That brings us to the code quality items. There are 11 of them, and they all start with, or almost all start, well, half of them start with the word “refactor.” So there will be changes down the line because they will refactor or have refactored the URL popover. They refactored the disabled component, the more block, the media place holder, the tag cloud block, and the reusable block edit panel. And all good things, but they’re all also things where the UI needed to be adopted. And also most of them are actually refactored to use React Hooks, which is our two-year-old new feature of react framework. And that’s finally stable enough for WordPress to use it.

Wow. Lots of things in there.

Build Tooling

Mark Uraine: Right. They just keep going here too. We’ve got 10 different changes to the build tooling included with Gutenberg. The wp-env can now start without configuration. There’s a support for different options in each environment now. There’s some automation changes, improving the performance tests set up, and fix an action, a GitHub action workflow, a YAML syntax errors. A lot of this, most of the stuff, Birgit, is over my head there.

Birgit Pauli-Haack: Mine, too.

Mark Uraine: I use that wp-env to spin up my local sites all the time. So improvements there. Excellent.

Birgit Pauli-Haack: Good, good. And Leo, we mentioned his article. He has quite a detailed how you use that environment, detailed tutorial on how to use it in that post. It’s really cool.

Mark Uraine: Need to give that a good read through.

Birgit Pauli-Haack: Yeah. The last time I used an official WordPress development environment was Contributor Day, Paris, 2017. So, and it really didn’t go that well. It was still the Vagrant, what’s it called? The VVV kind of thing. Yeah. And so after that, I went to Local by Flywheel and never looked back.

Mark Uraine: Yeah.

Birgit Pauli-Haack: After I read Leo’s post, I said, “Oh, I definitely need to use that because that seems to be even easier than Local.”

Mark Uraine: Yeah. I’ve had a lot of good success with that myself. There are definitely times when I run into little issues, but yeah, we work through it. It’s not bad at all.

Various

So there were also 17 various changes that fall into the various bucket. And we can read through a few of them here today. Embeds, so one regarding embeds, removing unsupported core-embedded/Hulu block. That one kind of made the rounds a little bit. Link control, extract reusable parts. So link control. Did we talk about that yet today? I know we’re going to talk about it a little more, I think, when we get to Sean, so….

Birgit Pauli-Haack: Right.

Mark Uraine: The work that’s been happening, so we’ll get there. But updates, image size to match the columns’ width. This was something that was really interesting we found while we were creating patterns. When you add an image and text to a particular column, they weren’t matching in width. So that’s been updated.

Let’s see, the block navigation changed the visible labels for block navigation to list view. So like when you saw the block navigator or block navigation, these should be changed over to list view now. We felt that that might be a little better way to talk about it, especially in relation to the navigation block, so….

Birgit Pauli-Haack: To not confuse them. Yeah.

Mark Uraine: A little clear. There is a site tagline block. A site title, adding support settings for colors, fonts, and line height on the site title, and in the full-site editing, there’s also an added site logo block. So these are all falling under the various category. And that ends the 8.6 release.

Birgit Pauli-Haack: Wow. Yeah, there were quite a few things in there. We could talk all night. 

What’s Active in Development

So the team is actually working very hard now on the navigation screen and the blocks. And they started regular scrub meetings for the block, as well as the screen. And it’s every Wednesday at 7:00 AM UTC. So if you want to join them or work on that, that’s a good opportunity to get your hands dirty on the navigation screen or the blocks. I guess I will catch up on it on the back scroll because 7:00 AM UTC is 3:00 AM Eastern, but I guess that the whole team kind of liked that time and Andrei Draganescu is driving those efforts forward. So yes, Andrei, go for it.

Mark Uraine: And Zebulan in GitHub shared a lot of the changes they’ve been working on in the core editor meeting this week. One of them particularly is converting to regular blocks button on the reusable blocks block toolbar. So if you have a reusable block and you want to kind of detach it from being a global block, you can, once you add it to your document, you can convert it to regular blocks, which has been a requested item for some time.

Birgit Pauli-Haack: Right? And we use it quite extensively on the documentation team because reusable blocks don’t make it into the translated — what’s it called — the Rosetta sites because there are only reusable in the database of the English version. And so they only see the WP ID, so-and-so kind of comment in there and don’t know what the content is. So we regular, we use them as templates, so to speak, and then convert them to regular blocks so they make it into the other Rosetta sites. Because the translation part that’s coming in phase four is not here yet.

Mark Uraine: Phase four, look out.

Birgit Pauli-Haack: It’s phase four. Yeah. So that’s the workaround that until then. Well, Zebulan, he’s taking up quite a few things concerning the reusable blocks, and I’m really happy that he takes that on to change that up. So the team is also working on an Accordion block?

Mark Uraine: Yes.

Birgit Pauli-Haack: And you added some designs to it.

Mark Uraine: I did, I really wanted to, I like this block concept, so I want to see it moving a little more and thought I’d throw up some designs, and really kind of looked at what everybody was talking about in the discussion and explored about kind of how the group block works. I could kind of see it falling in that arena, and prepared some designs for that. So I’d love to get some feedback so we can move it into a PR.

Birgit Pauli-Haack: Yeah. Awesome. Well, I’m going to look, check it out and have my opinions made heard. Like I always have problems doing that, right?

Mark Uraine: Let’s see, another thing being worked on is the link controls. Adam Zielinski has been contributing to this, and I believe that this one also comes from Shaun Andrews about really editing the link of an image block or a link in the block and utilizing the whole toolbar, the blocks toolbar, as that link input area. It really tightens it up a lot and brings another interaction mode to this block itself, a direct manipulation and interaction modes. And I can really see we’re already looking at ways to bring sort of that idea to other blocks around other things.

Birgit Pauli-Haack: Yeah. That’s an interesting approach. It’s kind of getting away from the dropdown on the link control and just have the URL kind of just pasted into the tool bar there, and still be able to do the other little toggles and switches there. But yeah, I’m going to check that out in terms of what’s coming because for me, the link control is very easy to use because I’m a copy-paste devil. And I never used the link controls, per se. I just use the copy-paste things. 

So when you have a text in your post and you highlight it, and you already have the URL on your clipboard, you just paste it. And the highlighted piece is then all of a sudden the link. Very easy.

Shaun is also working on the sidebar for the full-site editing templates to provide easier access to the templates, which is, that’s cool for the template.

Mark Uraine: Imagine being able to switch templates and switch through pages without having to leave the editor, right?

Birgit Pauli-Haack: Yeah. Yeah. That’s a really necessary actually. Yeah, I really like that approach. 

So we didn’t talk about the block directory. I looked through the rundowns and there’s nothing in there, and I did a whole post on the Gutenberg Times with, I don’t know, 2000 words and a lot of pictures and a lot of blocks on the block directory, which will come into WordPress 5.5. And the meta team is finalizing all the guidelines and all the little pieces of it. There’s a lot of moving parts to it. And there were three teams kind of working on it. So, and four maybe. So design team, plugin team, meta team, block team, yeah, four. So it was really interesting. So I’ll put the link into the show notes so you can read up about it. It has various sections for content editors, for developers and other things. And it also has the ton of resources that you can go back to the meta team and read up about things.

Live Q & A

Speaking of which our next live Q and A, and I already announced it as just a reminder, is on August 6, 2020, with the block directory team with Alex Shiels and Kelly Dwan from the meta team, and “Otto” Samuel Wood, from the plugin review team. And they will answer your questions and talk us through the whole thing. And let us a little bit in on the back of the scene, kind of how this all came to pass. You can register directly from the Gutenberg Times homepage. There is a button there, or you subscribe to our YouTube channel and you will be notified when we go live. It will take place on August 6, 7:00 PM Eastern daylight, or 23:00 UTC.

So that’s it for the show. Do you have any other announcements, Mark?

Mark Uraine: I do not.

Birgit Pauli-Haack: Then as always, the show notes will be published on gutenbergtimes.com/podcast. And if you have questions or suggestions or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com.

Thank you very much for listening. It’s so good to have you. And this is goodbye from me until the next time.

Mark Uraine: Yes. Goodbye, listeners. Thank you so much, Birgit.

Birgit Pauli-Haack: Thank you, always a pleasure. Bye.