Gutenberg Changelog #99 – WordPress 6.6 + 6.5.3, Gutenberg 18.1 + 18.2, and Create Block Theme Updates

Gutenberg Changelog 99 with Sarah Norris and Birgit Pauli-Haack
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #99 - WordPress 6.6 + 6.5.3, Gutenberg 18.1 + 18.2, and Create Block Theme Updates
Loading
/

In this episode, Sarah Norris and Birgit Pauli-Haack discuss WordPress 6.6 and 6.5.3, Gutenberg 18.1 + 18.2 and Create Block Theme Updates

Show Notes / Transcript

Show Notes

Special Guest: Sarah Norris

JavaScript Developer 6.4 editor tech co-lead / Core team rep

Announcements

Create Block Theme plugin

WordPress

WordPress 6.5.3 RC1 is now available

Gutenberg

Interactivity API Resources:

What’s discussed:

Summary of Hallway Hangout on what’s next in Gutenberg

Roadmap to 6.6

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 99th episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about WordPress 6.6, WordPress 6.5.3, Gutenberg 18.1 and 18.2, and the create block theme updates. I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and full-time core contributor to the WordPress Open Source project, sponsored by Automattic’s Five for the Future program. I’m so happy that Sarah Norris joins us again today. Some of you already know her as she has been a guest on the show before. Sarah is a core contributor on the Gutenberg project, also sponsored by Automattic, and this year’s core team rep, together with Joe McGill. Sarah, how are you today?

Sarah Norris: I’m good, thank you. Yeah, I’m doing really well. I’m celebrating a few recent releases at the moment. We got the font library has just come out in 6.5. I was working closely with some of the other contributors to that. Then we’ve also got a brand-new revamped Create Block Theme plugin, a few releases, we’re probably going to talk about them. Also, celebrating a couple of releases there as well. I’m also looking forward to this year’s WordCamp Europe. Really looking forward to some of the talks. We’ve got talks about playground, the interactivity API. There’s quite a few talks about block themes as well, so I’m really looking forward to all of that.

Birgit Pauli-Haack: WordCamp Europe has quite a great schedule, and if you haven’t checked it out, dear listeners, do so now because it also will be live-streamed. If you are interested in Block Editor and you’re listening, so I am assuming you are, you will see quite a few great talks. As Sarah said, playground, interactivity, API. It’s also HTML API workshop. I don’t know if that will be live-streamed, but Dennis Snell is the programmer of it and he’s also a great teacher and educator, so I’m looking forward to his workshop. These are exciting times in WordPress innovation and tooling. I just got back from WordCamp Leipzig and people are excited about the new revamped Create Block Theme plugin, and I came back on the Monday and on Tuesday, I think you released a new version, so everything that I showed had a different interface now, but I think it made it so much clearer.

The people are excited about that because that’s a no-code way to create themes, that’s we’ll talk about in a few minutes, and they’re also very excited about the upcoming grid layouts that are coming to Gutenberg also in July to WordPress 6.6. WordCamp Leipzig also was a full-German WordCamp, which is always a little bit unusual for me because I’m doing technical stuff mostly in English. I’m really happy to catch up with the German webcam community. 

Announcements

Dear listeners, as you notice, we took a break in April, but we are back in full force. Before we head into the vastness of the Block Editor and WordPress happenings, I wanted to alert you to the next Developer Hours on Tuesday, May 14th, 2024 at 1500 UTC, that’s 9:00 AM Eastern Daylight, and you hear my hesitation. Time zones are the bane of my existence, so double check it, please.

It’s a very important Developer Hours. Nick Diego and Ryan Welcher will show plugin developers and those who have used Meta boxes before. It’s kind of a legacy feature, but it has been around for a long time to manage custom fields, and while Meta boxes are supported in the Block Editor, they’re considered legacy and do not provide an ideal user experience that we came to know. Then since the session, Nick and Ryan will explore current options available to custom plugin developers and theme settings in the Block Editor, so you can manage metadata using React and native WordPress components. You will learn how to use the slots in the sidebar and implement a model for additional.

Settings, fetch and save post metadata using JavaScript and also, connect post metadata to blocks. There are multiple ways to do this now in the Block Editor. By the end of the session, they will have an open discussion about the blockers, what prevents developers from migrating away from Meta boxes and possible solutions. It’s a great session for whoever is still, and there are many, many people who are still working with plugins that are using Meta boxes for their data. I think this is the start of a movement away from it. It also is a good place to gather the feedback what is actually a blocker, so it can be resolved in the Block Editor. May 14th, 2024 at 1500 UTC. All right, do you have any thoughts on this or ideas?

Sarah Norris: I mean, it sounds amazing. I think whenever there’s so many options, there often is with WordPress how to do something or just coding in general. It’s always good to go through them and find other people’s thoughts and maybe you hear a better idea on how you are doing it, but yeah, especially with custom Meta boxes. That’s good.

Birgit Pauli-Haack: There’s also been a GitHub issue or PR that the Meta boxes that are now on the bottom of the screen will be moved into a modal that is you have to click it to open it up from the top toolbar, and that way, now the post editor can also be loaded in the iframe and then have a better user experience and can better be styled and all that. The Meta boxes are a little bit one step away from the first screen, which is also good because the initial experience of having an empty post and then some gray boxes underneath is not a very intuitive interface either. I think with that PR also have been around for a while and discussed. I will link to it also in the show notes so you have the full context about things.

It’s going to be a shift because most of it is from PHP to JavaScript and that shift has not been easy for a lot of developers, including me. I learned JavaScript the third time now and I’m still not proficient. I learned the first time JavaScript was in 2023 when I was building my own static, my own static page builder. Not 2023, no, 2003, so it was one of the early JavaScript and it was a hell to go through. 

Community Contributions

Anyway, so let’s go to our community contribution section. I’m just giving a shout-out to Anne McCarthy who put together a high-level demonstration of WordPress Playground.

WordPress Playground has been the most surprising tool of 2023 for a lot of people, including me, and I have fallen in love with it because it is a tool without having a server, without needing to install PHP or SQL Server or something like that. You have a link and you can install, pre-install a plugin that you can then preview and you don’t have to set up anything. Once you close your browser, it’s all gone. It’s in the ether, but you could, if you wanted to, have a storage option there. Anne McCarthy shows you what else can be done with Playground. The YouTube video will be in the show notes, of course. It also gives me great pleasure to give you all a sneak preview or sneak knowledge, pre-knowledge about the upcoming Blueprint community project. What are Blueprints?

Blueprints are the configuration files for Playground where you can use WPCLI, you can use import content, you can use PHP to pre-configure the Playground instance that you link to. Right now, there’s a gallery, a pre-version one gallery of 10 Blueprints. The community project is that whoever uses Playground can share their Blueprints with the world so other people can use it too and adopt it to their needs for their projects. It was great to figure that out and put this together. I think we will start later this month to make public announcements, but you can check it out and maybe check out some of those Blueprints already. 

Create Block Theme Updates

I know you worked with Create Block Theme plugin preview. How’s that going? Do you get any numbers or so? How many people click on that link?

Sarah Norris: Actually, I haven’t checked. That sounds something to see how many people are using it. I know we’ve got great feedback about it and I think just in general, it’s a really good tool to preview plugins before you install it on your site, especially if you’re looking for a specific functionality from a plugin for a single website rather than something that’s going to be used everywhere, like all websites. It’s a great way to preview changes. I’ve not seen this Blueprint gallery before as well. This is a great idea too. Recently for the Automattic themes repo, we’ve added a Playground theme previewer, so that fits into this, like the theme tester Blueprint. A good example.

Birgit Pauli-Haack: I think there are a few kinks to work out, and I know that Adam Zielinski and his team are really working quite a bit on making things better. One kink is that when you upload, so you prepare the code, the content that you want to share with a Blueprint or with a Playground or template, a theme demo or so, you prepare the content in the Block Editor. You can export it normally with the WordPress export feature, but when you use it in a Blueprint, the images won’t come through, so you need to upload the images to a space where Blueprint has access to. I think the team is working on how to resolve that or make it a better experience. One of the theme testing Blueprints has that problem that the images point to a site that doesn’t have cross-site allowances problem, the course problem.

There are still a few kinks to work out. There’s one Blueprint in there where you can use WPCLI and add an attachment to a post, but then you need to upload that image beforehand. It’s an interesting conundrum, or how to solve it. The whole Blueprint features steps that you can automatically log in, you can automatically install plugins as many as you need. You can install a certain theme, you can upload some content. I actually use the WPCLI to add 12 posts automatically, so a query block has some content in there and not just the hello world. There are quite a few things that you can make those previews or testings a little bit more refined so you don’t have to have so much set up for some things, so it’s good. Yes, Create Block Theme updates, well, you brought it, brought some updates here to us.

Sarah Norris: We’ve had a lot of updates on this, yes, Birgit. We’re trying to keep up with Gutenberg, maybe.

Birgit Pauli-Haack: Oh, join the club.

Sarah Norris: We’ve recently released the 2.1 version and then we’ve had a few point minor releases after that as well. We’re currently up to 2.1.3. Basically, the latest changes are a big revamp of the UI with an intentional move from the WP admin pages to the panel in the editor. I think for a while we’ve had a Create Block Theme. It uses a little spanner icon in the top right of the editor, so we’re trying to move a lot more of the options to that panel. Instead of having to jump between the WP admin pages and the editor, you should be able to stay in the editor for most of the tooling. We’ve also added a lot more options for how a theme is saved before it’s exported and there’s a lot more control, giving users a lot more control over how the theme is saved as well. Because previously, Create Block Theme was doing magic behind the scenes and it wasn’t obvious what was going on. We’ve tried to surface that a little bit better and it makes it more clear what’s happening to the theme export before you start importing it to other places.

Birgit Pauli-Haack: Before we dive in into the details, for somebody who hasn’t heard about the plugin yet, the Create Block Theme plugin, what does it actually do? What is it for?

Sarah Norris: It’s to fill a gap basically between creating themes in the editor, which is obviously already really good and improves almost by the hour, too many updates, but most of the editor changes are very centric to the editor and therefore, to the single instance of the site that you’re working on. Create Block Theme tries to fill a gap where you’re making changes in the editor, and then it lets you export those changes so you can import them to either a standalone theme, so you can then do whatever you want with that, either make it open source, have it as a proprietary product. Any options that you can have for any other theme, but it lets you do it all from within the editor and hopefully, makes just theming in general a lot easier for no-code. We’ve tried to, because the people who work on it generally used to coding themes as well, we tried to make it friendly for both people who like to code and no-code as well.

Birgit Pauli-Haack: The workflow to create a theme would be to install a theme, preferably Twenty Twenty Four, but any block theme would do, make your changes and then decide if you want to have a child theme of that or a clone of that theme that has no connection to the parent theme, and put the changes that you make in the Global Styles, like the colors and the topography and the dimensions, and any of that changes. When a user makes them in the Block Editor, in the Site Editor, they’re stored in the database, so they’re not getting into the files. Like the template files, if you create a new template, it’s stored in the database. If you add new custom colors, they’re stored in the database. When you choose the Create Block Theme, everything of those changes that you made in the editor will be replicated or duplicated in the files for a new theme or whatever theme you decide to do. Is that correct?

Sarah Norris: Yeah, that’s exactly it. I guess a quick way to sum it up would be instead of having user changes, it elevates those changes to the theme level and then you can do whatever you would normally like to do with a theme.

Birgit Pauli-Haack: I did a test of a few things, and I really enjoyed starting from a blank theme, which is not entirely blank. You get the theme JSON and you get the index HTML and you get whatever you need for a fully functioning theme. It’s just not a styled line, and then you can add your colors and your typography and upload the fonts. What are the things that are now in the new UI that you can decide on?

Sarah Norris: The main differences are how you save the changes to your active theme. Previously, you could just save all the changes and it’d just be like one option and you didn’t really know how things were being saved, and then you could export and you could do a one-click save and export as well, so it bundled loads of functionality into one button. With the new changes and the new UI, we’ve tried to break those out a lot more, so it gives you more control over how the theme is being saved, and then you can choose what’s exported as well. The things that we’ve separated out are fonts, so there’s now a save fonts option, so that lets you opt into including any installed fonts, and it also will delete any deactivated fonts from the current theme as well.

You can use the new font library basically as well with a new theme to install those fonts, and then you have more options on how they’re included in the theme. You also can optionally include your Global Styles changes. Like we’ve just been talking about, they were automatically being saved, so from the database into the theme level. You probably will want to do that for all changes, but now this is optional as well. In case you’ve made some changes maybe to test things out, or maybe you were testing out some typography and some colors and then you don’t like them, you cannot save them to your theme if you don’t want to do that. There’s also, we’ve separated out saving any template changes. This means any block edits or block markup changes that you make to templates will be included by default, but you can optionally not include them as well.

Birgit Pauli-Haack: That’s very cool.

Sarah Norris: It just gives you more control. Again, if you’ve just been testing something, you might not want to include it in your theme, but probably likely you’ve been changing it to update the theme. Probably most of the time you will want to include the changes. We’ve also made it optional to disallow Create Block Theme from editing any existing templates to say you’ve cloned a theme that already includes a bunch of templates and you really like the way they’re set up. Maybe the text is already translatable, and this might be good if you’ve edited block markup in the templates manually. Maybe if you’re making the indentation look nice, anything like that, we’ve now got an option that Create Block Theme will only process. Processes like making text translatable or localizing images, it will only process the templates that you’ve edited within the editor and it will leave any previous templates that came with the theme.

Then we’ve also got a few other smaller things that are turned off by default because we found that most people probably want them off by default. These are making text strings translatable. Again, Create Block Theme used to do this for everything, so now it’s optional, so in case you don’t want that happening. It will also move any image assets. If you’ve uploaded images to templates, there’s an option to include these images in the theme assets folder and change the URL to be relative to the theme. That’s optional as well. If you turn that off, it won’t move any images and it’ll just leave them local instead of on the theme. Then the final one, which I think is probably the smallest change, but it is a major one, is optionally removing the ref attribute from the navigation book.

The ref attribute is important because it references a specific menu, but because the specific menu is local to the site instance, when you export a theme, that’s not going to exist on every site. We did explore doing this for every single navigation block, but obviously, not everyone’s exporting a theme. Some people just want to save a theme, and then they’ve got a collection of local themes that they use. It’s not always applicable, and it can mean that it visually looks like you’ve lost an entire menu when all of this happens. It’s just lost its reference to the existing menu. Alternatively to that, if you are exporting a theme and you want to distribute it on the theme directory or anywhere else, you probably don’t want to reference a menu that doesn’t exist anywhere else. It maybe sounds confusing if you don’t know the block markup for the navigation block. If you do, you probably, well, hopefully, when you see the option, you’re like, “Oh yeah, I do want to do that please remove over.”

Birgit Pauli-Haack: It doesn’t assume things that are there that are not there, and then it’s not a good experience for a new user of a theme. Yeah, of course.

Sarah Norris: Yeah, makes sense.

Birgit Pauli-Haack: Totally makes sense. How are Patterns actually treated in the Create Block Theme?

Sarah Norris: For pattern management, that’s like the next thing we’re looking at because it’s a bigger beast to tackle, and interesting how it’s going to work with the changes in 6.6, but we can talk about those later, maybe. Currently, the main interaction with Patterns at the moment is that with the options, I’ve just gone through, the save options, with making text translatable and moving the image assets into the theme assets folder. Both of those things currently require PHP. Probably if you’ve been using the editor to make any changes and haven’t jumped into the code, everything is going to be in HTML. Create Block Theme will move these references into a PHP file, which is by creating a pattern. Because that’s currently the only way or one of the best ways, I guess, to make text translatable and to reference image assets from the theme director. That’s currently the only interaction with Patterns at the moment. We are hoping to maybe introduce pattern management, or at least iteratively make the pattern management experience better when using Gutenberg. That’s our hope anyway.

Birgit Pauli-Haack: Patterns have been around for a long time. Well, it’s not the Patterns that were around for a long time, it’s a reusable block that can be used as a template part, for instance, and it’s now called Sync Pattern. They had its own import export feature in WordPress or still have that you can import Patterns via JSON where you can copy paste them from the pattern directory. There are many different ways to get to Patterns, so having one feature in Create Block plugin, that’s going to be a complex piece to tackle. Yeah, definitely. They also have the references to the original Patterns when you have the synced overrides. That’s something we are going to talk about. It’s going to be real complex. What I also like is that you can update the metadata of your new theme within the sidebar with a plugin, so you can change the name of it and you can change the description and do it all right there, so you really don’t have to touch code for that. That is a really good thing. What else? Oh, yes. Yeah, what else?

Sarah Norris: Like you said, we’ve got a new metadata editor within the editor. You can now open a modal, I guess similar to the custom method fields. It just means, again, all the information goes into the readme.txt file, so probably anyone who’s editing that information already is familiar with editing the read me, but it just means that you don’t need to jump into your code editor and you can stay in the WordPress editor. Then, yeah, the other big thing is that you can now view your theme JSON file, so the currently active themes JSON file. Again, we’ve got a view to enable editing of this as well in the editor. Again, just saving you jumping in between code editor and on WordPress. That’s another exciting one. Hopefully, saves people time.

Birgit Pauli-Haack: That was actually the biggest, whoa. When I demoed that, I added a few custom colors and showed them in the editor and then saved them. The only barrier is you have to do two saves, you have to save it in the database or on the editor, and then you have to click on save and the Create Block plugin sidebar. Then I was able to show them, okay, and now let’s look at the theme JSON, and it shows the little custom colors palette there. It was really a big help to show the power of this Great Block Theme plugin.

Sarah Norris: It’s nice.

Birgit Pauli-Haack: Do you want to go through some of the changes from the change log of the plugin?

Sarah Norris: Yes. Let’s see what we haven’t talked about. We’ve talked about the UI refactor. One of the recent big changes has been now Create Block Theme will process any background images on the Group Block, which it previously didn’t do. I know that, that’s probably a really popular theme option when people are adding background images to the Group Block. Now those will be exported with a Create Block Theme export as well.

Birgit Pauli-Haack: That’s great. I know I saw an issue also already used for one of the features that comes in 18.1, is the background for the whole site that you can add. That’s on the roadmap for that.

Sarah Norris: Yeah, it is. Although, I think that we’re handling that in Gutenberg as well, I think, which is really interesting, so that’s probably another. I think we’re making it relative to the theme or there’s some exploration there, anyway. We need to look into that in more detail on how we can use Create Block Theme alongside that because that’s really interesting. The other thing I wanted to mention, is another recent update is you can now persist the safe changes options. The ones I run through before, there’s quite a lot and they’re basically surfaced as check boxes. If you’re a theme builder or if you’ve build in a lot of themes, you’re probably going to use the same options every time. There’s a new option now that will remember the check-boxes that you use basically, so you don’t have to keep unchecking or checking boxes.

Birgit Pauli-Haack: Very helpful. Yes, thank you. Awesome. This is your little knowledge bit on the Create Block Theme. I really love that plugin and it had changed. From what I hear in the Outreach Channel and also with the people that I talk to, is that it changed the workflow on building block themes quite a bit and made it so much easier to just create themes. The only thing that it doesn’t do yet, I’m thinking, is to switch off some of the features of the Block Editor that are in the custom settings. If you want to switch off dimension controls or if you want to switch off custom color settings or something like that, you still have to do that or have the theme JSON, but I think that’s just one part that you still need to touch code.

Sarah Norris: Yeah, that’s a good point. We should introduce a new modal.

Birgit Pauli-Haack: I think there were some great examples there in the early days of block themes, because many theme developers or agency developers actually have this that build bespoke themes for one project and never replicated for any other project. They have this need to introduce guardrails on colors and typography because it’s brand styling. If you give users too much freedom on that design, they come up with your own designs and sometimes that’s detrimental to the clean look and feel of a website, so they want to build some guardrails. Right now, that’s only possible through theme JSON or theme support in the functions PHP. I also can see that most of those developers are not using the Create Block Theme out of the box. They’re using some of their themes and then have those theme JSON settings already in there and then use the Create Block Theme to just make the additional changes on the templates and on the colors or something like that. I don’t think it’s big, but it could be something we could look into.

What’s Released – WordPress 6.5.3 RC1

Although there was already a release to the WordPress releases, we have WordPress 6.5.3 release candidate, was just released, and it’s now available for testing. The final release is scheduled for May 7th. That’s next week. Many of you are listening to this past ad, so go and update your WordPress instances on your websites. It contains about 18, not a bad day, it contains exactly 19 bug fixes discovered with WordPress 6.5 release that couldn’t wait until 6.6 and also wasn’t supposed to wait. They are out now. You can follow up on the full list via the announcement post that will be in the show notes. There weren’t any particular bug fixes that stand out where I said, all good that, that is fixed, but also didn’t work too much with 6.5. I’m glad contributors worked on that. 

Gutenberg 18.1

Okay, let’s get to the two last Gutenberg releases. The first tagline, Gutenberg 18.1, it was a fairly large release and, Release Lead Ramon Dodd, had the release post on what’s new in Gutenberg 18.1. That’s the release that answer has the background image for the Site Editor, but let’s take it from the top.

Enhancements

Sarah Norris: The first one we were going to talk about is the zoom out, so this is invoking zoom out mode when opening the Patterns tab. It’s a great enhancement, because I think whenever you, or I guess most of the time when you insert a pattern, you’re going to want to see a bird’s eye view or well, literally, a zoomed-out view of your page because otherwise, you’re going to be zoomed into a smaller area of the page and it’s hard to see the new pattern or visualize where you want the pattern to go when you can only see a small section of the page. This invokes zoom out mode when you open the Patterns tab. I’d love to hear some feedback around if people are finding this useful as well. I think it feels very natural as well. It feels like a very nice animation that happens as well when you open the Patterns tab.

Birgit Pauli-Haack: Yeah, I like it too. Also, in the Site Editor, you can now rename pages through the actions three-dot menu. Pages are now in the Site Editor, you can view them through the data view, the whole DataViews’ new components and tables and the different layout views. You can have the grid layout view of all the pages and on your site, and then you have three-dot menus on the bottom of each card that gives you immediate actions that you can take with a page. One of them is rename a page, give it a new title, even if it’s a no-title page kind of thing. It’s an easy way to fix headlines and all that. I really like it for the new admin sections there.

Sarah Norris: Another update to that page view that you’ve just been talking about is well, updating the index view. I think these changes are all related to the DataViews project. There’s some really good work going in here. It brings there the list of pages to the new DataViews section.

Birgit Pauli-Haack: The List View, so you have on the left-hand side, you have the navigation that is in the dark background, and then the List View shows you each page with a thumbnail or something like that in the title. Then when you click on it, it opens up another panel where you can see the whole page. It’s also quite interesting for the workflow that was, you never were able to do that in WordPress before. It was always you had to click on it and then it opens it again. This is much smoother and you can browse all the pages quite easily and to see how they look. It seems to be magical that they actually display the front-end view of the page in the editor, so it’s really cool.

Sarah Norris: Instead of having to click into a page, wait for a page reload and then click another one and wait for another reload. It’s now right there.

Birgit Pauli-Haack: Yeah, right there. The same, we see that for the pattern pages, there’s now also a table layout where you can see the patterns and then it opens it up. Then the content schema for pattern editing view. I wasn’t quite sure what that was.

Sarah Norris: It’s when you can name blocks in a pattern, and then when you come out to the pattern view when you’re inserting a pattern, you’ll be able to see a content panel. Then those name blocks will show in that content panel. It’s probably good if you watch the video, the handy video that’s on the PR. It probably does a better explanation. It’s going to be good.

Birgit Pauli-Haack: Oh, that helps me quite a bit because sometimes you see paragraph heading, paragraph heading, heading, heading, image.

Sarah Norris: Yeah, exactly.

Birgit Pauli-Haack: You don’t know exactly where you’re on the page, but if things have a name you know, “Okay, I’m in the right section where I want to change things in the List View. The List View is, I’m obviously not creating too much content because the List View is not part of my muscle memory. When I was demoing things from the theme and how things are changed, I never opened up the List View and people asked me behind that. The List View is always open, how to navigate the whole pages and all that. It’s definitely a change in muscle memory to open that up because the List View wasn’t really helpful in the first few years of the Block Editor, so I didn’t develop that. Okay, next. Next is a background UI controls that are now really extensive. You can have, what was it? The focus on the image. You can have a tiled background image on things and you can have a section, but this is set for the top level.

Sarah Norris: Yes, I think so. Well, so I think it’s related to the top level, the new top-level background image setting. As we tend to do in Gutenberg, we’ll add the setting, the new style setting to theme JSON. Then this PR I think that we’re looking at is adding the UI controls. This surfaces it in the editor. This is, again, it’s very close to theming. It really elevates what you can do for themes. Again, this would’ve just been, you would’ve had to do it with code and probably custom CSS.

Birgit Pauli-Haack: Now you can, through the editor, you can change the background position, you can change the repeat, yes or no, or the background size of it, does it cover the whole thing, or there’s another one restrained. You can just upload the image there. I like background images, it gives so much more dimensions and layers to the Block Editor.

Sarah Norris: Yeah, it does. I really love web designs that use a big full-size background image. That’s the kind of design I like. I’m really pleased to see this come to the editor. We’ll see.

Birgit Pauli-Haack: There’s something that the DataViews, and I know it was there before that you can clear out customizations to templates, but now you also get a confirmation modal. I have learned that when you want to do, so some people wanted to switch out the theme, no, the updates of the theme doesn’t update templates at all when they were previously changed because the user changes trump the theme changes. When you update a theme on your site and you want the new changes coming in on templates for themes, you need to clear out the customizations beforehand. It’s a little bit of a quirk right now, and I don’t know how to solve this because of the hierarchy of changes, but maybe the Create Block theme. I don’t know if that’s a scope for that as well, but it’s something users and theme developers need to get their head around that, that’s actually what’s happening.

Sarah Norris: Yeah, exactly. Maybe a good solution here for the first case, it’d just be to surface what’s going on and try and explain to people just different levels of saving and this is how it works, like the template hierarchy, you just have to get used to that. Maybe there’s a first step of just telling people where things are being saved. I think this change helps you be less unintentionally destructive as well, because resetting things, it’s just, “Oh, I didn’t realize I was going to clear everything.”

Birgit Pauli-Haack: Yeah, you’re so right. Well, there are people who don’t press a button because they fear that they set up a nuclear bomb, but some people are just clicking around and saying, “Oh, I didn’t do anything,” but it all made it disappear. For them, it’s the next step as kind of have a confirmation modal, so you can think twice about what you’re doing there.

Sarah Norris: The next one we’ve got is related to the List View you just mentioned. I think this makes it much easier to navigate. It’s adding keyboard shortcut to collapse List View items, but excluding the focused items. You’ve got the List View on the left-hand side and say you do have a lot of content, unlike Birgit, depending on the length, I think it can be challenging to navigate just because it’s another scrollable section. Adding this keyboard shortcut makes it much easier to collapse nested groups, basically. Yeah, it’s a good addition. Again, it’s probably good to watch the video.

Birgit Pauli-Haack: It’s definitely also a good quality of life kind of thing. I think that was for the enhancement of 18.1, Gutenberg plugin updates, 18.1. 

Accessibility

There’s one thing that is available was an accessibility change for the DataViews that you can update. It has updated keyboard navigation in the list layout, so you can navigate through that through your keyboard, which is very important, so you don’t have to wait for the screen reader to announce everything. Then how do you get there? By keyboard. That’s a good thing. I think that was it for 18.1. 

Gutenberg 18.2

We can now immediately go into the change law of 18.2, and that was a mammoth release with 234 individual PRs by 56 contributors. Four of them completely new, but it also was that large because there were two more days on the release.

It wasn’t released on a Wednesday, it was released on a Friday of last week. Let’s head into it. Enhancements

First things, all kind of animation changes that I clustered together. It makes it a little bit easier that, that’s animation, it’s not very distracting animation. It’s more like a feedback animation. It adjusts the frame, it animates the radios on the frame, it improves the header animation. The animation for opening and closing the editor right-side bar, the insert and List View panels. This is more like when you move through the editor, you get feedback on where you are and where you go. I think those are really good features. They’re mostly invisible, but you’re just going to feel them, that it’s nice out there.

Sarah Norris: They’re small, tiny changes that make a big difference when they’re all grouped together, especially, just makes everything feel a little bit nicer to use. Next up, we’ve got using the grid layout by default on the templates in template parts view. Again, this is related to the DataViews work, I think. The grid makes more sense because they’re more visual.

Birgit Pauli-Haack: Template parts and templates are so visual. In their nature though, it’s good to see them, even if it’s only a tiny grid layout card, but it helps you navigate them without. You see them all in one scroll and then you can navigate to the one that you wanted to go to. Template parts are now patterns, so if you’re looking for your template parts, look on the patterns because there’s a big similarity between what patterns are sync patterns and template parts. They’re mostly all reusable things that can be, and so they’re clustered under the Patterns section. There is a simplified template reset language that kind of goes with 18.1 modal probably on resetting template changes customizations. What else?

Sarah Norris: There’s also related to what you were just saying about template parts I think in the Patterns, we now have an author field in that view.

Birgit Pauli-Haack: You can filter by, is it a template part or is it coming from the theme, or is it coming from the user and which user? It’s definitely helpful to navigate the whole thing and filter it when you have many, many template parts on the page. Yeah, so good, thank you. Then the editor, also in those layouts, you see in the editor now the word count and reading time in the post card, it’s not in the post, it’s more in the pages view, not in the post view, but you see them on the left-hand side in your screen. In the single Meta page screen. We need to get them all those names in.

Sarah Norris: I think it’s related to, because we have that information is surfaced within the editor when you’re browsing templates, and so I think we’re trying to align the data that surfaced in both areas so it’s more familiar and not confusing. There’s some data that appears here and different data that appears when you are editing the post. We’re trying to align them to reduce confusion.

Birgit Pauli-Haack: It’s good to have that information right there with a page metadata here, a template. Then the next feature is that the template preview is now available in the post editor for non-administrators, because non-administrators also can change the templates, so now they can see the preview. I think that’s in the sidebar. When you’re editing a post or a page, in the sidebar, you can switch out the template. To know which template you use, you need to see what it is, so you get a preview of the templates that you can search for or look at before you switch them out. That’s definitely a good way to help content creators to do the right thing there.

Sarah Norris: The publish flow has also been updated, so this is related to published status label.

Birgit Pauli-Haack: Yes.

Sarah Norris: Yeah, it makes it clearer what the state of a post.

Birgit Pauli-Haack: This is on the post summary panel. It shows you, you might have noticed that when you use the Gutenberg plugin, that the featured image in some of the other data is now in a so-called summary panel on the post were the former called document settings. There, you can also see what nature it is. Is it a draft, is it a published one or not? Then you see the featured image and also the template and the URL and when it’s published and all that. That is now much clearer what status your post is about. Well, the page,

Sarah Norris: Yeah, it’s good.

Birgit Pauli-Haack: The next thing is the Patterns page has now edit and view revision actions to the parts. Template parts now also surface the revisions in the editor, so you can see what’s changed here.

Sarah Norris: In the three-dots menu, I think we mentioned that similar to the title change that’s been surfaced, so these are new options in that three-dot menu for editing and viewing the revisions.

Birgit Pauli-Haack: The resetting, you can also reset it.

Sarah Norris: Reset, yeah, and delete.

Birgit Pauli-Haack: Then the Site Editor now also supports startup patterns. It did for the page view, when you go through the WP Admin and to create a new page, it showed you already startup patterns when they came in with a theme, but the Site Editor page management system didn’t have that yet. This is just creating feature parity between the two views, the startup patterns, so you can select different page layouts, and you don’t have to start from a blank page which a lot of people have anxiety about. You can start about, so you see, okay, this is my header section, my middle section, and my additional service section or whatever is in the startup pattern. Full-page layouts can be done, can be surfaced through the theme, and now you have them inside editor as well. Cool.

Sarah Norris: The next one we’ve got is we’ve improved the override indication for editable blocks in synced patterns. This is if you’ve inserted a synced pattern somewhere. Then when you’re looking around to edit things, things will be generally highlighted. There’ll be an outline around the block that can be edited. This update removes the outline that highlights things that can be edited. It removes it from things that can’t be edited in a synced pattern. Again, it’s kind just like a quality of life or UX improvement that feels, or maybe looks small, it makes everything feel a lot more easy to understand immediately.

Birgit Pauli-Haack: It takes the mystery out of it. You don’t have to click around and say, can I? Can I do? The next thing is in the zoom out mode, there’s an introduction of section containers where you can assemble patterns into sections and then zoom out or see them in the zoom out mode. There’s much work being done in creating sections that can be styled and all that. Well, that was a PR that went through multiple changes. Well, it started in February and has just been merged, and it’s April, so it took about two months to get through this. You were saying?

Sarah Norris: Sorry. I was going to say, I think it’s related to some of the 6.6 changes, especially some of the things that we talked about in the recent Hallway Hangout. I think this is like some groundwork for section styling and being able to style parts of either patterns pages or entire themes, rather than thinking you might have to apply something to everything. You can now break it down into sections.

Birgit Pauli-Haack: Cool. We will have a link to the Hallway Hangout that you just mentioned. That was what’s coming to 6.6, but we’re going to briefly talk about it as well and have the show notes, of course, have a link to it. The next two are DataViews changes. Again, there’s a lot of work being done, so it’s really hard to keep up, but every time you open up the Gutenberg Site Editor in the Gutenberg plugin, it has little changes in there. One is that you can now display fields as a batch in the grid layout. Then you can make checks, boxes and actions visible on touch devices, which actually is really helpful when you’re on a tablet or on mobile. There is also an experiment out of custom views. I’m not quite sure what that entails, but I’m going to look at it real quick. Do you have anything to add to that?

Sarah Norris: I think when I was reading this before, I think this is because the DataViews work is now not experimental, it’s moving the custom DataViews into an experiment. Rather than all the DataViews being an experiment, it’s just moving this single part of it, the custom DataViews as being experimental. You have to enable it.

Birgit Pauli-Haack: Is that the beginning of making DataViews a little bit extensible and you can create custom views or is that not that part?

Sarah Norris: I think it is. It’s like when you create your own reports in data reporting tools and stuff like that, you can create your own view for, well, I’ve seen the demo for creating your own view for pages, but I’m sure we’ll have many others. Again, it just gives users a little bit more control. It makes things feel more professional as well, because you can give it specific names rather than it all sounding very specific WordPress.

Birgit Pauli-Haack: The same.

Sarah Norris: Yeah, the same, basically from the site.

Birgit Pauli-Haack: I think it comes with a work for custom post types as well. If you need custom post types, custom fields, that’s all that whole soup of complexity and extensibility that comes with it. This is good that there’s already some work being done on that part. Because we already get some questions about extensibility of the DataViews use, and people who have done this with WP Admin are keen to see how they can work with the new components in the DataViews. This is definitely a good thing to start out with that. 

Then there were some changes for the layout pieces of the Site Editor. It added the row control for grid layouts in manual mode, which is good. It needs some testing and some feedback. You can also now, and this is what a lot of people are waiting for, is applying negative margins. We talked about it before, I think here on the podcast, but applying negative margin was something that a lot of people were waiting for, doing it in UI. It was always possible through theme JSON, but now there’s some UI or some settings that you can do in the sidebar.

Sarah Norris: Yeah, and we’ve also reduced the specificity of the layout.

Birgit Pauli-Haack: That’s why I leave it to you. I can’t pronounce that word. Specificity, yeah.

Sarah Norris: Again, it makes it hopefully easier for themers or anyone interacting with CSS. It makes it much easier rather than unexpectedly being overridden by CSS from Gutenberg. This change will hopefully make that a lot easier. There’s some changes like we’ve wrapped existing styles in a ware block, so which makes them less specific. I believe the semantic class names have been improved as well, but I think I might be jumping into a different PR there, but hopefully, it all collectively makes styling things much easier for Gutenberg.

Birgit Pauli-Haack: I think the semantic thing with just an 18.3. Yeah, it’s coming.

Sarah Norris: Yeah, we talked about this.

Birgit Pauli-Haack: No problem to mention it here, it’s coming. To say it’s not the last that we work on it. Then for the Global Styles, we talked about the background image or mentioned it, now you can have a display of default background for the size value in the Global Styles. We have the background UI control labels that are changed and then you use text and button background color for color indicators. There’s a lot of things that improve handling background images in the Global Styles.

Sarah Norris: Then this other one we’ve got for Global Styles is the color indicators now use the text and button background colors. I think this helps make the color palette selection clearer.

Birgit Pauli-Haack: Absolutely.

Sarah Norris: It’s when you start variations, I think it helps. Again, it probably helps to see this visually in the PR. When you view browse styles in Global Styles panel, if a theme has multiple style variations, you’ll see a little, like a preview box that previews the typography, the background image, and then two other theme images, theme colors, sorry, from the color palette. This changes those two colors to use the text and button background colors. I think it just generally gives you a better idea of the variation color palette compared to previously. Another good improvement.

APIs

Birgit Pauli-Haack: Especially, yeah. There are new APIs in 18.2, and they definitely need some testing because there’s now additional support for the plugin post status info in the slot for the Site Editor. Most of the changes are actually to give the plugin a more menu item for the API. Then what’s the other one? Plugin site, more menu item, that’s one. Then the other one is unify the plugin sidebar slot between the post and Site Editor. Because most of the time, you need the feature from a plugin in, in both. Because if it’s a plugin with blocks, blocks can be used in the Site Editor as well as in the post editor. It’s really beneficial to have those slots there. You could add as a plugin developer something into the post status info and you can create, so unify plugin, more menu item, you can create more menu items. I think some of the UIs, I feel that the Create Block Theme is actually using some of those new APIs already because it feels a little bit differently than before where you can open a menu and then have another slot and all that. Yes.

Sarah Norris: Yeah, exactly. I think these are the API changes of bringing more parity to the, like you said, between the post and Site Editor. I think most of these changes are moving these APIs into the editor package. Instead of them being separated, they’re only included in one package, and then that makes it much easier for plugins to use.

Birgit Pauli-Haack: Then they don’t have to include too many packages to use those. I think going through the create plugin GitHub repo might help quite a few plugin developers to find some solutions for their move away from the Meta boxes or the WP Admin setting pages into the editor. That’s a new avenue there. Maybe we need to do a Developer Hour on how did you do this? All right. I really like that, how this all comes together. You’re right, if you scroll further on the changelog, you get to the ad semantic classes.

Sarah Norris: I knew I’d seen it somewhere.

Birgit Pauli-Haack: Then there were some changes on the interactivity API. You can now have multiple event handles for the data WP on directive. That is really helpful because you can have for different actions on a button, you can have different event handlers. That’s really cool.

Sarah Norris: Yeah, it is. The other one we’ve got is updating the query block to allow, oh, non-interactive blocks. Sorry, non-core. I’m missing a vital word. Non-core interactive block, so you can include any block. Any block that enables the interactivity. API can now be included in the query block.

Birgit Pauli-Haack: Oh, yeah, that’s really helpful when you have custom post types with some interactions there. We love it. Cool. The interactivity API is another powerful feature that only in the next few months we’ll see really the extent of how powerful it actually is and what other people do with it. There have been quite a few Developer Hours with it. Some examples, there was a developer blog post about the introduction of the interactivity API. Earlier, or last month, there was a Developer Hours with creating blocks with the interactivity API with another real-world example. I know that Ryan Welcher is now working on his Twitch stream on doing a to-do app with the interactivity API, and this shaped up quite nicely.

Part two, I think, happened this week. I will put all these interactivity API mentions into the show notes so you can look up about them, what happened in last month about that. 

What’s in Active Development or Discussed – WordPress 6.6 Hallway Hangout

This concludes our what’s released sections and we are really way into the hour, but I wanted to still talk with you, Sarah, about the Hallway Hangout on what’s next in Gutenberg. There was a demo time, I think it was an hour and a half, where product managers and designers came together and demoed how certain things are going to work and what they’re preparing for the 6.6 version that’s coming out. Beta will be June 4th and it will come out on July 8th. I think that’s the schedule. Of course, so then the last version of Gutenberg coming in, I think it’s 18.5. We are now 18.3 release candidate is out, so we are about three releases away from beta. Isn’t that scary?

Sarah Norris: It’s terrifying, and everything moves so fast. You think you’ve got a break, and you haven’t.

Birgit Pauli-Haack: What was the topic about, or what did we cover? What was covered in the Hallway Hangout? It was the data view efforts in the relationship with the admin redesign. I think that was a part of the extensibility there. I think the biggest piece is the overrides and sync pattern because that changed. It was slated for WordPress 6.5, but then got pulled after beta one when the flow was not as intuitive as one would’ve wanted. It’s a similar setup, so when you have a pattern that is synced, you can enable overwrites. What you also have to do is to give the overrides a name for each single override so people that use the pattern can see in the sidebar which are the things that you can override and can click on it. I think that is a very good demo to watch.

I’ll share the summary of posts on make core in the show notes, and there were quite few smaller videos in there that show off some of the new features that are coming. You and I, we just talked about the zoomed-out view. There is some advanced content only editing in how that is handled. Then of course, another big feature is a grid layout support that’s coming and the pattern styles, which means that you have a section in a website that you can attach a style universally without having to style each additional block that’s in that section. Is that what I’m hearing?

Sarah Norris: Yes. Yeah, I think that’s right. Similar to how we can currently apply different style variations to an entire theme. This would allow you to apply style variations or any other kind of variation of global styles, I guess. I’m trying not to say style variations again.

Birgit Pauli-Haack: Lots of expectations.

Sarah Norris: Yeah, that’s right. It makes it much easier to get some more variety of styling, and means you don’t have to switch themes as well.

Birgit Pauli-Haack: I think that what I find how things are changed in the Global styles and if you needed it to be overall change for the whole site or do you want to just for this post and where those change is happening. There are attempts to find a way to clarify where things have been changed or where they’re styled, and so you can actually reverse some of the things. Revisions probably helped, certainly. The Hallway Hangout was quite interesting to see. Was there anything that stood out for you?

Sarah Norris: It’s hard to pick, actually. I think the DataViews work is really, really cool and really sets us up for the admin redesign work. It’s just really nice to see these fresh designs go into WordPress. I also really like anything to do with Patterns because I work with themes a lot, so all of that is super interesting and it’s giving users a lot more control and allowing different areas to be edited. Then some areas are locked down, just a lot more control is really, really good. Also, on the zoomed-out view, that content only editing view is very interesting too because I think it’s all in the name. It only allows you to edit the content rather than being distracted by editing all the other blocks that are surrounding the content. Again, really interesting stuff going on.

Birgit Pauli-Haack: It also helps the developers that do bespoke site to kind of put up some the guardrails more intuitively for the content creators and not just make it easy for them to create those. Yes, so definitely, dear listeners, if you only get one thing out of this hour of Gutenberg Changelog, follow up on the show notes and look at the summary of the Hallway Hangouts for what’s next in Gutenberg. Because it gives you a pretty good preview way ahead of time of what will come into WordPress 6.6, and there’s quite a lot that’s coming as you can hear. We are at the end of the show. Is there anything else you wanted to highlight before we close out that you didn’t get a chance to talk about it? Because it will be chopped up.

Sarah Norris: No, I think we talked about everything. Well, there’s always too much as well.

Birgit Pauli-Haack: We shouldn’t wait a month to catch up everybody up on the Gutenberg happenings. Before I end on the show, I wanted to remind everyone on the Developer Hours on alternatives from Meta boxes, May 14th. If you listen to this after May 14th, go to one of the last weekend editions on the Gutenberg Times and you’ll find the recording of that hour so you can follow up after the fact. I think it’s definitely also a video to watch. 

All right, as always, the show notes will be published on gutenbergtimes.com for the podcast. This is episode 99. If you have questions and suggestions or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com.

For those who are still listening and haven’t switched off, we have episode 100 coming up, and it will be a special edition of the Gutenberg Times. I will talk with the agency that did the redesign of the NASA website, and we will talk about WordPress scales as well as implementation challenges and pathways to migrate content, decisions about how to decide on core blocks or custom blocks, and have a good time with the agency, the content creator, team members and developers on how they actually accomplish that. 

Thanks, everybody, for listening, and I wish you a wonderful weekend, week, say goodbye, and yeah, till the next time.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.