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.
Virtual Conferences, Contributor Days and Call for Speakers
- WordCamp Europe will be a free virtual conference with Contributor Day. Get your free tickets
- WordCamp US 2020 organizers just announced that they are preparing a free virtual conference and contributor day as well. Call for Speaker has been extended to May 31, 2020
- Thoughts on Themes by Matias Ventura
- “The Good WordPress Theme” by Vlad Olaru
- Find my Blocks plugin by Eddy Sims
- Movable plugin by Lee Shadle, Blockhandbook.com
- WordPress 5.4.1
- Block Editor bug fixes back ported to WordPress Core.
- WPTavern: WordPress 5.4.1 Addresses 7 Security Issues and Fixes Several Bugs
- Gutenberg 8.0 Release Notes
- WPTavern: Gutenberg 8.0 Merges Block and Pattern Inserter, Adds Inline Formats, and Updates Code Editor
Birgit Pauli-Haack: Hello, and welcome to our 19th episode of the Gutenberg Changelog. In today’s episode, we will talk about WordPress 5.4.1, and the back ported fixes for the Block Editor, the Gutenberg 8.0 release, roles of themes in a full site editing experience and some Block Editor plugins that got our attention. I am Birgit Pauli-Haack, publisher of the Gutenberg Times and I’m here with my co-host Mark Uraine, designer at Automattic, design lead of the Gutenberg Phase 2, and long-time core contributor to WordPress. Hi, Mark, how are you today?
Mark Uraine: Hi, Birgit. I’m doing well today. I finally ran an errand after being quarantined for however many weeks now. And because I was going out, I decided to wear a mask, and let me tell you, masks and beards are not compatible. It was a mess.
Birgit Pauli-Haack: Oh, no.
Mark Uraine: Next time I’m just wearing a bandana. But, how have you been lately?
Birgit Pauli-Haack: Well, I’ve been well. I have been testing gluten-free cookie and cake mixes.
Mark Uraine: Oooh.
Birgit Pauli-Haack: So, for someone who hasn’t baked for many decades, I found great satisfaction in making my own comfort foods.
Mark Uraine: How cool.
Birgit Pauli-Haack: Yeah. Apart from that, it’s all same old, same old. I’m in day 51 or 52, of my stay at home. I’m not sure, is it good news or bad news, but of course Florida opened the beaches this week, so we see how that’s going to work out.
Mark Uraine: Really? OK, well, just for your information, California has just recently closed our beaches. So, we had them open the whole time.
Birgit Pauli-Haack: Oh, right.
Mark Uraine: And now we’re just deciding to close them.
Birgit Pauli-Haack: OK. Yeah, it’s kind of a real interesting time.
Mark Uraine: Right.
WordCamp Europe and WordCamp US
Birgit Pauli-Haack: So, today’s announcement about conferences and virtual conferences, WordCamp Europe will be a virtual conference, if you missed that. The tickets are available now. Contributor Day is actually closed already. They had so many applications that they had to close it because you can only do so many things in a Virtual Contributor Day, but there’s a new chance. WordCamp US just announced that it won’t be organizing an in-person event either in October, and switched to preparing a virtual conference and Contributor Day as well.
And they extended the call for speakers to May 31, 2020, so you’ve got another five weeks, four weeks, to figure out what you want to speak and send it in. Please send it in, because it seems that there have not been a whole lot of applications yet because everybody was kind of figuring out, should I do flight reservations? Should I do hotel reservations, hmm, maybe not. So there’s still some catch-up to do for the program team of WordCamp US.
Birgit Pauli-Haack: Yeah, and I’m looking very much forward to that, as well. I’m kind of learning both topics, it is always very interesting. And Zack Gordon is the host of the conference and it’s actually not a new conference. It’s the third annual, and early listeners of the Gutenberg Changelog podcast might remember that Mark and I were speakers on that conference last year, when we did our first real episode from there. It was really interesting to see, so it’s going to be a little bit of an anniversary back then.
Mark Uraine: Yeah, oh, goodness.
Birgit Pauli-Haack: So we also found some community contributions that we wanted to share with you. Dear listeners, we’re so grateful that you’re here. Matias Ventura, he’s one of the architects of Gutenberg, he put his thoughts on themes in a blog post and answers the question, “What does it mean for themes that blocks allow more design tools to be available to users?”
Thoughts on Themes
The article is also a response to the Vlad Olaru article from Pixelscape “The Good WordPress Theme” from February where he was lamenting that there doesn’t seem to be any more of a shared understanding of what a WordPress theme’s role and responsibility is. So, I can see that there’s some confusion going on, when you think about full site editing that you can change the headers nilly-willy, you can change the footer nilly-willy, you can change some template parts nilly-willy. Those interfaces are all built, and Matias made clear that the aim is not to provide a better and more integrated engine to power, but “the aim is to provide a better and more integrated engine to power the theme experience, not to expose all its inner workings to all people, or will make it easier to ruin our design.”
So it’s more for, right now it’s more about the developer experience and what can be possible, but it’s also about the user who can change a few things, but it’s still about the theme developer, narrowing it down and giving good first impressions for the user.
Mark Uraine: Totally. I’ve had several conversations just this week, Birgit, about how people who were building websites for others, they really liked the ability to lock down certain things so that their users of those websites who are just the content creators kind of, they are going through and making drastic design changes that are kind of ruining the site that they kind of implemented for them, that they built. So, there’s a lot of concern about that. And I think when Matias wrote is pretty good, and helps drive the conversation towards having this unified area in which, that allows for a certain level of control but also doesn’t destroy a theme. There’s a balance there. And if we can really work towards that together, I think would be great.
Birgit Pauli-Haack: Yeah. Yeah. And I just wanted to bring back that those tools are available to ruin our design, they are available to a user site owner right now. Yeah. There’s this edit theme or edit plugins, which a lot of people use. I started doing that until I kind of learned it the hard way, but it’s something that site owners try to find a way to make some changes as well. So it’s nothing new and that will help some consultants to at least have a one particular interface to do these changes and not have it all over the admin screens. Whether you’re what’s a menu? What’s a widget? But to say, I really appreciate that.
Plugins and Blocks
Mark Uraine: That’s a good one. We have another one, Birgit. Let’s see. While reading through the forums this week, I found a user that was asking about installing a block or plugin of blocks on their site, and then they decided they no longer wanted this plugin because another one kind of offered what they have already. And so they wanted to get rid of or uninstall the plugin, but they didn’t know what was going to happen to their blocks. Am I going to lose the blocks? And this person didn’t even know where the blocks were. So like all good people do when you have a question, where do you turn? To Twitter. So I went to Twitter.
Birgit Pauli-Haack: I would say forums but….
Mark Uraine: Yeah, the proper way was to go to the forums, but then me who’s answering the question, I went to Twitter. And so, I asked the question if there were any plugins and Mary came back with a plugin called “Find My Blocks” by Eddy Sims, and this plugin claims to help identify which pages and posts are utilizing which blocks. So you can make that discernment much easier and find out like where you might need to go to double-check on anything, any of the blocks that if you’re uninstalling a plugin, you can check those pages to kind of see what happened to that block. Most likely, if it’s not a dynamic block, it’s really just HTML and it will remain as HTML on your page.
Birgit Pauli-Haack: Yeah, and but that’s, it really depends on the plugin developer, how concerned they are about the site quality when the world does not turn around them and somebody who makes up their mind that they don’t want to switch away the plugin.
Speaking of plugins, Lee Shadle from blockhandbook.com, has published his moveable plugin in the repository, and it lets you drag and drop blocks from the sidebar to your content area. So you don’t have to kind of go to the insert and look for it and then say…you just kind of drag them over from the sidebar, which I find a very interesting concept to start out with. It has probably some scaling issues. How many blocks can you put in the list, and kind of how you find them, but that’s the big question with the insert as well. Yeah.
Mark Uraine: Yeah.
Birgit Pauli-Haack: How you navigate that and get to the places where you want to go.
Mark Uraine: Is that the same plugin that allows you to kind of move the blocks within a tree and it moves the blocks in your page as well? I know he was working on that as well, right, where he had a tree, a block tree in the sidebar, and if you were able to move, drag and drop them within that tree and it would actually adjust them on the trees.
Birgit Pauli-Haack: Yeah. I haven’t tested the plugin yet, but it seems to be that that particular feature is in there as well.
Lee also started a free six-lesson block developer video course on his website, the blockhandbook.com and it teaches you how to build your first block with using the creative block scaffolding tool that was just released. And walks us through a simple recipe block, so it kind of helps you setting up your development environment, how to use the scaffolding and then how to publish that particular block. So it’s for someone who hasn’t started getting your feet wet. It’s definitely something to check out, and it’s free.
Mark Uraine: That’s so cool.
Birgit Pauli-Haack: It’s really cool.
Mark Uraine: Of course, I’m going to take that lesson because I love that stuff. Like I haven’t even used our creative block scaffolding yet. I’ve been meaning to dig into it.
Birgit Pauli-Haack: Yeah, it’s pretty cool. When Craig started it and I was kind of testing it out right away.
Mark Uraine: Yeah.
Birgit Pauli-Haack: Some tips in there. I haven’t had any creative time to actually build some blocks yet in the last six weeks or so. Yeah. Welcome to the fast lane on virtual. Yeah.
So, this week was also release week and not only from Gutenberg, which you, dear listeners know about already, but the WordPress 5.4.1 security release was released on the March 31st so it was a few weeks ago.
Mark Uraine: Yeah, I know. It was just this week.
Birgit Pauli-Haack: This week, yeah. Oh, the 5.4 came out of March 31st.
Mark Uraine: Right.
Birgit Pauli-Haack: But April 29th was the release of 5.4.1, that’s what I was saying.
Mark Uraine: There you go.
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?
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.
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.
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?
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.
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
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.
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.
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.
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.