Changelog #39 – Gutenberg 10.1, Dev Notes for WordPress 5.7, and Full-site Editing

In this episode, Birgit Pauli-Haack and Mark Uraine discuss Gutenberg 10.1, Dev Notes for WordPress 5.7, Full-site Editing Site Editor, and Testing Tools between releases.

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

The master branch of the GitHub Repository was renamed to trunk

Testing a Gutenberg Pull Request (PR) by Paal Joachim Rohmdahl

User-Friendly Methods for Testing Gutenberg Enhancements and Bug Fixes

Proposal to drop IE 11

WordPress Releases

WordPress 5.7 Release Candidate 3

Block Editor Dev Notes

• Changes to block editor components and blocks
• Changes in @wordpress/data API
• New block variation APIs in 5.7
• Inner Blocks API Changes
• New i18n filters & createI18n() changes
• A new dynamic hook to filter the content of a single block

Gutenberg 10.1

• Gutenberg 10.1 Release Notes
• Gutenberg 10.1 on WPtavern
• WordPress News: Did You Know About Reusable Blocks
• Core Editor Improvement: Need for (page/post) Speed

Documentation

• Outreach
• Add templates and global styles to key concepts.
• Update block metadata section to promote PHP API.

Discussion and Work in Progress

  Gutenberg + Themes: Week of March 4, 2021

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 39th episode of the Gutenberg Changelog podcast. Today, we will talk about Gutenberg 10.1., the Dev Notes to WordPress 5.7, testing tools and, of course, full-site editing and all the other goodies of the block editor in WordPress.

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

Mark Uraine: Hey there, Birgit. I’m doing well today considering about half my house is under major construction right now. I think I have it all plasticed off and everything. We’re trying to improve the air quality by redesigning our HVAC system. So we’ll see how that goes.

Birgit Pauli-Haack: That’s a major project. Yeah, I don’t envy you.

Mark Uraine: Oh, goodness. I’m hoping this will help with all the California fires that we get over here, and the smoke and stuff. But anyways, how you’ve been doing?

Birgit Pauli-Haack: Oh, I’m doing well. It’s been another busy Gutenberg week, and I actually finished the call for testing instructions and was able to build a homepage with the new tools.

Mark Uraine: That’s so good.

Birgit Pauli-Haack: … really exciting and it’s so great to see how that comes together. Of course, it’s not ready for release or something like that, but you get a feeling for it. The workflow is much easier now, and some of the bugs and quirks that the testers, I wasn’t the only one, I think there were six or seven testers, have already been fixed or in the process of getting fixed. So that’s really cool. Yeah.

Mark Uraine: So that’s very positive because that tells us that the feedback that’s coming from the testers is being relayed back to the developers and the designers. So, really good.

Birgit Pauli-Haack: Yeah. I’m sorry. Go ahead.

Mark Uraine: That’s a healthy system. I was going to say.

Birgit Pauli-Haack: And with the work that Anne does around it, even if the test is just posted on the testing call and the comments, she made issues out of it and relayed it to the developer. So it’s really a great way to get it better fast. I’m looking forward to the testing call number three. And it’s really hard when you want to test things to be creative and come up with a scenario that you want to test that you then want to share. So she does all the creative work on it and putting the testings fractions. So you just need to follow along and see happening with that. It’s a great system.

Mark Uraine: That’s good.

Announcement

Birgit Pauli-Haack: Yeah. So we have one announcement for our show. The Gutenberg Repository on GitHub, the master branch has been renamed to Trunk, and there’s some information in the meeting notes of this week’s meeting. We will share that, of course, in the show notes. What you have to do to make sure that when you push something to the repo or to maintain your fork, that it actually pulls from Trunk now, not from old masters. But GitHub does a fine job in handling that in the redirects, as well, but it’s certainly important to look at that.

Mark Uraine: And if you haven’t visited that repo in a while, GitHub gives you that little prompt about the little commands that you need to do to take care of that process.

Birgit Pauli-Haack: Oh, good. Yeah.

Mark Uraine: Really good.

Birgit Pauli-Haack: Yeah. We at the Gutenberg Nightly, we actually prepared for that about two weeks ago because I needed Andy Fragen to help me with the updates to make sure that the GitHub update or plugin also picks that up. Yeah. It was interesting. Dropped a little bit the ball there, but it’s all good now. We fixed it. Yeah.

Community Contributions

Speaking of testing, Paal Joachim Rohmdahl has put together a tutorial on how to test Gutenberg pull requests before they’re merged. Probably a couple of months ago, the team had produced an automatic GitHub action that created a plug-ins for each PR that is pushed into the repo. But if the link is so buried that you cannot just kind of say, “Oh, I go there and then pick it up” if you want to do that. And Paal did a great job with video and the tutorial to help us do that and pull the accommodating plugins from the repo for testing it in your local environment, without having to do NPM install and starved and all that kind of node stuff there.

Mark Uraine: Yeah. That is a nice little article there by Paal.

Birgit Pauli-Haack: Yeah, and it feeds right into Justin Tadlock of the WPTavern who actually did a nice writeup on the user-friendly, all the user-friendly methods to testing Gutenberg enhancements and bug fixes. And he starts out with, “Okay, if you want to test Gutenberg that goes into the WordPress release, you use the Gutenberg plugin.” That’s pretty much known. And then there’s the Gutenberg Nightly, which is done by the PA in Gutenberg Times when we release a nightly build as a plugin that you can … and then updates you once you installed it, download it from the Gutenberg Times and you install it on your test site. It also has automatic … not automatic update, but you see the update prompt if you use the GitHub Updata by Andy Fragen.

And then the third version … but that’s all for code that is merged into the repo already, that it will be released it’s between a plugin release, so to speak. What the team really needs help with is also testing PRs. So changes and fixes that are already submitted, but are not yet merged to the code base and that need to be reviewed. And for that, there are two methods. One is the gutenberg.run website. And the other one is the new method that Paal Joachim Rohmdahl put together in his tutorial and multiple developers worked on it. So these are the, kind of, four … was the plugin, nightly, Gutenberg Run, and the pull request or PR. So four different versions that are more user-friendly than downloading node stuff and NPM stuff and all that. So definitely a great contribution to expand the reach of the testing calls.

Mark Uraine: Right? Just surface that, right? All that information. And it all will really help.

Birgit Pauli-Haack: So the core team published a proposal to drop IE11. I know last year there was a discussion already, but somebody ran the numbers, the statistics, and it was still too many people using it. And this coming up this year, it dropped actually under 1% usage around the internet. And so they put the proposal together and you can look it up on the core make blog discussion, dropping support for IE11. And you see that there are, I don’t know, 20, 30 people already chimed in and said, “Do it.” It actually has some great advantages especially, the JavaScript packages can be really much, much smaller.

Mark Uraine: Oh, goodness.

Birgit Pauli-Haack: … the polyfill for the iOS 11. So there are other, of course, advantages. So it’s interesting to read through the discussion, I found, just to get a little more in tune to the why is there actually still an IE11 and out there. Yeah, and that’s kind of our announcements and community contributions.

What’s Released – WordPress 5.7 Release Candidate 3

Mark Uraine: Okay. Awesome. And that takes us to what’s released. Let’s see, we had WordPress 5.7 release candidate 3 was released with some late bug fixes. The actual release is scheduled for March 9, 2021. It’s definitely the time to test all your plugins and themes for compatibility. So if you hadn’t received that email already for that alert, make sure you go test your things out with 5.7. 

And let’s see, Robert Anderson, the 5.7 release lead for the block editor, published a few dev notes for the next WordPress version, and these included the changes to the block editor components and blocks, changes in the @wordpress/data API, the new block variation APIs in 5.7, the inner blocks API changes and the new internationalization filters and create I18n changes. So make sure to take a look at those dev notes.

Birgit Pauli-Haack: Yeah, of course they are very developer oriented, but I’m really excited about the inner blocks API change as well as the various changes to the block components.

Mark Uraine: Okay. Yeah. Yeah. Those are in addition to the already published information on the new dynamic hook to filter the content of a single block. So we had discussed that in episode 38, last episode.

Gutenberg 10.1

Birgit Pauli-Haack: Right. And that brings us to Gutenberg 10.1 was released. We will have, of course, the release notes in the show notes, and there was also a fast release afterwards with some bug fixes to prevent some endless loops. That’s always good to have them, but because yeah … but we don’t like them around. 

So this release includes a number of enhancements, a lot of bug fixes and of course, full-site editing, widget and navigation screens, improvements, as well as for the global styles. And we go into the deep end of this in a moment, but they’ll also have a new highlighted reusable block flows and also for the creation flow of reusable blocks.

Mark Uraine: And it allows you to cancel the action. Oh, I remember this was a big issue. Yeah.

Birgit Pauli-Haack: Otherwise you needed to go to the admin. Now, in the creation flow, you can create a reusable block, and Joen Asmussen did actually, a little tutorial on the most prominent reference.org page. That’s the new section because it also feeds into your dashboard, about the reusable blocks. So if you go on the what to know, what’s new in the reusable blocks, you can see that in the tutorial videos, and also, the words to the videos. Another new feature is that the image block toolbar, all the features have been grouped better on the image toolbar. So it’s a little shorter, but it’s also more compact. And now that it’s all in the image block, they also are pushing it to be used on the other toolbars, as well.

In the social links, I have received justification tools. So you can justify them left, right, up and down in the lines. The social links still have the wrong icon. So people would think that, that’s actually sharing links, but they’re not they’re profile links. And somewhere I read a comment said, “Oh, maybe we can have the social links be expandable so you can have custom icons come in.” Right now, you can only use the icons that are already in core, but you cannot add icons it. And I would really love that to use for the podcast. So if you have a podcast on the website and you want to have the profile or the podcast links for all the different places like a Stitcher or Apple or Google, so you want to have those links somewhere on your page. And that would be a perfect block for that. I hope that will be soon an issue filed on GitHub and we can talk about that new feature request.

Enhancements

We also had some enhancements, of course, in this release. One is searching the parent pages has been improved, the sorting algorithm and also the speed. That’s when you create a page and on the right-hand side, you want to make it a child of a parent page to list the parent pages. I really liked that also for the author searches for the buttons. Now, there are controls to justify the space in between, similar to the social links. And then there is, in the create block scaffolding tool, there is now a way to use the register block type from metadata to register the blocks on the server. This is one of the features that were actually requested long time ago, that the blocks are also registered in PHP, and that is now also coming to the scaffolding. Later on in the documentation, we’ll talk about it again.

There was also a greatly improved dragging performance for the focal point picker, and it’s really fast now. You have tested out the focal point picker is for the cover block, as well as for the media and textbook where you can change where the center is on your background image. Yeah. 

And then another enhancement was to improve the block search input to make it accessible with the name and the placeholder, that definitely increases some usability issues there, improves the usability.

API

There’s only one new API, and that extends the update block attributes to provide a different attribute change for each block in the client IDs array. I read that sentence and I don’t think I understood that.

Mark Uraine: Me either, if it’s any consolation.

Birgit Pauli-Haack: So I think it was part of the … if you have the blockers in a block, you can change the block attributes or something like that. Yeah.

Bug Fixes

Mark Uraine: Okay. All right. And there were 22 bug fixes. Some of these included things like adding the border collapse to the default block styles and the table block, the navigation blocks, saw a lot of a few bug fixes here, fixing the navigation links when post type is not a page or a post, fixing the inline style, inheritance, etc. There was a fixed the admin menu scroll on the editor page which is nice, and navigation component saw an increased color and padding specificity. So there was an issue there with the specificity. And fix the cursor on rich text blocks when outline mode is active. So there was a little bug when the outline mode was active.

Experiments

The experiments, wow. We see about four updates in the … or 40, sorry, 40 experiment updates. Let’s see, there’s updating the documentation for the social links and the theme.JSON file, which is important. The navigation screen saw some improvement to the experience for a user creating their first menu. And there was also a … yeah. So the first time coming into that screen and ready to create your menu, right? The experience is a little better. The fixing the positioning of the nested sub menus, and a full-site editing part saw some changes. These include using a modal for the template part creation flow. So definitely starting to embrace modals more in Gutenberg, add an area term for template parts.

Birgit Pauli-Haack: Oh, that’s good. Yeah. That was missing. Yeah.

Mark Uraine: Adding a content menu items preview in the navigation. So when you’re on that sidebar navigating through, you get to see a preview of what that page template looks like or what that template looks like, I should say. Yeah. The site editor saw some changes. One being, adding the template tab to the sidebar. So if you’re in the site editor, on the right side, you’d see blocks or a document and blocks. Well, now you see template and blocks. So it has its own tab now. 

Global styles saw a few changes, widgets, UI components. There were some additional UI components added like the surface component, which is a base layout component. You had the elevation component added, the form group plus the control label components. Like a lot of these little UI pieces here for the UI.

Birgit Pauli-Haack: You probably can use some of the Gutenberg components to actually have a form builder. I need to explore that.

Mark Uraine: It’s quite possible. Adding, there’s now a spinner component.

Birgit Pauli-Haack: Oh, it’s important.

Mark Uraine: Yes, for all those times that people need to wait. Then there were some bugs, of course, related to the full site editing experiments, like fixing the site logo style. So there was an issue there. The site editor saw a lot of fixing the navigation editor block, fix the navigate to link error. Widgets also saw several bug fixes as that’s getting refined. And yeah, just a really good number there, 40.

Birgit Pauli-Haack: On my test, when I tested the full-site editing, there was one task was to add a side logo to the header of it. And I saw in the comments, testers who did this previously, because of course, I waited to the last day or two days to do that. And I used the Nightly and this was already fixed, so my experience with the site logo component was really much, much better than what other people saw. I really liked it. It was really good. So there’s some fast, rapid improvements coming down the full set editing site editor, as well as the template parts and putting it all together here. 

Mark Uraine: I guess that’s proof that they really are working on this thing, right?

Birgit Pauli-Haack: Absolutely. Absolutely. I had one issue filed that the list view. So the list view, previously called the block navigator is now called list view, it’s one of the tabs for icons, from the top bar where you see all the blocks that are on with the indentation, depending on that. And I was only getting the, if I was in the header, I was only getting the header, but not the full page or when I was in the footer was only getting the footer, but not the full page. Well, now they have it as a side bar on the left-hand side, when you open it up next to the block inserter. So you can actually scroll up and down, and then head over to the NC at completely. So that was already fixed when I filed it, but I didn’t know that because I had an older version there. So that’s why the Nightly is definitely a good place to be when you want to test things. So there were the experiments. 

Documentation

Now, we come to the documentation and there have been quite a few updates there that I will share in the show notes actually with the documentation pages there. So there is an update to the outreach page, that hadn’t been updated since, I don’t know, 2018 or so, and quite a few people went through it and suggested additional resources on learning more about how to use the block editor as a developer. Then the create block tutorial was updated with the block JSON updates for the PHP API, and then the block directory reference was actually also exposed in their handbook. It’s a tutorial for submitting a block to the block directory. Go through all the steps there, including the tester. There is a block testing tool before you submit it.

So from the theme.JSON, then there was the font style way decoration transform was removed from the theme.JSON, and now the documentation is also updated. Then there is the documentation for the combo box controls, it has been updated. And then the block variations are added to the FAQ because developers still have seen confusion between block variations and block style variations, and that’s certainly a distinction to make. 

The key concept that’s one of the introduction pages on architecture had been updated to include templates and global styles and made a few changes in between, and then the block meta section to promote the PHP. I already mentioned that was updated there. There were also some code quality changes that the type of center PHP comment, and later on replace some store names and the literals for the block library would usually memorize context for the block props and notes, and also use the ref callback for a few of the components the Iframe, the canvas, the clipboard, the hover block and the block notes. And that’s pretty much from that section.

Tools

Mark Uraine: Excellent. There were 20 tool changes in the tool section. These included adding support for native TypeScript, limiting the NPM version to be 6, along with some others and WPENV setup saw that it’s now using SimpleGit instead of the NodeGit. There were some end-to-end tests that were updated as far as like adding the gallery caption coverage, etc.

Various

And about eight in the various section, the kitchen sink, there was adding a custom post type icon, updating the text color icon. So we’re seeing some more icon work happening and a few others, but Birgit, as you mentioned, we saw the quick release of 10.1.1 of Gutenberg because of that infinite loop that was happening. And also, after the release, Anne McCarthy posted an article elaborating more on the performance improvements that came to Gutenberg 10.1. So that’s on the, what is that? The core?

Birgit Pauli-Haack: Yeah.

Mark Uraine: Yeah.

Birgit Pauli-Haack: Yeah. It pretty much, it has changed that the including of the style sheets happens now only when the block is loaded and not before it wasn’t a big everything, wasn’t a big style sheet. And even if you don’t use the block, you still had the style sheets. Representation was still in the style sheet, so it was pretty big. And with that change, now the file size has been certainly reduced. So that’s pretty much the gist of it. If you need details, go there and the link will be in the show notes. Yeah, and that was our talk about the release. 

What’s in Active Development or Discussed

Let’s see what’s in active development or discussed.

And if you want to know more about what’s around Gutenberg and themes, the team has just published the Gutenberg Themes Roundup, the 40th Roundup of all the discussions that are happening around it, and it’s always a good place to start when you want to catch up with things and also want to know it has the attempts, the discussions about the hybrid approach to themes, the block-based themes and how can parts of the new architecture be applied to conventional themes. That is certainly one of them.

And on that page, I also found a tracking issue of medium projects that Matias has posted where he lists the improvements of cover block, that the smaller project, the big project is full-site editing of course, on global styles and the widgets screen and navigation screen. But that’s not all what the team is working on. So this project, a medium project tracking issue, you can keep up about the improvements that come to the cover block, to the reusable blocks, the image block, the gallery block, the quote block and the alignments overview.

So these are certainly … I liked that the quote, they’re working on getting nested blocks into the quote block. So you can use, instead of just using a paragraph, you can also use images and lists and these kinds of things. So that’s the gallery we talked about. It is refactored in terms of, that the images are loaded as image blocks and have all the features that an image block has.

Mark Uraine: Love that, yes.

Birgit Pauli-Haack: But of course, full-site editing is still a focus and making the theme template creation process more WYSIWYG. I mentioned the persistent list view, I think that is already in the release. And then also, to have all the semantic, complex parts that are in the milestone completed. The new block-based editors for widgets, you can get a preview on that in the customizer now. That’s still in testing of course, but that’s what they’re working on. And then also there are quite a few issues that are queued up once that is all done. So yeah, check out … I think the best way to catch up with that is either the Gutenberg and themes weekly list or the core editor meeting notes where everybody kind of says what they’re working on and also what’s in there.

Mark Uraine: Yeah, those are great updates.

Birgit Pauli-Haack: So really good. And this is the end of our show. Thank you very much for listening. I don’t have any announcements, late announcements or something like that. Do you have anything that you want to share that we didn’t?

Mark Uraine: Nothing.

Birgit Pauli-Haack: All right. So show notes as always, will be published on the gutenbergtimes.com/podcast, and if you have questions, suggestions, or news that you want us to include, please send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. That’s it!

Mark Uraine: Got a little excited on that second one there.

Birgit Pauli-Haack: Thanks for listening. Yeah, well, I knew I was just kind of reading it and kind of blew my mind….

Mark Uraine: Well, listeners. Thank you so much for listening. Birgit, thank you again for doing this episode with me–39, wow.

Birgit Pauli-Haack: It’s always a pleasure seeing you and discussing these things with you. Thank you so much. And we’ll see each other in two weeks for 10.2. Thanks. Bye. Bye everybody.