Changelog #35 Gutenberg 9.6 and 9.7 Releases, Full Site Editing, Pattern Directory and the next Live Q&A

Gutenberg Changelog

00:00 /

In this episode, Birgit and Mark discuss Gutenberg 9.6 and 9.7 Releases, Full Site Editing, Pattern Directory and the upcoming Live Q&A.

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

Show Notes / Transcript

Show Notes

Gutenberg WalkThrough A YouTube channel by Mark Uraine

Gutenberg versions 5.0 to 9.7 (YouTube)
Gutenberg Block Inserter Evolution also on the same Gutenberg Walk-Through Channel.

Understanding the Query Block and Its Importance in Site Editing

Live Q & A: Updates on the WordPress Site-Editor (TNG)
January 29th, 2021 at 11 am ET / 16:00 UTC

Site Editor Demo during State of the Word

Gutenberg Plugin Releases

Gutenberg 9.6 Release Notes
Gutenberg 9.6 Introduces Drag-and-Drop Blocks (…)
Gutenberg 9.7. Release Notes
Gutenberg 9.7 Improves User Experience(…)

Pattern Directory

Transcript

Listener Question

So for this episode, we also have a listener question that comes from Jeremy Techtmann, and he wrote, “The query blog! I have used it locally in my FSE, like Full Site Editing. And I’m not sure why it is only available in FSE and not just in the Gutenberg plugin in general. Yes, it might not be for all users (clients) to use but it would be great to build some nice custom patterns or reusable blocks with it.”

Now Mark, you worked on the query blog. Is it ready for all users or still an experimental state? Like the whole full site editing project?

Mark Uraine: Yeah. It’s definitely still going through some iterations on getting it to function just right and all the settings in the right places and stuff. But I totally hear what Jeremy is saying.

The features that it offers are so robust that right now we placed it into the full site editor to allow for the more advanced users who are building the sites to really get it, take advantage of it and it will serve its purpose there. But we’re also looking at variations of it that might be a little more focused that users can benefit from. In which case, those variations will be in the regular flow for users who are just building their pages and writing some content, something like the latest post block will be a variation of that block. So Jeremy, you bring up a great question, and I know we’re looking at ways to really try to bring it and bring it to both areas in intuitive ways.

Birgit Pauli-Haack: Mm-hmm, yeah. Well, yeah, thank you, Jeremy. And many people have those questions, as well. And a few weeks ago, Justin Tadlock over at the WPTavern found time to get into the depth of the query block and also triggered by a few readers questions. So we will definitely share that article also in the show notes. We just noticed that the last recording of the Gutenberg Changelog was December 4th. So it’s been four weeks and there have been a lot of happenings going on.

Live Q&A Announcement

For now, we have an announcement. The next live Q and A on the Gutenberg Times YouTube channel will be on January 29 at 11:00 AM Eastern, 8:00 Pacific or 1600 UTC. It’s our fourth event on Full Site Editing and we have some awesome guests. One is Carolina Nymark, she is working on the themes review team and also has a site that’s called fullsiteediting.com with a course on creating themes for full site editing.

And then we have Ari Stathopoulos, who also landed a block-based theme that is built for full site editing in the theme directory and also works on the same team, and then Anne McCarthy. And yeah, so Carolina and Ari, as I said, are members of the theme review team. Both have a block-based themes in their repository and they are also working on the Twenty Twenty-One block theme. It’s now renamed to TT-1 theme. And that’s also a test for the full site editing modules.

Yeah. So, and Anne McCarthy runs the full site editing outreach experiments program with a group of site builders and theme developers to make sure that the new experience gives everyone what they need to be successful in the new era of WordPress. We will have a fun hour discussing the current stage of features and answering all your questions. Again, January 29 at 11:00 AM Eastern, 1600 UTC. You can register via a link on the Gutenberg Times homepage or look into the show notes.

Mark Uraine: That sounds like a great Q and A session there, Birgit. I know I’ve been recently revamping some of my own sites with some customized themes. And I was looking at full block set of editing or making them completely full site editing compatible, but I keep running into … once you go that direction, it gets rid of the menus page and the customizer and editing the menu block or the navigation block inside the editor is so trying right now. I kept running into a block, I couldn’t get it to work. And so I had to revert back, which was interesting. I’d love to hear about how Carolina or Ari are handling some of those situations with theirs.

Birgit Pauli-Haack: Yeah. Yeah, me, too. I used the navigation block for on-page navigation but not for the theme. So yeah, it’s going to be interesting. If you are interested in actually being in the group of the full, FSE outreach experiments, there is a channel on the WordPress Slack that you can join. And we are just going through the first test of a test script for the full site editing.

Mark Uraine: For full site editing?

Birgit Pauli-Haack: Yeah so, and you can still join because the deadline for this test is January 13. So that’s another, well almost another week. But next week, so you need to hurry a bit.

Mark Uraine: Are you saying to join, to do that test or join to … okay, join to actually take the tests and provide your own feedback. Excellent.

Birgit Pauli-Haack: Right, right, right. Yeah. But you can always join up later. I’m sure there will be many, many more themes in the future on Twenty Twenty-One.

Community Contributions

Mark Uraine: Yes, very true. So Birgit, while we were away in between our shows, a State of the Word happened virtually this year with Matt Mullenweg. And I’m sure you all listeners can hear about it or read about it on the WordPress news sites or newsletter on the Gutenberg Times. Birgit, you have a post about the three-minute site editor demo by Joen Asmussen, right?

Birgit Pauli-Haack: Yeah. He did a great demo and I thought it was short enough. And so I did an excerpt from the video, so you don’t have to track it down and listen to 190 minutes or something like that. And he did a great job showing off the new features there and how it’s going to work in theory and on his site. So check it out on the Gutenberg Times site editor demo. We also did a transcript of the video, so if you rather read it.

Mark Uraine: Awesome. Yeah. That I remember watching that demo. That’s really the piece that stuck out to me the most from the State of the Word was just seeing that all together and come to fruition. It was like, yes, I got so excited about it.

Gutenberg 9.6 and 9.7 Releases

And so, we’ve got two Gutenberg releases that we’re going to talk about this show. We’ve got 9.6, which was released in December, on December 30, followed by some smaller releases, 9.6.1 and 9.6.2, and then 9.7 released on January 6th of this year.

So the format we’re going through today, folks, is we’re going to go through the big sections again. And we’ll talk about each release combined, what came with each, released under the main sections.

Features

So the first one is the features. What are the new features that we’re seeing come right now? In 9.6, we saw, which is one of my very longing desires to happen, is allowing of dragging a block from the inserter into the page or into the canvas they say, right? So you don’t have to just click the block to add it now. You can drag it and then put it where you want it in the page, whether that’s higher up or little lower down. I love the drag and drop.

Birgit Pauli-Haack: Me, too. Me, too.

Mark Uraine: Yeah. And then buttons, have a new variation for them. So you can change from a horizontal group of buttons to a vertical group of buttons.

Birgit Pauli-Haack: Oh, that’s neat.

Mark Uraine: And stack them, yeah. Those were all both with 9.6.

With 9.7, we saw an additional drag and drop for patterns from the inserter. So while you were able to grab the blocks from 9.6, now in 9.7, you can also grab the patterns and drag them into your page. Really good stuff.

Enhancements

There were about six enhancements between the two versions together. In 9.6, the buttons block. Also another enhancement there, had a change in position of the link popover. So when you would add a link to the button, the popover used to stay centered under the entire block, I believe. But now it follows you along with whatever button you’re clicking. It’s still centered under the button. I think I’d like to have it left justified, so it aligns with the button toolbar. But nevertheless, it’s at least following the buttons, which is a great plus there.

With 9.7, there were five enhancements, two I want to talk about. Improving the reusable blocks UI by relying on the multi-entity save flow. So if you, dear listeners, are familiar, there’s a multi-entity saving flow in the full site editor. If you make a change to the header and make a change to your page, when you go to save it all, it lets you know, like, “Hey, you’ve got a few different things that you’ve made changes to.” Some are global, some are not. Well, this has been added to the reusable blocks now. So if you change anything in the reusable blocks, when you go to save it, it’ll let you know there’s a change to your reusable blocks. And they even moved the name of the block, your custom name into the sidebar, as well.

Birgit Pauli-Haack: Oh, good, yeah.

Mark Uraine: Yeah. And then there’s the show the insertion point indicator between the in between inserter. So, that’s a lot of words right there. Basically, if you notice, when you go to hover in between a few blocks, you get this nice little inserter button and now there’s even a line that animates its way out in 9.7. So it shows you where the insertion block is happening. I believe that’s what we’re talking about there.

APIs

There were nine total new APIs in 9.6, we saw seven of them. One being the use block API version two and another one being, fix the supporting external templates. There are a couple PRs there for that one.

Birgit Pauli-Haack: Right. And that’s for the create block scaffolding theme.

Mark Uraine: Yeah, sorry. Good catch. In 9.7, the create block, as well, also allows to list the MPM packages to be installed in the template.

Bug Fixes

And yeah, let’s see, bug fixes in both releases had combined to a total of 42, right? While we didn’t have a whole lot of features, we had some really good features but we saw a lot more on bug fixes these times around. So 9.6 saw 25 bug fixes.

The widget screen, we saw a fix a block select on focus. There was removing CSS custom property in the code block, fixing regressions on the code block, popover flickering on small screens, all sorts of little things like this.

The 9.6.1 saw including the block CSS and the release for full site editing themes. And then 9.6.2 saw fix the toolbar controls in the widget screen, and fixing the slash inserter in the widget screen. So we’re seeing a lot of help happening, a lot of improvements happening to the widget screen right now, which is good.

9.7 also saw about 14 bug fixes. I think one I’ll mention is fixing the text color dropdown. Didn’t show up after clicking it for the first time. So that’s been fixed. But yeah, what else did we see in these releases, Birgit?

Performance

Birgit Pauli-Haack: Yeah. There is one performance change and this now splitting the core blocks assets on loading. So it only loads what it needs, which is definitely a performance enhancement.

Experiments

There were 37 changes in total in the experiments. And experiments, that’s pretty much the full site editing part because what also is in experiments is the navigation and the widget screen and the global styles. But right now everybody is almost focusing on the widget screen or the full site editing. And there was a lot of work done on the block query, which is the query loop with new postings and loop inside the query, kind of second loop or something.

Mark Uraine: Yeah. You have the query block and then you have the query loop block, which is inside the query, yeah.

Birgit Pauli-Haack: And then also allowing the query block to inherit a global query arguments and also adhere to the URL arguments. And then there were two changes, two blocks. One is to the comment form, to add block styles to it. And then the tag cloud block, got some styles and alignment adjustments. Further down in the full site editing infrastructure, that’s now a separate module or aspect of it. So that the inserter on the site editor now behaves more like a popover and introduced template editing mode inside the post editor.

So we are now getting into a place where I would say insurgent was. I don’t know if you saw the movie, but it’s a little bit nested now that you can change either your post template or your post content and change also the header of your site because you just see it like that. And it then will, what you mentioned, tell you in the sidebar that two things have changed and that you have save in that now.

Mark Uraine: Right. Multi entity saving, yeah.

Birgit Pauli-Haack: And then there were some changes on the style system but it was also more fixes was really nothing but standard.

So 9.7, there was a fix on the RSS block. The navigation block had the color links fixed and global styles got more controls for padding. When you go and watch the site editor video on the Gutenberg Times, you also see how the global styles come in. That you can actually, once sidebar screen, you can change the color settings for your whole website. And that’s really cool, I like that so much. And yeah, now you can also do some padding controls on that.

Mark Uraine: Change the color for the whole site. That will take away from my productivity completely. I will spend hours changing the color of a website.

Birgit Pauli-Haack: Me, too. Me, too. But I find it very creative and I can change it every day, you know?

Mark Uraine: Oh, that’s funny.

Documentation

So documentation saw about 15 total updates, 9.6 had 11 of those, added escaping functions to the code examples. We saw minor changes to the release documentation for clarity, capitalize the JavaScript in accordance with the Wordmark.

Birgit Pauli-Haack: Hard, hard.

Mark Uraine: Added a document explaining the different block API versions. So this was what I was talking about up above, the API version two. So I’m glad there’s a page or a document explaining this now.

Birgit Pauli-Haack: Yeah. Me, too.

Mark Uraine: Update the registration examples to use API version two.

Birgit Pauli-Haack: But the capitalized JavaScript that could be a linter function light.

Mark Uraine: Right? Why not?

Code Quality

And then code quality saw about 30 updates, 30 changes. 9.6, there was a template part padding uses variables now. The scope for the image block style variations is to only the image block. So the style variations are very focused to the image block. They’re refactoring the image blocks, image editing tools into separate components. And there were a couple others, auditing the variables in the style sheet. So of course over time, you get technical debt and style sheets become bloated. So we just kind of had to … Joen, and I think went through and trimmed that down. The group block padding uses variables now and using a consistent way to check the right to left function, there is RTL.

Birgit Pauli-Haack: Yeah, yeah. We get a few complaints there that it’s a little wonky. Wonky being a technical term, right? Wonky and then left to right languages.

Mark Uraine: There is something weird because I will … so many times I’ll copy over a Hebrew word, which is right to left and paste it into the editor and it’s backwards in the editor. But if I save the page and look at it on the front end, it’s correct. It’s reading correctly.

Birgit Pauli-Haack: Oh, so the difference between the editor and the front end, yeah.

Mark Uraine: Yeah. There’s something weird there. So many times that happens to me.

Birgit Pauli-Haack: Well, it’s a feature.

Mark Uraine: No, no.

Birgit Pauli-Haack: You want to see it in mirror imaging because that’s pretty much what it is. Yeah, it’s got mirror images. Yeah, flips at the wrong side.

Tools

Yeah, and then we had 27 changes on tools, 17 in 9.6 and 10 in 9.7.

So there is a lot of also stabilizing the tools that people use or developer tools, I’m just pointing out two of them. One is that WP prettier script got an update. We are prettier now. That’s a linting … no. Yeah, a linting tool. And then also the local environment that comes with Gutenberg or that you can have with Gutenberg is now supporting Xdebug for the PHP developers.

Various

And that brings us into the various section. And we have 34 of those, 26 in 9.6 and eight in 9.7. But we know that the various section is things that did not fit somewhere else.

And first up is, a lot of work had been done for the verse block. Poets will be enlightened, the support for custom padding, font family and font size, and also update the CSS for the front end and the editor. The search block also got some improvements and removing the button only option from the UI is actually an issue that I created because it wouldn’t work. And I thought, “Okay, might as well remove it if it doesn’t work because otherwise it confuses everybody.”

And the search block also is, you can now use the M values for the padding and then you change the labels for the vertical align options. And the social list block is now aligned right able on the publishing page and the preview. So you can align them right instead of left or center.

Mark Uraine: Okay. Oh, okay. I see it, the way that particular change log item is worded. It’s a little confusing, huh? I see what you’re saying, though.

Birgit Pauli-Haack: It’s not the only one, but yeah, it’s the one I picked. And then the example preview for the video block was added.

Now the tag cloud block, that’s in 9.7. The tag cloud block, you can now use for all taxonomies. So until now, it only had the drop-down box for using tags or categories. But if you had taxonomies and custom posts blocks that wouldn’t see it. Now that works.

Mark Uraine: That’s excellent. That closes us out, right?

Birgit Pauli-Haack: Yeah. That was the Changelog for the Gutenberg releases. What also happened since the last episode was that 5.6 was released and that was quite a success. And that also can be, we’ll link to the field guide we talked about here on the Changelog quite often before it was released. So, just mentioning it.

Active Development – Pattern Directory

Mark Uraine: Yeah, excellent. And so, let’s talk about some things that are actively being developed right now. The pattern directory, which you mentioned earlier in the show. The pattern directory is starting to see a lot of pickup right now. The Meta team has been working on this and they aren’t wasting any time. Late in October, Alex Shiels had kicked off the work for the block pattern directory in a discussion on a post we’ll share in the notes, but now there’s a GitHub repository for it. There’s a project board for the initial version and a list of tasks and issues that are ready to be tackled. So if anybody’s interested in getting involved with this, now’s the time and I’ll rattle off a few of the issues, Birgit, that are out there.

There’s one in particular about the website of the pattern directory for wordpress.org, right? We know the theme has a directory page, the plugins have a directory page. Well these patterns are going to probably need something visual like this on the .org website.

Birgit Pauli-Haack: Well sure, yeah.

Mark Uraine: So, designing that and building that out, that’s going to be a fun project. Another one is the pattern directory support in the core editor. So users can search and insert a block pattern directory or block pattern from their inserter. Similar to the block directory, I would imagine, that focused on patterns, of course.

Birgit Pauli-Haack: Yeah. And also without the installation steps.

Mark Uraine: Good point.

Birgit Pauli-Haack: So the goal is to actually have the pattern to just drop into your post or page directly from the directory.

Mark Uraine: How cool is that?

Birgit Pauli-Haack: That would be really cool. I think that makes it so much more superior to the block directory for the block editor.

Mark Uraine: Mm-hmm. To make that happen, do you think we’d need to … the blocks would have to be somewhat static in a way, right? They really couldn’t … it would just be putting out the HTML onto the page. They wouldn’t be dynamic blocks, like a form block or anything as part of the pattern.

Birgit Pauli-Haack: Well, you could use the latest post block because you’re only referencing it. As long as they’re core blocks.

Mark Uraine: Yes.

Birgit Pauli-Haack: Yeah. You can reference the core block and it’s only the comment in the content. So theoretically it would be possible, but yeah, you’re right. It would be just a combination about different core blocks that come together.

Mark Uraine: There you go. That’s a good way to say it, thank you. Yeah.

There are a couple others like a pattern submission tool that will need to be developed, so people can upload their own patterns. A pattern directory API for the back end of the site, a rest API endpoint new pattern, a CPT custom post type permissions for creating and editing. Yeah. Lots of work to be done. So everybody come join us. Let’s make this pattern directory.

Birgit Pauli-Haack: Yeah. I’m really excited about that. Once you have your theme and combining some blocks and finding sections that you can add to your website that are just already built pretty much and they add into it. Yeah, it’s going to be really cool.

Mark Uraine: I love putting really interesting patterns onto the page and then digging into like, how did they do this now? How did they lay out that pattern? One of the fun ones, of course, is in Twenty Twenty-One, the default theme, right? Where there’s a pattern there of overlaying images, right? So I love dropping that in and being like, how did they get this to work now? Yes, of course, CSS is involved but it’s fun to see what they’re doing.

Birgit Pauli-Haack: Yeah so, it’s a very new effort, the block patterns. So if you want to contribute and if it’s just opinion, have opinion will travel, and just test the early versions and documentation and code. It’s a fun project and Kelly and Alex are really working on it now from the Meta team.

Mark Uraine: Yeah. I think I saw Ian in there, as well.

Birgit Pauli-Haack: Ian, yeah. Ian Dunne, yes.

Mark Uraine: Ian Dunn, yeah.

Birgit Pauli-Haack: And a few others, sorry if I don’t mention you now but I get myself smarter and find out who’s all, who came on it.

Yeah, that brings us to the end of the show. And I just wanted to remind everyone, January 29, 2021 at 11:00 AM Eastern, 1600 UTC is our next live Q and A. And we are actually preparing a few more for February and March and we’re really looking forward to those.

As always, the show notes will be published on Gutenbergtimes.com/podcast. And if you have questions, suggestions or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Oh, this is it for now. Thank you all for listening and thank you Mark for doing this with me again.

Mark Uraine: Yes. Thank you, Birgit.

Birgit Pauli-Haack: In 2021.

Mark Uraine: Yeah. Hey, Happy New Year, everybody. Let’s make this year better.

Birgit Pauli-Haack: Low bar, right? All right, let’s get out of here.

Mark Uraine: Bye-bye.

Birgit Pauli-Haack: Thank you so much, bye-bye.