Gutenberg Changelog #28 – the Block-based Widget Screen, the Query Block, G2 Components and more

In this episode, Birgit Pauli-Haack and Mark Uraine talked about the WordPress 5.5.1 maintenance release, Gutenberg 8.9, Block-based Widget Screens, G2 Components site and much more. 

Sponsored by Pauli Systems

Birgit Pauli-Haack: Hello, and welcome to our 28th episode of the Gutenberg Changelog. In today’s episode, we will talk about the WordPress 5.5.1 maintenance release, the Gutenberg 8.9 plugin release and block-based widget screens, and G2 components site, and so much more. 

I’m Birgit Pauli-Haack curator of the Gutenberg Times and I’m here with my co-host, Mark Uraine, designer at Automattic and core contributor to WordPress. So, how are you this week, Mark?

Mark Uraine: Hey, Birgit. This week has been really good. I’ve completed a lot of design iterations on the widget screen, which I’m sure people will be happy to hear about now that it’s surfaced more prominently and we’ll get into that later. But, I’m also jumping into the query block recently, which is very complex, I’m finding out. Oh, and I’ve ordered new glasses today. So, my old ones broke several weeks ago, and I needed a new prescription and frames and should have them in a couple of weeks.

Birgit Pauli-Haack: All right.

Mark Uraine: How have you been?

Birgit Pauli-Haack: There’s a lot going on in your life.

Mark Uraine: I know.

Birgit Pauli-Haack: Yeah, I did some testing with the release candidate from 8.9 and wrote about the block widget screens. And today I started a reading list for The Gutenberg Times on block patterns. So those who want to jump in, we talked about it on plenty of episodes before. So I collected all the links and put them on a post and will probably have it out tomorrow.

Mark Uraine: How cool. That’s great. Keep communicating that outward.

Birgit Pauli-Haack: So if you ever want to write a review, we would read it here and we will connect with you. And it also helps not only because we want to have the connection with you, it also helps us with distribution of the podcast so more people will know about it. All right, Mark, do you want to….

Mark Uraine: Yeah. Speaking of those reviews, I will tell you Birgit, get that Dave Smith actually pinged me and was pleased to hear that the restructure of the core editor meetings are helping our podcasts.

Birgit Pauli-Haack: Yeah. Yeah. It’s so much easier and it will help anybody who wants to attend the core editor meeting. It would really help you, too, because at the beginning, they summarize what the updates are and having that is definitely helpful when you want to dig deeper into one of the topics that are tackled by the development team. Yeah.

Community Contributions

Mark Uraine: Getting an overview like that just kind of puts it all in context. 

So, yeah, community contributions. We’ve got one recently that’s coming from Q. Q recently shared his component explorations in an effort to create a style system. It’s an experimental UI system for Gutenberg as he calls it and got a few links in the show notes, but it’s at G2components.Wordpress.com is the blog where he goes into all his explorations and talks about each one. And he even has a demo site at g2-components.xyz, along with his YouTube channel, where he goes through a lot of the work and videos. Check that work out. It’s really very interesting and I’m excited to see it happening and look forward to how it affects the greater whole.

Birgit Pauli-Haack: Yeah, it’s really cutting edge. But it’s also looking at the big picture. When you build a site that you have almost production ready code for your components and you reuse the Gutenberg components in other places of WordPress, if you wanted to. But then as Mark said, it’s experimental. So it’s going to be a little bit further out to actually take advantage of it.

Mark Uraine: Right.

Birgit Pauli-Haack: But it’s fascinating. 

WordPress 5.5.1 Release

So we had two releases this week, WordPress 5.5.1 was released on September 1, 2020. And it was a quick turnaround for a fix. There were a few bugs that were introduced with 5.5 that caused unprepared plugins to fail its users. So WordPress 5.5.1 is a maintenance release, but also with a lot of bug fixes or as Search Engine Journal headlines, WordPress 5.5 fixes millions of broken sites. 

So the full Changelog is, of course, available in the support section on wordpress.org as always. It fixes 34 bugs, has four enhancements and five bug fixes for the block editor. So it has a few modifications on the block patterns and some editor packages, and then fixes block highlighting, and list view specifies the buttons and outlines and fixes a regression bug for the query controls, and gives them mobile and tablet options for meta boxes. Yeah. WPTavern has the skinny for you. The link will be in the show notes, like so many others.

Gutenberg 8.9 Release

Mark Uraine: Thanks, Birgit. Another release that occurred this week, Gutenberg 8.9 was released on September 2nd. And following that, 8.9.1 came out on September 3rd for a quick fix of a code change that was not backwards compatible and caused a white screen of death on certain sites. So Riyadh Benguella reacted fast and released an update. 

Features

So let’s dive into this Changelog 8.9. There were four features, features are back, Birgit.

Birgit Pauli-Haack: Ooh. Yeah. That is a, what is that? The third or two pluggins in a row had no new features?

Mark Uraine: No new features.

Birgit Pauli-Haack: Yeah.

Mark Uraine: Excellent. So, these ones are, there’s one that’s very impactful here. If you have Gutenberg installed and activated, the widget screen, the new block-based widget screen will take over the old widget screen in admin. 

So if you go to the widget screen, you’re going to notice a very different interface. It’s a block-based editor where you can not only just add your widgets, but you can add blocks now to your widget areas. And it’s the first iteration that’s out, very rough right now. They wanted to get some early feedback on some of how these things are handling. Make sure users are testing out their third-party widgets so that we can identify any bugs or things that are being missed. There is a post about some first tests. Is that what that is there? Oh, yeah, this is your post.

Birgit Pauli-Haack: That is my post, yes.

Mark Uraine: Yeah. Birgit did a good review of this screen and raised some good points about the widget screen right now. I know that as designing and helping out with this particular project, there are a lot of new design iterations that are ready to come out. They have yet to be implemented on the code right now. So, get ready everybody. If you go to test this early, there are a lot of rough spots, but I’d say within a couple of weeks, we should have a lot of that refined a bit better in two, three weeks probably. There will be a call for testing posts coming out sometime soon. I’m asking that they hold off on this until we get a few more design revisions in there first.

Birgit Pauli-Haack: Yeah, well, you’re certainly right. It was a little rough. I don’t think that the user UI is finished, of course. And I saw some, and in the article, I linked to some of the new designs that are there just to give hope to people. But this iteration is really for testing backwards compatibility with your themes or with anything. And the other one, seeing if widgets from other plugins actually display well in this so-called legacy widget, which will go away, but it’s a functionality that needed to be tested. And I’m thinking that’s the reason why it came out earlier than you would have hoped, Justin made that.

Mark Uraine: And yeah, just to be clear for everybody listening, it’s always been an experiment that you could turn on in Gutenberg itself in the plugin, but we’ve just pulled it out of the experiments. But you’re right, because these widgets, in order to interact with them inside of a block editor, need to be wrapped inside of a block. And so that’s what that legacy widget block does. It wraps a third-party widget allowing you to interact with it in the block editor. 

WPTavern, I’m sorry, Justin Tadlock also wrote a post about the widget editor and just posted it today. And he brought up a really great point that I’d love to share with everybody. He says, “One of the largest changes that theme authors need to be aware of is that blocks and sidebars do not have the typical widget HTML rappers. This could present some issues with styling widgets in the traditional fashion.” What do you think about that, Birgit?

Birgit Pauli-Haack: It’s a valid point, of course. And it might be actually something to chime in on some of the discussions from theme developers to figure out, “Okay, what would I need to do to distinguish the normal block usage in a post from a block that is in my sidebar or in the footer that definitely needs a different styling and I need to be able to target those differently in their context.” So Riad actually posted in that editor meeting, the screen has been, as you said, in the experiments, but has received very little feedback. And since we are approaching WordPress 5.6, he continued making it default and a call for testing posts is the best way to ensure we receive the necessary feedback before landing in a core. And there is this Linux law, like many eyeballs make bugs shallow. So that is pretty much what drives that release.

Mark Uraine: Yeah. I can only imagine this first iteration being so rough that people are going to have some trouble with it, but the fact that they’re looking at it and maybe testing out some things are really just going to surface those bugs, like you said, make them shallow, bring them up so that we can identify them and take care of them before 5.6 comes.

Birgit Pauli-Haack: Yeah, actually also the Gutenberg team learned that when you have a new feature, you also need a feature to switch it off. There’s a remove theme support for widget block editor. Test it out, however, because there is a little bug in there that when the legacy widget sections won’t be available for the customer, even after the opt-out code. So the customizer, if that is used, whoever switches it off needs, the site owner needs to go through appearances widgets to control the widgets and not through the customizers. So yeah, either way.

Mark Uraine: Yeah. So you’re saying that if me, as a theme developer, if I include this setting to shut off the Gutenberg, the widget block editor, I then also eliminate my access to the widgets and the customizer.

Birgit Pauli-Haack: Yes.

Mark Uraine: Oh, wow.

Birgit Pauli-Haack: It’s a feature, you know? Yeah. That certainly would surprise a few people. So that’s why we pointed out, but I think the recommendation that I have, don’t upgrade to 8.9 until 9.0 is out, but only if you want to manage your widgets in the next two weeks. Otherwise, you wouldn’t even know about any of that when you use the Gutenberg plugin and production, I know if you use it in production, that might be an issue.

Mark Uraine: Me, I do. All right. And that was just feature number one. That was the big one, everybody. 

So jumping into some of these other features, there was one about adding now a character count to the info panel in the top bar. So if you remember, you click on the little “I” in the top bar and you got to see your block count, paragraph count, heading count. Now you get your character count as well. Yeah.

Birgit Pauli-Haack: Yeah. When I looked at it, I said, “Something is out of whack.” It has a little white space because it has four columns and five entries. So four in the first row and one is in the second row on top of that info screen. 

So, one idea would be to take one out like the block count. Who cares about a block count, unless you have a hundred different blocks in there or take the whole thing out. But I think that was your suggestion.

Mark Uraine: Yeah. I really think we can move it into the document sidebar, move all those things over there would be my call, but I’d even know the document sidebar is undergoing some design revisions and thinking. So it’s all up in the air right now. I think maybe it is best….

Birgit Pauli-Haack: Or come up with three more statistics that might be helpful in that info screen there.

Mark Uraine: Or maybe, yeah. Maybe we just move two into the second row and then it balances it a little better. Yeah. It’s like an orphan stat right there. Just hanging out there by itself. 

Next one is the latest post block allows adding links to featured images now. So you’ll see in the latest posts block settings, under the image part, featured image part, you can turn on to add a link to that featured image. So instead of the user needing to click the headline, they could also click the image in this list view to go to that particular post.

Birgit Pauli-Haack: Yeah. That’s a missing feature. Excellent that it’s in there now.

Mark Uraine: And then the list block has color controls now. So you not only can change the text color, but you can also change the background color of the list block, which is really cool. I am happy to see that come.

Birgit Pauli-Haack: Yeah, I like that because I use that background color from a group block all the time. Although I had also a heading on the list. There’s one line and says, “Okay, these are the steps.” And the first line was a heading, so I had two blocks on there. But yeah, having color controls is definitely interesting for content creators. Do we get gradients, too?

Mark Uraine: Oh, not yet.

Birgit Pauli-Haack: You mean I get a background color, but no gradient?

Mark Uraine: Yeah, I don’t think gradients were part of the background color. I forget. I want to go look now.

Birgit Pauli-Haack: Yeah, me too.

Mark Uraine: Check it out while I continue. Let me know. 

Enhancements

So there were 12 enhancements in this release. I’ll go through a few of them. One of them included disabling the tools menu. If you recall, there’s a tools menu in the upper left hand part of the tool bar, you could switch between edit mode and select mode. If you’re in the code editor now, part of the Gutenberg, it will disable that tool. Whereas before I guess it wasn’t disabled, which was confusing because when you’re in code view, you’re really not manipulating blocks. You’re just writing code. 

The other thing I noticed was adding a maximum height to the long block previews, and this is cool. If you hover over a block in the inserter, you get a preview next to it. Well, if that block is longer than the visible screen, that preview would have run off the screen and just a little awkward. So now they put a max height on that so that it doesn’t do that. The block directory explicitly closed the inserter on block ad. So when you add a block now, that inserter closes, if you’re in the block directory.

Birgit Pauli-Haack: So don’t have an extra click, yeah, I like it.

Mark Uraine: Another one included improving the UI of the custom gradient pickers. Birgit, did you see this?

Birgit Pauli-Haack: I saw it and I can watch this. In the PR, there is a gif in there and it’s very soothing. It’s kind of, I can watch it all day.

Mark Uraine: I love it. I love how you just hover over the gradient bar now and the plus just pops right up and follows your cursor, just really smooth. And that the fact that we don’t have the radial and linear, actual gradient icons, now. Those things were so bad. It’s nice to see they’re just a quick dropdown to switch between the two.

Birgit Pauli-Haack: Yeah, just a quick intermittent no gradient on the list color block.

Mark Uraine: Oh, man!

Birgit Pauli-Haack: That’s fine.

Mark Uraine: Okay.

Birgit Pauli-Haack: I can live with that.

Mark Uraine: The last one I wanted to bring up was the converting all pixel values in front facing styles to relative (EM) units. So that got merged and is part of this release. That’s kind of a big deal. Themes are relying on these particular pixel values to really build it from or build off of. How does that affect those themes, I’m curious? By just swapping it to EM?

Birgit Pauli-Haack: Yeah, I’m at a loss right now, but yeah. I think it will affect them. Well, maybe we should highlight that a little sooner or have at least some information about why that actually was important to do that.

Mark Uraine: Ultimately, I think it’s a good decision to have M values rather than static pixel values. But yeah, I’m worried about the themes, existing themes out there.

Bug Fixes

Birgit Pauli-Haack: So in the release, there were also 30 bug fixes and as always, we are not going to read through all of them. So the fixer, the image alignment control styles in the latest post block are now fixed. So you can distinguish between what’s actually supposed to happen. The pullquote had a fix on the text color and then the button blocks had an outline and style. The specificity, was that right.

Mark Uraine: Specificity, yeah.

Birgit Pauli-Haack: Specificity on the styles. On the image block, that’s a big one to fix that. Now it prevents all encaptions being written or that is fixed. It prevented captions being written during image upload, and then discarded when the image was there. So, that is not happening anymore. And also fixes the tags that are coming over from them. So there’s a limited number there to avoid infinite loops in the queries, which everybody’s thankful for because the browser or the machines CPU got really busy with that. Inserting an apostrophe into a tag does not result in an error anymore. So, yay.

Mark Uraine: Oh, no kidding.

Birgit Pauli-Haack: Yeah, so all of the O’Reillys and O’Malleys, editor’s. Yeah. Kind of possessive pronouns work now.

Mark Uraine: True, true.

Birgit Pauli-Haack: Yeah. I think that those were the ones that I wanted to highlight.

Mark Uraine: Those are good ones.

Performance

Birgit Pauli-Haack: Then there were some performance changes, especially the preload widgets for the widget screen. It seems to be a little bit load, having some load issues, especially when it’s plugin load, so third-party plugins. And though that has been fixed, there’s a new API, the core data and implementing underscore fields data to reuse in the entities.

Mark Uraine: Okay, cool. Cool. 

Experiments

We had about 19 experiments as well with this release. Many of them having to do with the full site editing. 

There’s some blocks that have been added, like the post comment block, the post comment date block, and the post comment author block. And the post hierarchical terms block. We’re getting so granular with these blocks. Wow. I’m very curious, does the post comment author block have a post comment author avatar block?

Birgit Pauli-Haack: Yeah. You’re right. Yeah. Is the avatar completed in there? I think there is a great use case for block patterns here, especially for theme developers and plugin developers here, too.

Mark Uraine: Yeah, you want to want to set that right and just let it be, like just here, just drop in a pattern. That’s how I want my comments to be and let it go. 

So the site editing UI had a couple updates as well. One that I wanted to bring up, alert when trying to leave the site editor with unsaved changes. For everyone working in the post editor, that’s a very familiar experience. That’s also been brought to the site editor now. So whereas before you kind of left and I think it didn’t recognize or alert you and you might’ve lost those, this is now….

Birgit Pauli-Haack: Oh, yeah. You didn’t save, buddy.

Mark Uraine: Right, right. Global styles and theme.json APIs. Global styles is making it back in right now, which is really great to see some more work is happening there. One of them being that allowing enabling and disabling of custom colors from the theme.json config.

Birgit Pauli-Haack: That’s awesome. Yeah. Can it be that Tammy Lister is back from sabbatical?

Mark Uraine: She is. She is back from sabbatical, and I’m hoping that she really picks up where she left off with a lot of this global styles stuff. I know some other people have been working on it as well, so that’d be great to gain that knowledge that Tammy has and keep moving forward with this.

Birgit Pauli-Haack: Yeah. Welcome back, Tammy. Yeah.

Mark Uraine: And then we have the navigation block screen, which has several updates, like adding post, page, category and tag variations to the link block. So when you’re adding a link in your navigation block, you can choose now from posts or pages or categories. It’s kind of a, I remember we did some, not we, but I believe it might’ve been Mel and Sarah Semar way back in the early 2019, were doing explorations on the navigation block and they had some mock ups that reflected this very same thing. And it’s interesting to see how much we come full circle back to this. 

There was adding the block inspector to the navigation screen, so if you go check that out, and supporting drag and drop for sub menus of navigation blocks, so trying to get drag and drop in there everywhere we can.

Birgit Pauli-Haack: I just realized it might be not a bad idea to do a test now, before it loses experimental part that takes over the menu screen.

Mark Uraine: It’s coming, everybody, it’s coming.

Birgit Pauli-Haack: It’s coming. And if we are not getting enough feedback for Riad in there, you’re just going to flip the switch again.

Mark Uraine: Riad likes feedback. And so he just pushes it to the front.

Birgit Pauli-Haack: Rightfully so.

Mark Uraine: And it works. Believe me, it works. 

Documentation

So there were 11 documentation updates in this release, which included document component updates for the block inspector, block mover, block breadcrumb, updating the tutorial, creating a block-based theme, some documentation updates there. There are several, a couple others, including typos and tweaks to existing documentation.

Birgit Pauli-Haack: Yeah. So if you are a theme developer, I think it would be good to check out the new, not the new one, it’s only updated, but the tutorials to creating block-based themes. 

Code Quality

So, there are also 12 code quality updates. Three of them were refactoring components as functional components. The word count, the block mover and the unsafe changes warning, and also refactor of a drag and drop geometry code.

Mark Uraine: Geometry. So for all of you who thought geometry was a waste of time in high school, right here, here it is. You could put it to good use.

Birgit Pauli-Haack: Do I sense that there were some discussions with the kids around that?

Mark Uraine: Yeah. Algebra, what is algebra? Who’s ever going to use this? Yes, my home is full of that right now.

Birgit Pauli-Haack: And then there was a change in the packages that, so the team moved the DOM utility functions from the @WordPress/blocks package to a separate one that is now at WordPress/dom, D-O-M. That’s the document object model for the page. Yeah. So just pointing that out for some of the developers that they, again, if they use them, update the code to import a different package.

Mark Uraine: So I’m not entirely sure what that does. I mean, I get the idea of what’s happening, but is that going to affect, I’m working on that query block, right? Or is that DOM package going to affect the query block in a way, like be able to communicate better somehow between the things? I don’t know. It’d be interesting. I got to look that up.

Birgit Pauli-Haack: I need to check out the PR some more to find an answer for that. 

Build Tooling

And then there were some updates for build tooling that are very specific, like update minimum versions for the plugin, have some build tools changed to watch the rate slower to avoid using a lot of CPU while developing and add permissions to PPH unit tests, and allow a local prettier configuration to take precedence in the recommended ESLint. Yeah. And so to summarize that, Mark actually did a YouTube video. He did a Gutenberg walkthrough for 8.9 to show off some of the visual changes that came with us.

Mark Uraine: Yeah. Go check it out on my channel on YouTube there.

Active Development

And that brings us to active development and discussions happening right now. The query block, as I mentioned, I’m digging into. This is basically what WordPress is, is a giant query. So this is a very complex block and I’m trying to figure it out right now, and realizing that it’s really not necessarily for end users, which I’ve got some recent feedback on, but for the site builders is kind of what it’s used for when creating their initial templates for some of these pages, but really surfacing great questions right now and answers around usability.

Birgit Pauli-Haack: Yeah. So yeah, and a query block is really the, the block version of WP query class, I guess. And I don’t think that end users are really keen to learn any of them about that, but they will like the functionality that you can decide what kind of post and custom post types without some display choices. So we’ll see what comes of it. 

So in active development or discussion, Anne McCarthy has published the focus task, so to speak, for September. And so it’s the global styles file and editor focus APIs. It’s the widget screen with quite a few enhancements, especially in the display, in the designs and the inserter and the third-party widgets in that, what you already said. And we have the project board for the widget screen also in the show notes, full site editing is with the group document settings, move the template and page navigation into the sidebar, allow browsing of all template and parts, import add new page flow into the add template screen.

So there was in the customizer when you wanted to add a navigation, for instance, you were able to add a new page right in the customizer. So it had a target to go to and later you could fill out that page, but you already headed in your theme. And now, that needs to come back into the full set editing part as well. 

And then the navigation screen has a few things that will be worked on. That’s the navigation editor and the search results when you are adding a link, exploring the toolbox and these kind of things, and all this is in the post on the core blog and has the links to the particular discussion. So follow them if you’re interested in some of that. 

There’s also areas to be aware of that’s the block and plugin developers, the block creation tutorial has changed, or then the block submission tutorial, block checker tool. That’s all in there. Just so if you lost the links or the core posts, that announced them all kind of under 15th or 20th page right now, she surfaced all those things again for you in that post. 

And then Kjell Reigstad also had a Gutenberg and themes update for last week and he points out the important issue to highlight a pass for the migration of theme templates to block-based templates. And there is a proposal right now on GitHub. It’s a PHP theme template compatibility proposal. And that discusses what takes precedent if there is no block-base, how can the PHP theme play a theme template take over? So theme developers, again, this is for you to chime in and let the team know what would be necessary for you. All right.

Mark Uraine: Good stuff.

Birgit Pauli-Haack: And I think that brings us to the end of our show.

Mark Uraine: I think so. This was a very good one.

Birgit Pauli-Haack: As always, the show notes will be published on the Gutenbergtimes.com/podcast. This is number 28. 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. 

That’s it from us. Thanks for listening. Think about a review maybe for over the weekend or something like that.

Mark Uraine: Right, right.

Birgit Pauli-Haack: Yeah.

Mark Uraine: We do appreciate those reviews for sure. And everyone listening, I get pings from people all over the place, and I really appreciate it. I’m glad that this change log podcast helps you in some way.

Birgit Pauli-Haack: Yeah. I’m so happy about this. I got to connect with a German community, WordPress community on Zing, and I’m happy that they reached out. So it’s really interesting. And I appreciate everybody who says that they’re listening and yeah, tell us what you’re thinking about and what you need. We’re here for you, and this is all for you. And with that, I’ll say goodbye until the next time.

Mark Uraine: Thank you so much, Birgit. Good to see you again. Bye, everyone.

Birgit Pauli-Haack: Bye bye.