Gutenberg Changelog #19 – WordPress 5.4.1 fixes for the Block editor, Gutenberg 8.0 release, and block editor plugins

Birgit Pauli-Haack and Mark Uraine discuss WordPress 5.4.1, back ported fixes for the Block editor, the Gutenberg 8.0 release, the role of themes in a full site editing experience, and some block editor plugins that grabbed their attention.

Birgit Pauli-Haack: And we looked at the release notes for the block editor fixes that were back ported to WordPress core and there were seven of them. But one of them is update search/RSS block render method.

So the PR made a couple of minor changes primarily for consistency and the way theRSS block interpolates its HTML to be consistent with the other blocks. Same with the search. I like that search widget has so much.

Mark Uraine: Oh, really?

Birgit Pauli-Haack: Yeah. Yeah, because I can place it just somewhere on the page and people can use it, in one of my columns. And then it also fixes the latest-post block with the image dimensions. So there was a JavaScript crash caused by the image dimensions area when it was empty and that was fixed, and then only scroll page for multi-selections fixes. Weird scrolling behavior after a block was deleted or, well after a block deletion of selection of list items. It was kind of had some funky behavior there.

Also, preventing typing on a popover from closing the block toolbar. So when you have a text input in a dropdown or popover in the block controls toolbar was then, it was then hidden. Now you couldn’t find the toolbar anymore. So, that was done and fixed now. And then the buttons block margins have been fixed. It was a big one for the content creators and now you can line the buttons up perfectly in your content. The buttons block was new in 5.4. It was a conversion from one button to multiple buttons.

Mark Uraine: Right.

Birgit Pauli-Haack: And that something needed to be fixed there.

Mark Uraine: Yeah. That alignment kind of drove some of us a little bonkers there because we were like, if we add that buttons block centered, but it would be off center a little bit visually.

Birgit Pauli-Haack: Yeah. And sometimes when the alignment is just a little off, it kind of is weird. Yeah, I get that people go bonkers with that when they can’t control it. Yeah.

And then the last fix was when you highlighted a text in a paragraph and use command shift enter, it actually duplicated the block, which was a nice feature, but it didn’t work when you wanted to duplicate it. It was fixed. Now it actually duplicates the block. That’s a short code for when you’re on the toolbar. In the paragraph block, the three dots on the right-hand side on the block toolbar give you more options and one of them is duplicate the block and you get some shortcut there.

So there were also seven security fixes and additional non-editor related updates in 5.4.1, and Justin Tadlock at the WPTavern comprehensively covers all those changes. You’ll find the link to his article in the show notes of this show episode.

Mark Uraine: All right.

Birgit Pauli-Haack: So do you want to start out with….

Mark Uraine: Oh no, you go ahead. Lead us in here. I mean I’m going to have a lot to say, believe you me.

Gutenberg 8.0

Birgit Pauli-Haack: Oh, right, OK. And then this, this week also, Gutenberg 8.0 came out. Again, a lot of work has gone into this release – 130 PRs. That’s pull requests. That’s code changes were merged into the plugin. The new features are not as dramatic as others for other releases, but a lot of people are waiting for, especially for the first one, its subscript and superscript formatting options to the inline text options for paragraphs and yeah, kind of have higher numbers and lower numbers, but that’s the one part that we would love to have also footnotes to go with that, but it’s one step at a time and quite a few people who were waiting for that because they published some of them longer posts, and have additional information that they wanted to subscript or superscript.

And also the block patterns one. That’s a big one. The block patterns were introduced to Gutenberg 7.9 and they showed up in the sidebar as a transitional kind of place for it. It now moved into the inserter to have just one interface to add blocks or block patterns into the content.

Mark Uraine: And that inserter has changed. It’s not just a popover anymore. It’s like a slide out sidebar now. And so, if you click the inserter in the upper left corner there, the whole insert or slides open and all the blocks, they’re no longer in accordians anymore either. They’re all visible right there. But categorized still.

Birgit Pauli-Haack: Yeah.

Mark Uraine: And then you could click the patterns tab and view all the different patterns which were opening up to third parties as well and themes.

Birgit Pauli-Haack: Yeah, it’s awesome. I really liked that. I still have some display issues, but I need to go back and kind of make sure that they are not interferences from other plugins that I’m testing all over the place.

But opening that up to a third party and meaning theme developers as well as putting developers makes for some nice experimentation and what is actually possible with block patterns that right now or in block collections that maybe don’t have to be in block collection. 

So another feature was to improve the layout and usability for the code editor. I looked at the PR and the layout and usability were definitely improved, but it was also very subtle. I think what’s missing is still something like a syntax highlighter or so, but it’s definitely much better, readable because it was also….

Mark Uraine: Yeah, just really kind of widened the space of the editor, the code editor and made the title into a mono-space font. So yeah, some very subtle, very minor changes, but anything we can do to help that code editor I’m all for.

Birgit Pauli-Haack: Yeah. Yeah, and I’m still waiting for my block level shortcut to go to the visual or the code editor of per block. I found myself after I converted from classic editor to Gutenberg, found myself just fixing single blocks and not going through the visual edit from a visual editor to the code editor to scroll through the whole thing. There were only some things in a paragraph or in an image block, but the keyboard shortcuts are not available for that, it’s interesting.

Mark Uraine: That is, that is. I know one of my desires to get the code editor beefed up a little more is to be able to add a block straight from the code editor and it would just kind of add the code version of the block into the code editor.

Birgit Pauli-Haack: Yeah.

Mark Uraine: Yeah.

Enhancements

Birgit Pauli-Haack: That would be great, yeah. So there are a lot of visions for it. Gutenberg 8.0 also has a few enhancements and one of them is, you already mentioned it, the inserter changed and it also now has previews for more blocks. So even if you, the name doesn’t tell you anything and once you hover over it on the right-hand side you see a preview how it could lock, which I really like for some users especially.

Mark Uraine: I agree, you know I’ve been testing out some other site building software out there and it’s always the preview that I’m looking at. I never go, I never just add anything because of an icon or the way it is with text to see the preview before I add it to my page and having more previews for more blocks, it’s just fantastic.

Birgit Pauli-Haack: Yep. We teach the user that previews are there, so there is a kind of a disconnect when all of a sudden blocks don’t have a preview. So I think that’s also a call for the plugin developers to actually create previews for the inserter for the many, many blocks that they put in the plugin.

Another enhancement and it’s kind of coming back to it again, it’s the performance improvement that came with the 8.0, and the make block has the table underneath on the bottom of the screen for the load time. And some of you probably know this already, but the benchmark to measure the performance is a size of a post which contains approximately 36,000 words and in about a thousand blocks, and then it looks at loading times and then the key press event, meaning the typing and WordPress 5.4 the loading time was 9.2 seconds and the key press was 29 milliseconds and then it kind of really increased slightly for Gutenberg 7.9, and then Gutenberg 8.0 it’s now down again to 9.8 seconds and 31.4 milliseconds on the key precedent. So, there’s always a little bit of tweaking and up and downs in the performance, especially when you hit new features.

Mark Uraine: Yeah, that’s something that those developers are watching all the time.

Birgit Pauli-Haack: Yeah, and it makes it a much better experience when you can just start typing and not have to wait till the things load in the background so it’s definitely worth it.

Another enhancement is an updated Welcome Guide illustrations. It’s a much cleaner look and feel, and those new to the block editor will have a better experience there.

Mark Uraine: Yeah, that is cool. We also have a couple of new API changes. A new block context API has been partially implemented, currently limited to block settings and editor APIs. But a PHP API’s will be implemented in the next plugin releases. A few links to some PRS there. 

And then we have some new G2-styled icons for the icon package. I didn’t count how many, but there was a good number of icons that got added in this PR for the WordPress icon package, and they’re great. They’re coming from some other designers that needed some icons for some plugins or some other services that might be helpful for a WordPress. Look how easy that happened, right? They just proposed some really great icons, went through a process and got them merged. It was fantastic.

Birgit Pauli-Haack: Yeah. Now has a receipt icon, product icon, widget icon, shipping icons, payment icons, review icons, just to name a few of them. It’s really cool.

Mark Uraine: That is. So if you’ve got a story you’re doing now, these icons are able to be used by any plugin developers now that can really benefit from these. 

So we have about 29 bug fixes, some fixed margins and styles for buttons, columns, image, media and text blocks. Let’s see, we’ve fixed the selected category on existing latest post blocks.

Birgit Pauli-Haack: Oh, that’s a big one. Sorry, but I kind of just need to….

Mark Uraine: You like that one, huh?

Birgit Pauli-Haack: I like that one because….

Mark Uraine: It’s the latest posts.

Birgit Pauli-Haack: The latest posts block is now really usable, including the featured image. You can switch on, switch on and off to date and all this, how it appears. And you could also select the category for your landing pages and that wouldn’t work yet. So I’m glad that it’s fixed now.

Mark Uraine: Oh, we fixed the overlapping column for embeds. When there was an embed inside of a column in the columns block, it would overlap the other column and there was a problem there. I remember seeing some of these I read and I remember seeing them in GitHub and then I just lose track. I don’t keep track of them. And then here I read them in the changelog. This is pretty humble to just, oh yeah, I remember seeing that and GitHub and it’s done now. Oh, good.

Birgit Pauli-Haack: So in 5.4 there was a new embed coming in there. That was a TikTok.

Mark Uraine: Yeah, that’s right.

Birgit Pauli-Haack: And at WordCamp Miami I was talking about what’s coming in 5.4, and I wanted to show that off and on the front end and work nicely. But in the editor itself, I had three different TikTok videographers kind of represented from my three favorite ones. I’m only looking at three and they were all overlapping. OK. So how that’s going to turn out. But it turned out fine on the front end. But yeah, it was disconcerting.

Mark Uraine: As we mentioned, we fixed the centered buttons, margins, fixed the gradient picker, double-click bug. I wasn’t even aware there was a double-click bug, but I just had to highlight this because it’s the gradient unit.

Birgit Pauli-Haack: Gradient! That’s my cue.

Mark Uraine: And there was a fix for the URL display for scheduled posts, which is really cool. What else did we have, Birgit?

Experiments

Birgit Pauli-Haack: There were some changes on the experiments. About 15 of those. You recall the experience or working on the navigation menu bar page, the toolbar. Then the full site editing, the block directory and the widgets. Those are the four experiments that come with the Gutenberg plugin and you need to switch them on to test them out, but it’s coming along quite nicely, especially the full site editing where now there’s also some cleaning up to be done. 

You can declare a template part blocks now through the block JSON that seems to be the center around everything that’s going to be revolving is a block JSON file where you have all the settings and all the dependencies and yeah. Also, the current theme is in the templates switcher now. There’s a new preview options component available. And it supports the REST API meta queries where full sitee editing experience can now tap into the meta tables to find some of the settings that have been put there by themes or by plugins to make them available through the editing experience.

The block directory has now an additional inserter panel around the block directory results. I’m really looking forward to testing that out. And then the widget had some fixes for the legacy widget Z-index, and there’s also fixed legacy widgets for some visual issues.

There were also quite a few changes for code quality and that’s, it sounds like it’s something very subjective, but when I read through the items, the 15 items that we have there, I’m delighted by the word “remove.”

Mark Uraine: Yeah.

Birgit Pauli-Haack: So remove obsolete editor alignment classes. Theme developers will like that. Remove old icons. We have new ones, so let’s remove the old ones and that’s also implemented the block JSON file for blocks. So there is to avoid or take care of some of the duplication that happens between JavaScript code and PHP code. If it’s all in one JSON file, then both languages can read the same file and you don’t have to duplicate all that. 

Then the latest block is now using the register block type from meta data so you can add them to the latest block. And then some updates on the RSS blog code and then some type script improvements. That’s for the developers. So contributors also find a way around what’s actually current. So I really like that they are working on those calls

Documentation

Mark Uraine: And we have about 12 documentation updates. Some of these include updating the WPE and the docs to reflect current functionality of the package and another one is to extract block transforms into its own handbook page and a few others like update the patterns to reflect user interface instead. One of the problems we saw in the documentation is that we were using the word “patterns” early on, and not in the way that we talk about block patterns today. So kind of updating that word to say user interface instead. 

You’ll see, we created a document for contributing with triage and update the triage MD file to add more clarity and relevant links.

Birgit Pauli-Haack: Yeah, I have found that there are quite a few new contributors that I wanted to start out with triaging tickets.

Mark Uraine: Yeah.

Birgit Pauli-Haack: That’s certainly a great way to get your feet wet and code and also on the issues and kind of figure out OK how to test it, how to make sure that GitHub issues that are filed all actually tested throughout different variations and have enough information for the developers or the designers to act on it as well as have the right labels. That’s a good way to start out.

Mark Uraine: It is.

Birgit Pauli-Haack: So all on top of things in the documentation. We didn’t highlight that here, but there is a glossary documentation in the developers. And Josepha Haden found that the most interesting to actually point out on Twitter that is happening. So I will pull this also into the show notes so people can especially see what’s missing from the terms so we can update that as well.

Mark Uraine: She was pretty thrilled to find that.

Birgit Pauli-Haack: Yeah.

Mark Uraine: I laughed because it’s very, two folders deep in the documentation that we have.

Birgit Pauli-Haack: Yeah.

Mark Uraine: Not something that you could just easily find. But it is there.

Birgit Pauli-Haack: Yeah. So there are a lot of terms in there for developers because that’s where it is. It’s in the developer handbook, and I was wondering what a glossary for end users would look like because it would only be a subset of the words, but it would also have a lot more in there that are coming from the interface. So I think that’s another thing to mull over.

Project Management

Mark Uraine: Right, right. And then we have a project management category this time around. We haven’t had that before yet. Have we?

Birgit Pauli-Haack: No, no, and it’s interesting.

Mark Uraine: It updates the bug report template to help identify the editor version. So, now when you’re recording a bug in GitHub, they’ll be a prompt to ask what version of Gutenberg you’re using, so we can identify which version that the bug writes to. Always good practice to include the version numbers.

Various

And we had several in the Various category again, because no one knows quite where to put these. So we have a Various category. 

These included things like end-to-end tests, update some slugs, WordPress scripts, package. Let’s see.The create block scaffold tool was made to make it easier to provide most popular CLI options. There are some others. One of the other ones to know is the storybook now has add form toggle component in the storybook and some other build tooling improvements and that’s good stuff.

Birgit Pauli-Haack: Yeah, full packed release again. Awesome work that is with all the contributors to it.

Mark Uraine: For sure.

Birgit Pauli-Haack: Yeah. And this gets us to the end of today’s episode. But by the time you listen to this, Mark’s number 51 design update will be published, and we’ll add it to the show notes to make sure you don’t miss it. 

As always, the show notes will be published on Gutenbergtimes.com/podcast and this is the 19th episode. 

If you have questions or suggestions or news you want to want us to include, send them via email to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com.

That’s it for today. Thank you for listening. Goodbye, until the next time.

Mark Uraine: Thank you everybody for listening. Have a good one. Thank you, Birgit.

Birgit Pauli-Haack: Thank you, Mark. Bye.

Mark Uraine: Bye-bye.