Gutenberg Changelog #13 – Focus for WordPress 5.4 Release, Full-Site Editing, Themes and Global Styles

Mark Uraine and Birgit Pauli-Haack cover Gutenberg 7.3 plugin release, full-page editing and themes, global styles and focus items of the block editor for the upcoming WordPress 5.4 release.

Theme and Full-Page Editing

Birgit Pauli-Haack: I’ve been good. I’ve been good. I’m working a lot and I think January this year has six weeks. There’s still a week to go and I feel like I’ve worked the whole month already, but that’s good. Yeah, busy is good. And I’m really excited with what happens with Gutenberg right now with all the different areas. Speaking of which, yesterday’s recording of the live Q&A with Enrique Piqueras on theme templates in a full-site editing experience is now available on YouTube. It was a great first demo on how this would look, and the Q&A delivered quite a few insights to think about. So go to our chanel page at youtube.com/gutenbergtimes and it’s the first video listed. It’s at youtube.com/gutenbergtimes. And once we have the transcript, we will publish it with the show notes on the Gutenberg Times website.

Community Contributions

Mark Uraine: Yeah. For anybody who wants to get excited about Gutenberg, that’s a good video to watch. We’re talking about full-site editing from some of the developers himself, Enrique. So that’ll generate some excitement around what’s coming. So, Birgit, we have some community contributions in this episode. We’ve got an article that Jeff Ong recently posted on Themeshaper.com. He goes through a step-by-step process and his experience for creating a block-based theme, which is kind of what we were talking about there.

For anybody who’s a theme developer, this would be a great read for you. See what people are doing, how they’re experimenting with some of the very, very new features in Gutenberg right now that aren’t even completed yet. This stuff is so cutting-edge new that it’s still being changed. So how Jeff comes in and builds a block-based theme on a platform that is currently changing as it’s going, it takes genius to do something like that. And anybody can really actually just jump in. It doesn’t take genius, but it’s a good article. He shares his experience.

Birgit Pauli-Haack: Absolutely. Yeah. It really helped also for me. So for yesterday’s show I was probably half an hour ahead of everybody else that was on the show because I talked with Enrique. And that post was about two days before we headed into the show so it was a really good catch up with what I already knew and where it’s going. It’s really hard on cutting-edge stuff to care about that much because it’s changing a lot and I know that the designers still have to look at the full-site editing. Right now it comes from Enrique and other developers, but I don’t think that somebody has really looked at that yet to have normal users use it. Mere mortals. But I like how the template hierarchy is still the same template hierarchy as it is now. So backwards compatibility is big but it’s also involved in there.

Mark Uraine: And you know what I’ll add to this, Birgit? Because WordPress is open source, the work that we’re doing for any of this is out there in the open. Right now, Michael Arestat and myself have been really digging into templates and template parts in the full-site editing experience, and all the work we’re doing is on the wordpress.org Figma account. We’re just going through doing wire frames after wire frames and trying to see what the flows look like. Then we prototype them, we get them so you could click through and actually experience some of it, and then it kind of gives us an idea of what feels right, what’s not feeling right. So if anybody wants to see the work we’re doing, it’s all there on Figma, which is, I believe anybody can access it. And we’re going to be sharing out some ideas very soon actually.

Birgit Pauli-Haack: That’s awesome, yeah. I love that, to have a visual to the ideas that are floating around in somebody’s head or in somebody’s code. You cannot really form an opinion if that’s a good way to go, if you don’t have the full process, kind of, the idea of it in full view and say, “OK, well, let’s iterate on that,” or, “What should I, as a theme developer, do to make customizable themes but still have a consistent layout there?” It’s going to be really interesting in the next couple of years in how themes develop.

Yes. And speaking about confusing, Mark Uraine published a quite an interesting post. He did a study on how particular words are used around Gutenberg interface and how confusing this might get. Well, I say it’s quite interesting. What we call tools or navigators. It’s a great read, too. So, Mark, do you want to elaborate here?

Mark Uraine: Yeah, I was really making fun of myself more than anything in that post. It’s full of sarcasm. But as we’re digging into some of the words of the UI, of the user interface, of Gutenberg. I kept stumbling across instances where we’re using the same word in different locations, or we’re calling it slightly different things when it’s the same thing that were being used in multiple instances. And I found it ironic that a software called WordPress that is dedicated to democratizing the publishing of words for people, how this project struggles with words itself.

It’s so hard to get words right, especially in a user interface for people to be able to read a word and kind of understand what the thing does. I also gave credit to the translators out there of WordPress and making an internationalization. Those groups, the work that they do is fascinating. Because, Birgit, we spend months debating a single word sometimes, in the issues, and the translators have to come in and then translate that word into their language or into another language. And they do it so well, sometimes. Anyways, it was a fun little article.

Birgit Pauli-Haack: Yeah. Go there and read it through and also look at your own software that you write and see how generous you go with words that mean different things in different contexts. I think it’s a good study. Yeah, and you brought us something else here?

Mark Uraine: Yeah, I did. I just saw a tweet recently from Nick Halmze about his plugin for Ubiquitous Blocks. He thought to take another look at the reusable blocks in Gutenberg, and he went and built that out further, created more to that, hoping to solve a personal problem that he was experiencing with the reusable blocks. It kind of says, “Making reusable blocks more reusable.” So he created a plugin, it’s out on wordpress.org now, called Ubiquitous Blocks. I just caught a glimpse of that. It is definitely something I want to check out more, especially as we’re taking a look at template parts like global block areas that can be edited that affect the entire site. This all kind of falls into a relation with reusable blocks. So hopefully Nick there has stumbled upon something that we might be able to learn from and pull into our work, as well.

Birgit Pauli-Haack: Yeah, and when you go to Nick Hamze’s website, he has quite a few unique blocks that he has been working on. It’s always interesting to stop by and see if there’s a use case for yourself there.

Gutenberg 7.3 Release

And now we have the big release. Gutenberg 7.3 was released on Wednesday. Another long list of changes — 129 line items with line enhancement, 11 tweaks of performance, 34 bug fixes of rich 14 which are dedicated alone to the navigation block. Five new APIs, 10 updates to the experimental area of the plugin, and then 12 PRs for documentation of it.

Mark Uraine: All right. Twelve PRs on documentation updates.

Birgit Pauli-Haack: Yeah, the bulk of the number of changes, 48, landed in our favorite Various section of the release notes. So this release, there are no new features. It’s a very strong focus on tightening up and performance. So, Greg, Ziolkowski, I’m butchering his name every time, but I summarized it nicely in this week’s meeting. So that’s mainly performance improvements. New block collections API. Useful when you, as a plugin developer, want to group your blocks in its own section in the inserter, and then further improvements on the navigation block. New experimental blocks for full-site editing.

Congratulations to the 56 contributors for another great release, merging 160 pull requests. We won’t tackle every one of these changes, no, but there is a lot to unpack here. So, Mark, do you want to start with the enhancements?

Mark Uraine: Yeah. So there are about nine enhancements, as we mentioned. Some of these included some visual things like adding a border to the table header and footer, little visual indicators to help separate out the footer and headers of tables. There were… let’s see. Oh, the replacing your media. That component has been extended to the cover block, the media text block, file audio and video blocks, as well. And that’s a great way that when you have a bit of media in your block, it’s a simple way that you can click. It says, “Replace,” you click it and it allows you to choose the path by which you want to replace it with another form of media. It’s more consistent across the blocks, as well, which is great. 

Let’s see. There were… Oh, the tab order on the top toolbar. That was a good one. Better accessibility labels for blocks. Breadcrumb add accessibility labels, as well, to the breadcrumbs. And then adding colors like the text and background color for the navigation block, which is a good one to have because creating those navigations, oftentimes you want to differentiate it from the rest of the page somehow, and using colors on your text or background is helpful.

Birgit Pauli-Haack: Yeah, that definitely was still missing there so I’m glad that all came in.

Mark Uraine: It looks like we had about five API changes, as well, or new APIs. And there are a couple, like the components adding image size control component. That one’s been out there for a little bit. It was great to see that one merged in. Adding block collections, which I believe you kind of mentioned earlier on already, and a few others. Birgit, what else were on the list here?

Birgit Pauli-Haack: I was reading up on the block collections and found that I think Nick Hamze actually opened an issue where he thought a little bit further about the block collections, “Wouldn’t it be nice?” And we all liked that sentence, “Wouldn’t it be nice?” To make it also user configurable so people can say, “OK, I want to have my own section with the blocks, and I group them in a different way in the in inserter so I can get a little bit more order in my kitchen drawer of blocks that are in line in my inserter.” That was one thing, and the other one I’ve forgotten.

Mark Uraine: That feature request has been brought up in the past regarding the block inserter. Yeah, it’s a good request. I think it’s a good one. How we get there, at what point we get there, it’ll take some time.

Birgit Pauli-Haack: Yeah. There is the experimental section in the Gutenberg plugins. It’s kind of in between. So what’s in Core is already released. What’s in plugin is beta released, and what’s an experimental, it’s more alpha kind of thing. For that, for the full-site editing, there were additional dynamic blocks for the author. So a dynamic block to put somehow the post loop into a block but not make decisions on what you want to have in there, as a theme developer or a site builder, so you can have separated out the author block, the date block and the excerpt block.

What wasn’t implemented yet was the template part block editing. That’s now available in the experiments and also template loading for the full-site editing. There are also small changes on the block directory which were more cosmetic. The icon had been changed and the copy changed, and as well to change the action block label. But that is kind of a little bit lingering. I think there is a lot of work to be done, but that’s not yet released in the experimental section.

And another part of the experiment is use colors function or method where multiple blocks that use the colors, or where colors are available, can use the standard colors that come from the theme. So if your theme, or the theme that you installed, has already six or seven colors or four colors, standard colors, as an option, it will be reused over all the other blocks that have color changes. I don’t know if I explained that right, but I think I got it in my head right.

Mark Uraine: Yeah, that sounds good.

Birgit Pauli-Haack: Yeah, so that’s from the experiments.

Mark Uraine: Yeah. And there’s 34 bug fixes in this release, many of which apply to the navigation block, as we discussed, which goes to tell you this navigation block, it’s a big deal. It’s not like just the typical block. There is so much that’s going on in that thing. We’ve been talking about this all last year, though. It was the focus of last year, was this navigation block. And it took a long time to work through and get right and still we’re working on it, still. Some of those other bug fixes included fixing the writing flow focus, capturing, fixing buttons, block link shortcut, which wasn’t working with multiple buttons, and a list of many others. But I have no problem just skipping them all because bug fixes are bug fixes. What do we have on documentation, Birgit?

Birgit Pauli-Haack: Yeah, on documentation there were quite a few PRs, actually not only 12 line items, but some of them are actually multiple PRs in there. A lot about the LinkedIn process and the READMEs and documentation about that. Also, updates to WP scripts commands landed in the documentation, and updated block filters documentation. What’s in there is also an updated contributor guide with the Docker Compose info as well as JavaScript syntax highlighting. That’s just the two or three things to highlight from that section.

I’ve jumped right into the kitchen drawer for Various sections, 48. I think one of the biggest pieces there was the refactoring of the link control API, and that had to happen to make the navigation block work right. It uses the same link control API that other blocks are using, like the heading block or the image block or the text block, the paragraph block, but it needed to have different things in there for the navigation block, so they did a refactor of that API, including the search projections had come out with the links when you tried to do an internal link. It suggests, with the search word, it suggests a page or post that it’s already on your website, which I really like. Not a whole lot of people actually pick up on that. And one item was kind of an “AH!” thing. It says, “Remove the gradient pickup from the cover block placeholder.”

Mark Uraine: You like that one?

Birgit Pauli-Haack: We wanted to all have the gradients and now it’s gone again. But only from the placeholder. It’s not from the color block. It’s in the site for the color block.

Mark Uraine: It’s still there. You can still use it. You just can’t set it from the get-go.

Birgit Pauli-Haack: There is a new storybook for the panel component, and then there’s also additional block editor keyboard shortcuts now for the widget screen. The widget screen is still experimental, but the block editor shortcuts are already released and are in your sidebar document setting keyboard shortcut now.

Mark Uraine: Yeah. So the goal there is to really bring the Gutenberg functionality over to these widget screens as well, that are also in the experiment of the plugin. But to make sure everything you can do in Gutenberg, you can kind of do that right there in those areas.

Birgit Pauli-Haack: Yeah. There’s a back and forth in there, as well. So one component I would like to point out also is that it replaces the console warning functions with, actually, a package called WordPress/warning that helps you, as a plugin developer, as well as the Gutenberg developers, to organize those console warnings a little bit better. So that’s definitely an improvement. And we have some page template previews. So the experimental part has where you can create templates for single page or some other pages and now you can actually preview them, which is definitely helpful. What else do we have? I think that’s it from that section. I might’ve overlooked something….

Mark Uraine: Well, we’re bound to miss something with 48 Various things that happened. 

So next up, Birgit, we have 11 performance improvements. Looks like 10 of them were focused on creating a lighter DOM for the blocks. And DOM, for any of the listeners out there is the acronym for document object model. It’s the way in which the browser kind of interprets HTML and looks at all the HTML elements as a tree, almost, and goes down the tree of HTML elements. So if you looked at, like inspected the code on Gutenberg, you might’ve noticed there’s divs inside of divs with spans. It’s just a lot going on in the HTML. Well, a lot of what’s happened is Ella, Joen, and a few other people really been spending a lot of time going through this and cleaning out what can be cleaned out.

A lot of that was necessary in the early stages because we were still trying to get things dialed in. But now as Gutenberg is slowly maturing and getting settled, we’re finding what HTML, what pieces we can really get rid of that we just don’t need and we can clean it up a bit more. This improves performance, and it also benefits plugin and theme developers who need to target specific HTML, to target specific blocks and style them. It makes it a lot easier.

Birgit Pauli-Haack: Yeah. I do a lot of testing but I’m always running into some of the things and I wasn’t really typing that fast. There is definitely a lot of improvement in the key press event for the typing part. So at the end of the release post, Ella kind of continued the tradition that started by Riad to post a performance benchmark and track it through the various versions. And the team measures two critical time points for a particular size of a post and that is quoted, but that’s highly an understatement. The post has approximately 36,000 words in about a thousand blocks. Is your mind blown yet?

But she just posts “It’s not representative for the average editing experience, but it’s adequate for spotting variations in the performance,” she writes, or rewrites, on the theme. So the two times that attract, that’s the loading time of the whole Gutenberg editor, and then the key press event triggered by typing. So some numbers for you, if you want, WordPress 5.3 had a loading time of 6.48 seconds and Gutenberg 7.3 now has 4.5 seconds.

Mark Uraine: That’s like two seconds.

Birgit Pauli-Haack: That’s two seconds, alone, in loading time. And that definitely came from the light of dawn. But it’s even more astonishing the speed decrease for the key press event. It went from 69.8, so almost 70 milliseconds, down to 33, so it was half and that’s quite impressive. So try it out then you could mistype things much faster now.

Mark Uraine: Yes.

Birgit Pauli-Haack: And fix it.

Active Development, Discussions and Proposals

Mark Uraine: So we have an active development coming up here. There’s a proposed patterns API that Greg has been working on in GitHub there. This is an interesting PR because what it does is it allows the user to search for blocks with more specific keywords, if they’d like. So if the user is searching for a two-column equal split block, they want to do two equally split columns on their page, and they type that in, when they see the columns block and they click to add it to their page, it adds it. It can skip the placeholder screen where you would normally select how many columns you want and what size. It’ll skip that and just add the block with two columns equally split right on the page.

So it’s a way to move faster into getting the block that you want in the layout that you want on the page. We’re looking at other scenarios, other use cases where this might be helpful. Some might be like the social block, for example, Birgit. Like, “I want Twitter and Facebook social icons.” I type that into the inserter, I see the social block, I added to my page and it only has the Facebook and Twitter icons ready to go.

Birgit Pauli-Haack: That’s pretty impressive. That almost goes into the mind reading business….

Mark Uraine: Yes, which is our goal, right?

Birgit Pauli-Haack: That the goal, right? So from the JavaScript team, there’s a proposal for an official package to scaffold blocks in a plugin. And if you want to try it out, it’s an alpha version. It’s available right now on Greg’s GitHub, but it’s in an issue on the web for GitHub, as well, but it’s not released yet. It creates all the files and tooling necessary for a plugin with a block. Once the block directory is more finalized, it also is supposed to have the necessary blocks.JSN file created, or whatever the team comes up with. The beauty of this tool is that you can run it directly from a plugin directory on your test site and that you have already running on your local system.

I’ve tested it a bit and I was quite impressed with it because you can take care of a lot of templating, like your namespace and the names of things that are then repeated throughout all those. It has the plugin PHP. It has the README file and all those kind of things. It also has the register block so you only have to write the edit and save functions pretty much. Another variation is that you can actually have this tool just use ES5 instead of modern JavaScript code base, and that wouldn’t require any tooling for that. But it’s really cool. It’s leaned on, or took some of the scripting from the WPC line, but it took actually quite further.

Mark Uraine: Very interesting. Greg’s all in that, as well, huh?

Birgit Pauli-Haack: Yeah. He gets a lot of shout outs today.

Mark Uraine: He’s doing a lot of work there. That’s excellent.

Global Styles

So another item on our list is global styles. People have been asking about this. This has been a topic that’s been brought up often. Will there be a way that I, as a user, can edit global styles, whether that be the typography or the font selection? Whether it be the colors, maybe rounded corners of buttons or the buttons type? Is there a way I can affect that equally across my entire site? So the answer is, “It’s coming. It’s coming.” There’s a lot of exploration going on by Q and Tammie right now in this area.

There kind of seems to be this pyramid structure of what gets cascaded or what gets overwritten by which, as you get more specific into the experience of editing a page. So we have Gutenberg styles, which many argue, some might argue that Gutenberg just shouldn’t even have styles. It should really just rely on whatever theme you’re using. And this is a fair argument. But sometimes themes don’t always style every part that needs to go into the editor so, rather than worrying about just those really odd pieces, we’re trying to go at it by styling Gutenberg blocks as simplistic as we can and make it as easy as possible to be overwritten. But they would be overwritten by the theme styles.

And then you have something like global styles, and I might be mixing this up. They’ve got much more detail on this. But I think you then have global styles that would update the theme styles, or your theme styles override the global styles. This one I’m not clear about and I’ve got to go back to their documentation because they’re doing so well. But then you have block styles. Like, “I want to just style this block to be a certain way.” Well, that needs to overwrite the global styles. And then of course our favorite custom CSS.

When you go to the customizer or wherever you go and you add a little bit of custom CSS, that’s got to overwrite everything. So, that being said, there’s some links. We’ve got a project board now in GitHub dedicated to the issues that we’re tracking for global styles. I would love to get more people who are interested in this sort of thing into GitHub on those issues. Check them out and leave some comments and feedback. That would be great.

Birgit Pauli-Haack: Yeah, and all the links, all the things that we mention here, the links will be in the show notes on the Gutenberg Times website, so follow up on them.

Another proposal is there for controlling the blog editor. Riad Benguella published that just this week, I think yesterday. So controlling the experience of the block editor for agencies or developers was always a focus or a priority for the developer experience of the editor. And Riad, in his post, actually lists all the ways developers can control the block editor at the moment, in this stage, and then has a proposal for the community to do this a little bit more streamlined and expandable.

Personally, I find the proposal quite intriguing and it makes total sense to me reading it. So check it out on the Core Mag blog and add your comments. That is definitely something everybody wants your opinion on it because you are working as plugin developers as well as theme developers.

Mark Uraine: Totally. That’s a big topic. I remember just about a month or two ago I went to a Rebrand Cities event in LA, Los Angeles, here. They’re a company trying to help small businesses. They were working with the city trying to help small businesses get an online presence. They use WordPress to help these small businesses get their business online. And at this place, I was talking with some other developers that came to help these small businesses and one of the biggest complaints was, “I don’t like Gutenberg because it gives the user too much control,” and I empathize with that.

You go through all this as a developer, all this time trying to get this website just right, and then you want kind of want to restrict some things that really matter in the way that the website functions and works and looks on the front end, and you don’t want the users who are just coming in to maybe edit the content or write the content. So this is a welcome, right here, for a lot of people.

Birgit Pauli-Haack: Yeah, definitely. Sometimes you want to just get things done and then all of a sudden you have all the tools, and then two hours go by until you make a decision on how you want it to look because you have too many choices here. So I really appreciate that, as well.

Proposed Design Focus for WordPress 5.4

Mark Uraine: So, Birgit, we’ve also been trying to get, as I mentioned earlier, preparing for a WordPress 5.4. Tammie’s done a lot of work in gathering a list of design-related issues that we’re hoping to get in there. She’s asked me to help provide some issues specific to Gutenberg. So I’ve got a list, if any listeners are listening and they want to help out, because we can use some help to push a few of these things forward and get them merged in before our cutoff date. We’re making an effort to unify the link interfaces throughout Gutenberg. This is a big one. We need some visual consistency there.

Birgit Pauli-Haack: Absolutely, yeah.

Mark Uraine: We’ve got a video block subtitles. People want some subtitles on there. Resizable editor, that’s a big one.

Birgit Pauli-Haack: Yes!

Mark Uraine: Yeah. That one Isabel is working on. That’s really a way in which we kind of hijacked the preview button. There’s going to be a new interface there where you might be able to click and select, “I want to preview it on a mobile screen,” or, “I want to preview it in an iPad-sized screen,” or something like this. So it allows you to preview your site but in very, or Gutenberg, actually, the backend part of it, in various formats for devices. Then we have a group block, the custom text color. If you set the text color on the group block parent, it would push those colors down to the nested blocks within it. That’s already been merged so that one’s in. Better labels for inputs. We’ve got the latest post blocks, we want to get the feature image into that block.

Birgit Pauli-Haack: Oh, yeah, great.

Mark Uraine: You can turn the feature image on and off, if they want. Renaming the block library Categories. That one right now, I brought this up in the post we talked about earlier, but how the naming of these categories may not be really user-centric. So we want to try and go back to some naming categories that help the user. Then we have the columns block. Adjusting the column widths within the block has always been a challenge. So we’re trying to experiment around how we can make that a little bit easier and maybe take a step forward. Yeah. Does that cover everything today for us?

Birgit Pauli-Haack: Well, I think so. I don’t have anything more, but it would be interesting to see if there’s something that was really missing and to really get into the 5.4 WordPress-focused issues that are listed. We’ll list the link to the post that Tammie put out, what’s going to be in design for 5.4. But for Gutenberg, it means it needs to be all in by the first beta version that comes out, and that is scheduled for February 11. That’s only three weeks away. So there is a lot of work to be done if that all wants to get in there.

Yeah, so one little shout out for Mark Uraine’s, number 43 update of the Gutenberg phase. You’ll find quite a few links in there. He also has some screenshots there for the enhancement on the Gutenberg 7.3 release, and then more about the releases or iterating the release focus there. What else do you have?

Mark Uraine: One more note before we close up today is I’ve been trying to gather feedback on the navigation block and I tweeted about this last week. I’ve had several comments coming through that have really been helpful. So I want to say you to everybody who’s been giving me some feedback on the navigation block. If you haven’t had an opportunity, please test it out and let us know what you think, where it’s challenging, where it’s successful. We’re taking these back to the issues right now and you saw, everybody, how many improvements and bug fixes were just on the navigation block alone. So the things that you’re giving us, the feedback you’re providing is really helping shape the direction of this.

Birgit Pauli-Haack: It’s coming along really, really well. So, as always, our show notes will be published on the Gutenbergtimes.com/podcast. And then if you have questions, suggestions or news that you want us to include here, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. 

Thank you for listening, and I say goodbye until the next time.

Mark Uraine: Thank you everybody. Bye-bye now.