Gutenberg Changelog #94 – State of the Word, Gutenberg 17.2, 17.3 and 17.4, WordPress 6.5, Migrating from Classic Theme to Block Theme

In this episode, Sarah Norris and Birgit discuss State of the Word, Gutenberg 17.2, 17.3 and 17.4. They take a sneak peek at the WordPress 6.5 roadmap, and they discuss steps on migrating from a classic theme to a block theme.

Show Notes / Transcript

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Birgit Pauli-Haack

Show Notes

Special Guest: Sarah Norris

JavaScript Developer 6.4 editor tech co-lead

• WordPress Profile @mikachan
• Personal website: sekai.co.uk
• Twitter: @mikachan_

State of the Word

• State of the Word, (and more) — Weekend Edition 278
• Data Liberation – GitHub repository | Slack channel: #data-liberation.
• New WordPress events page

WordPress 6.5

• Roadmap to 6.5
• Tracking issues of features already in Gutenberg plugin and ready for testing
  • Font Library
  • Syncing specific blocks and attributes of patterns
  •  New data views for templates, template parts, and patterns in the Site Editor
  • Robust revisions
  • background image support for the Group block,
  • aligning page edit features in Site Editor and Post Editor

Gutenberg plugin releases

• What’s new in Gutenberg 17.2? (6 December)
• What’s new in Gutenberg 17.3? (20 December)
• What’s new in Gutenberg 17.4? (03 January)

Migrate classic to block theme

• Health Check & Troubleshooting 
• Create a Block Theme

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 94th episode of the Gutenberg Changelog Podcast and a happy New Year, dear listeners. I hope you all had a great time off during the holidays and a great start to the year 2024. I like the year 2024. 2023 wasn’t so good, but 2024 was good. In today’s episode, we will talk about State of the Word, Gutenberg 17.2, 3 and 4, and we take a sneak peek at the 6.5 WordPress roadmap, and we also discuss steps on migrating from a classic theme to a block theme. 

I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and a full-time core contributor for WordPress open source project sponsored by Automattic’s Five for the Future program. And I’m thrilled to have as a guest today, Sarah Norris, JavaScript developer, theme builder and core contributor and editor core tech lead for WordPress 6.4, also sponsored by Automattic. Happy New Year to you too, Sarah. How are you today?

Sarah Norris: Happy New Year. I’m really good, thank you. I’m very ready to talk about all the work that’s been happening over the last few weeks, especially as we lead up to a fast approaching 6.5.

Birgit Pauli-Haack: Yes, it’s fast approaching and we are going to talk about that. But yeah, catching up on everything. The year-end vacation kind of always puts a little bit of a dent in being up-to-date with Gutenberg and the block editor and this is your chance to catch up on it. We have a big show, so it might go over the hour limit, but I hope we can get it brief. 

Announcements – State of the Word

So State of the Word, there was a lot of celebration around 2023 in the State of the Word and brought it to the WordPress community. And if you haven’t watched the keynote yet, there is a YouTube video. There’s also a YouTube video about the Q&A afterwards and I’ll share the link to the Weekend Edition 228. That’s the last one on Good Work Times where I shared a ton of links, so this will be in the show notes, but it was the first State of the Word outside of US, a huge success with livestream on multiple channels. And is there anything that stood out for you, Sarah?

Sarah Norris: Yes. Yeah, so much fun. It was such a good State of the Word. So it was discussed how many… the number of WordCamps that’s increased. So I think we’ve doubled the number of WordCamps and Meetups, and that has to come in more and more countries as well. I attended the first UK WordCamp, so the first UK WordCamp since the pandemic last September. It was so much fun. It was held in Whitley Bay, which is in the northeast of England, and I’d just love for everyone in the WordPress community to experience this, and as the number of meets and word camps grow, I hope everyone is able to attend. It’s almost like… unable to put it into words how good it is attending local events and being part of your local community as well.

Birgit Pauli-Haack: Yeah, I agree with that. Yeah, it’s the live, the person-to-person interaction. It’s kind of how relationships are built and it’s such a richer experience than just doing it online. And I just happened to think of it, but there is a new page on wordpress.org, it’s called Events, it’s wordpress.org/events and it has a big map with all the events happening and a list and you can filter down to location or what type of events. And so you learn about all the local Meetups, so if there isn’t one near you, there is the chance that you could actually start one. Yeah, it’s a lot of work and it’s a ton of fun. For about four years, I organized the meetup in Florida when I was still living there and I had so much fun with the local community, and I was always up-to-date on WordPress because I had to do a little intro every time and… Great speakers. So it’s a ton of fun.

So if you want to do that, the make.community… No, make.wordpress.org/community, that’s a handbook for meetup organizers and work group organizers, and out of the small cell of a local meetup will grow the bigger one. That’s the WordCamp. Yeah, thank you for letting me rant on about this. I’m by heart a community organizer, so I’m kind of really happy about… That those come back. Although we doubled the number of WordCamps, there is still a lot of work to be done to get on the level of pre-pandemic. So 2018 and ’19, we had about 140 WordCamps around the world, which is double the number that we had last year. So we are on the way because it’s going to be maybe a hockey stick growth rate there with all the local Meetups coming back. All right, so back to State of the Word, what else stood out for you?

Sarah Norris: I’d also like to give Playground a shout-out. It’s become one of my absolute favorite tools to use when developing and testing for Gutenberg and also when building themes and plugins. I’m just so excited for what the future holds for this tool and just well done to everyone involved in building such an amazing tool as well. Yeah, I’d recommend everyone check it out if you haven’t already.

Birgit Pauli-Haack: Yeah, check it out. WordPress Playground. It’s actually WordPress in a browser. You don’t need a local server and you can have a plugin, can use it for demos as can themes, but it’s also… Some of the tutorial educational content will have some Playground links as well so you can see how it actually works and… Without having you setting up all your local development and all that, so it’s really cool. Yeah. I think they’re also working on a VS Code extension, so you get a little WordPress button in your left taskbar and then you click on it, and then from the directory you can call up the Playground instance. So that would be really cool. It’s still in the works, but I think that’s the goal for it, yeah. Anything else that stood out from State of the Word?

Sarah Norris: Yes. Yeah, I’m also excited about the admin redesign, so yeah, I’m just looking forward to… I think this is another maybe long anticipated feature. Yeah, like anything, any big redesign of any long-standing tool is always exciting and I think this is… Yeah, it’s just going to be incredible.

Birgit Pauli-Haack: Yeah, it is. Yeah. And that’s the unification of all the list views on… List of posts, list of pages, list of categories that I haven’t tackled yet, but the list of templates. So it’s all a unified kind of system. So I really excited about that too. And it looks so modern. It looks so… Like, “Oh, this is from the 21st century.” Yeah.

Sarah Norris: Exactly.

Birgit Pauli-Haack: Well, what stood out for me was kind of a little bit a higher level thing from State of the Word. There was a data liberation project that Matt Mullenweg announced. That’s a community initiative to bring all the tools that agencies and hosting companies put together for migration in and out of WordPress. So in and out of… From Wix to WordPress, from Squarespace to WordPress, from Google Docs to WordPress and all that. And I think that is a really good step forward to the open web, that a user or a site owner can take a hold of their own data and they’re not beholden to a centralized kind of system that doesn’t let you get out of it once you have signed up for it because the switching costs are too high or not possible at all and you have to start all over again.

So I think that is a really good initiative. We’ll see how it plays out in the next year of course, but there are some… So I’ll share a few links in the show notes about that. And the other thing that stood out for me was everybody was waiting for the date of WordCamp US, which is September 20… No, what is it?

Sarah Norris: September 17th to September 20th. Yeah, September next… This year.

Birgit Pauli-Haack: September was good. So September 17th through the 20th, and if you count the dates right, there are two days… Contributor day and two-day conference. So this is kind of a new format and I’m excited to see that and how that plays out. So that’s it from the State of the Word. Anything else?

Sarah Norris: No, I think that’s it from the State of the Word.

Birgit Pauli-Haack: Yeah. Of course, we also have a lot of recap posts if you’re not into video watching, it’s also on the link then. 

WordPress 6.5

So next up, WordPress 6.5, that’s the release coming now and it’s fast approaching. We have a schedule, so Beta 1 is scheduled for February 13th, 2024. That is feature freeze kind of thing. And I did a calculation, 38 days from today, and today’s January 5th. And the last Gutenberg release that’s going to make it new, feature-wise, will be 17.7, which is actually only three Gutenberg releases away. It’s fast approaching. After Beta 1 comes weekly Beta 2 and Beta 3 with bug fixes after testing and then brings us to release candidate one for March 5th, though in exactly two months, March 5th, 2024. That is the deadline for string freeze and also for developer notes to be published and collected in the field guide that accompanies every major release release candidate is actually right before WordCamp Asia, which takes place on March 7th through ninth.

So this is great timing because everybody who wants to go to WordCamp Asia already has a release candidate. Whoever is on the release squad can… Oh, release candidate’s done. So the major work for the release is probably done by that time and that’s a good thing. You don’t want to be on a WordCamp and have to deal with releases at all. Yeah. Final release is scheduled for March 26th, 2024. So here is your schedule for that. That seems to be a pretty good schedule in terms of spacing out the betas and release candidate, that’s some kind of tradition with WordPress release. You were on 6.4. How is the weekly kind of updates and what goes into next beta and all that? Is it particularly important?

Sarah Norris: Yeah, yeah, the dates are important. It’s almost like time… If you didn’t think time went quick enough already, being part of a WordPress release. Yeah, I think one of my ways to deal with the release dates is usually I have a deadline for myself that’s just ahead of the important dates. So usually the Friday before a date, but also that reduces the time, because I don’t know if I’m stressing myself out more. No, it’s all good.

Birgit Pauli-Haack: No, it’s all good. I think you need the Monday to do all the backboards and then… The beta releases and release candidates are all on Tuesdays because Wednesday is too late, and if you want to move it, you could move it to Wednesdays, but you don’t want to release anything on Thursday or Friday because then the whole weekend is kind of full with anxiety and communication and feedback, kind of that. 

Roadmap 6.5

Yeah, so early December, Anne McCarthy has published the roadmap for 6.4, and it’s a very long post and we are certainly not going to… We would need to have another two-hour show to go through it in detail, but let’s look at the highlights for it.

So it has four major topics from the editor part, that’s design tools, that’s adoption pathways, the foundational experience, which is some of the redesign, and new APIs. And I think the first three are really interesting for users and those who build interfaces for others but not… Or do site builders that are no-code. So the fonts library, we are waiting for that for quite a while now, but I think it’s coming into 6.5 eventually, right?

Sarah Norris: Yes. Yeah, a long anticipated feature coming to core. Yeah, so this brings font management directly to core, allowing users to edit and remove custom fonts all within the editor. It has been available from Gutenberg 16.7, so there’s some underlying changes currently going on, but if you do want to test it, you can already test it using the Gutenberg plugin. But yes, a brand new redesigned API and the UI will be coming to 6.5 and yes, it’s extremely exciting. I know I’ve spoken to so many users who are looking forward to this.

Birgit Pauli-Haack: And the waiting was really hard on those users that are looking forward to them because it got pulled from the 6.4 release at pretty much last minute, like Beta 2 or something like that, because it wasn’t ready for the REST API kind of thing. What’s also coming is sync specific blocks and patterns. We have sync patterns, but it’s the partially synced patterns where you can change layout and styling of a pattern, but not the content. Right now, synced patterns are when you change something on the pattern and it changes through all the instances that it was synced, but if you have partially synced, you can kind of have a little bit… You have a granular control on what should be synced, a role of the pattern instance that it was used, and what shouldn’t, and I think that is pretty much, as of this week, ready for testing. We probably need to wait for 17.5 to get it into Gutenberg plugin, but look out for that release to start testing on this.

And the third item in the design tools was the section specific theme.json and Colorways. So you have multiple palettes that introduce some of the sections that you use in your theme and have a different color palette that you can style it with. I think that’s the idea there. I think the work is on the Group Block right now.

Sarah Norris: Yeah, that’s right. Yeah, it’s like sectioning off the theme.json… Well, specifically at the moment just for colors, but I think this will be great. It’s kind of like a great gateway into expanding the design tools, especially for theme builders. And like you say, this is only going to apply to the Group Block, but it’s a good example, for instance, of a theme author being able to provide colors that work well together, but in a specific instance, so just for the Group Block. So you could make sure that text is accessible in that specific instance. I think it plays a really exciting future for splitting up theme.json, also because theme.json can get really long as well and that file can get big. So yeah, I think it’s heading in the right direction with this as well, to splitting it all.

Birgit Pauli-Haack: I think it also bridges the gaps between… I don’t know if that’s part of it, I need to test it out, but when you have styling for certain blocks or block styles, those don’t have the design tools to further style them later on. And I think this will be one that’s built out, not just for the group log or for a certain instance, it could help with the additional styles that theme developers offer their users to also give additional styling to them.

Sarah Norris: Yeah.

Birgit Pauli-Haack: All right. And then on the roadmap, there’s a section adoption pathways, and that is to make certain features available for classic themes or make them easier to handle support for appearance tools and classic themes. So I think we have one of the change log items that we discussed further is about colors and dual tone and color settings, and then also improved pattern management for classic themes. Yeah. You wanted to say?

Sarah Norris: I was just saying yes to the features that are coming up in the Gutenberg releases we’re talking about. Yeah, I noticed there was a lot in relation to the appearance but also the classic themes. Yeah.

Birgit Pauli-Haack: Yeah. And then for the foundational experience, that’s the part where the data views come in on the roadmap and they will come in for templates, template parts and patterns in the site editor. At least that’s on the roadmap, but they are also… You can already test those, but you need to open up the experiments tab for that to switch them on and then you can see them for pages, you can see them for… Patterns? No, not patterns. Patterns is the only one that doesn’t work yet, but for templates and template parts, and definitely a feature that needs feedback, that needs definitely testing and bug fixing, especially for backwards compatibility for the previous versions. That’s definitely something, if you want to dive into how things are going. The next one, it’s called robust revisions. Do you know what that is about, Sarah?

Sarah Norris: So this is improving revisions but across multiple places. So I think we’ve started templates and template parts, so they’ll now show revisions alongside style revisions and you can also compare this revision side-by-side as well, which I think is brand new. And we’ve also added pagination. So yeah, a whole ton of improvements for revisions.

Birgit Pauli-Haack: Right. Yeah, definitely.

Sarah Norris: We’re also integrated with the style book now. This may be coming up as well, I think in the change log, but yeah, we integrated with the style book.

Birgit Pauli-Haack: Yeah, it’s definitely something you need to test, you want to test and it’s a part of the bigger project also to have revisions for any post metadata, which hasn’t happened in WordPress before. So a lot of plugins probably will be happy to use those revisions screen when they’re ready and available for extensions as well. And then one thing I’m pretty excited about, but it has also seemed to be quite a complex issue to actually have a customizable Navigation Block for mobile headings or navigation, the little hamburger, what goes in and what goes out because it’s never going…

Most of the time it’s not one-to-one with the normal site navigation, but there will be an overlay that you can switch in and out, but it seems to be quite complicated. I looked at some of the issues, one of the issues exactly, and it has a long discussion on which way to go on it. So it’s still in the design phase, I believe. Not sure if it’s going to make it to 6.5, but maybe it’s easy once the design questions are all answered to then dive into the development. But yeah, computers are involved, so nothing is really easy. I don’t know how you see that, if you have some insight into that.

Sarah Norris: I know it’s a lot. So I think on the face of it, especially because it sounds like it’s a section of the Navigation Block, but I think when if… Anyone who’s built a responsive navigation knows it’s not simple, so then as soon as you start trying to do it, to cater for so many of the people to be able to build this kind of tool. Yeah, it’s pretty complicated, but there’s some really good work going into this, some good conversations. Yeah, we’ll get there. And I think all the discussions and a long design discussion, it always ends up with a good first pass.

Birgit Pauli-Haack: And then there are three new APIs coming with different outlooks, kind of, or goals. The Interactivity API we have been talking about for about a year now, and some of the Core Blocks are using it in a private API, but for 6.5 it’s coming out of experimental and will be a public API for everybody who develops blocks to be able to use the custom fields API and binding API, I’m not quite sure how far along they are. They haven’t been released yet in a private API kind of setting. I’m not sure they’re actually going to make it. There will be underlying… They will support some of the new features but in a private API to see if they all work as they’re supposed to be working. I think that’s pretty much the high level idea about that. And then lastly there will be some… There’s PHB compatibility work.

There’s a rollback between plugin and themes, updates with automatic updates. That has been testing also for quite a few months and is supposed to come also a better handling of plugin dependencies. And of course, the performance team does a fantastic job in going after all those performance improvements that are possible with WordPress, be it for the block editor or for PHP or for the backend as well. So those are also coming to 6.5. But as Matias and Matt said, just because we say phase two is done, doesn’t mean the work is done. So there will be UX iterations and quite a few listview background image support for Group Block, some of it is already there. Then revisiting template versus content editing modes. That kind of confuses a lot of people. “Are we adding a template or am I adding a page or what am I doing here?”

Those questions come up with testing quite a bit. And then what has been progressed quite a while is to align the edit features that are available in the site editor and the post editor. So it can be reused is pretty much… That’s one thing. And users, the advantage of it is that users don’t have to relearn what’s available in which editor because they… Maybe that’s also part of the confusion that we have on, are we editing templates or content. And so the background image support and the aligning the features are ready for testing. I think there has been some great progress made in the Gutenberg releases. And then the last point is adding box shadow component. There is box shadow support, but I think it’s only made available for theme.json level but not for user interfaces. Is that right?

Sarah Norris: Yeah, that’s right. Yeah. So the work for 6.5 will expose this to the UI as well, so end users can use the box shadow component as well.

Birgit Pauli-Haack: Yeah. We’ll see how that all… And then the last thing that’s on the roadmap is that the minimum version for MySQL is going to be raised from 5.0 to 5.5.5. Very specific, but look out for it and talk to your hosting company to make sure that there is an upgrade path if you’re still on an older MySQL version. All right, so anything else about the roadmap that you want to add?

Sarah Norris: No, I think that was everything. It’s a very long roadmap.

Birgit Pauli-Haack: Yeah, it’s ambitious. Yeah. Roadmaps are always quite ambitious. And then you see on Gutenberg 17.6, we’ll see how we wiggle down that ambition a little bit and kind of what’s realistic and then we’ll see what’s coming into 17.7. Yeah, that’s the last one. 

What’s Released – Gutenberg 17.2

All right, so let’s go into the weeds. And we start with Gutenberg 17.2, it was released on December 6th. Wow, that’s a month ago. And there were a few things that stand out and one was the data views, and that added extra context to… So the data views are the ones that are in the admin section, the list of things, list of properties or entities or whatever you call it, I call them things.

And so there are quite a few features in the old admin screen that needed to come in a better way into the new admin screen. And there was kind of a filter row, the table header pagination and there’s extra… You can now scroll down and have the larger data sets. You don’t have to scroll up and down. So there’s a sticky table header that’s really good. That wasn’t available in the old one. So that’s the first… Yay.

Sarah Norris: Yeah, it’s very helpful, especially when the scroll bar is really long, so you don’t have to remember… The pagination is also sticky as well.

Birgit Pauli-Haack: Oh yeah, that’s great.

Sarah Norris: Same with that, you don’t have to scroll… Yeah.

Birgit Pauli-Haack: Good. And then one of the things is that drag and drop is now a little bit more refined. There was a problem to drag and drop to the beginning of a post or page and to the end, and contributors have figured out how to make this better and actually functioning. And so it kind of virtually enlarges the area. It was really irritating that you could do it in the second one. You can drag into between the first one and the second one, and then you had to move it up if you wanted to get a block to the beginning of something. So it’s really good.

Sarah Norris: Yeah, yeah, it was really finicky. It was like you were fighting with the top on the blocks. It was just like it wants to drag you into this, but yeah, and now you don’t have to fight.

Birgit Pauli-Haack: Yeah, yeah. I also think that the drop zones are better marked now than at the previous versions of the block editor. So I’m really grateful for that. I just it saw, that the list view… You can also now drag into a collapse block in the list view, which is really cool. So you don’t have to just first expand a block to put additional blocks into a Group Block or a Columns Block or something like that. So you can just drag it there. Of course, the order of that, that’s random. But yeah, once you get them in, you can organize it.

Sarah Norris: Yeah, that’s cool. It’s less clicks, it should be less clicks.

Birgit Pauli-Haack: Do you want to take the next one?

Sarah Norris: Yeah, what else have we got? So we’ve also got the adding the toolbar for distraction free mode. So distraction free mode removes all of the UI? All the UI. So you are only looking at your content and you’re only… So you can write a long blog post hopefully. The problem with this is that it could be hard to format some of the content. So this brings in the toolbar when you mouse over the top of the editor, it’ll bring in toolbar when you’re in distraction free mode. So yeah, I recommend checking that out as well, if you haven’t checked that distraction free one.

Birgit Pauli-Haack: Yeah, I really like it. And it should be actually a default setting for the writers of the users that still like the white box from the old classic block editor that… And there is no distraction, every time you move the mouse or you move the keyword, there’s something popping up and coming down and you don’t remember where it was and what it was and it kind of totally gets you out of the flow for your writing session. So distraction free mode is a really… Extension there, and refinement definitely helps with all the writing tools in the block editor.

So the Gallery Block now has styled scroll bars for the image captions, which is really an additional design tool because the image captions were always a little bit randomly placed on the Gallery Block. Yeah. The Interactivity API, they add… Luis Herranz, I think, did the proposal to have the Interactivity API use modals instead of scripts on the front end, which kind of makes it native JavaScript… A little bit closer to native JavaScript. So I think that’s for the developers amongst us to check out. And do you have any thoughts about that?

Sarah Norris: I’m really excited about the Interactivity API going out into the world. I think it really opens up… Well, so I’m from a front-end development background, so if I wasn’t already working at Gutenberg and I was building WordPress sites, I would be really excited about this. I’d be looking forward to using it so much. Yeah, it’s basically… I don’t want to say it’s React and you can look under the hood, what it actually is, but yeah, it basically surfaces so much functionality to the WordPress front end.

Birgit Pauli-Haack: There wasn’t before.

Sarah Norris: Especially you’re building custom block.

Birgit Pauli-Haack: So check it out as it’s coming to 6.5 as a public API, so let’s definitely start checking it out. There are efforts to bring introductions to the Interactivity API as well as case studies to the developer blog. I’m not quite sure they will be ready by March, but definitely subscribe to the WordPress developer blog on developer.org… wordpress.org/news. So you get notifications when there’s a new post coming up, and it actually has some great additional tutorials in there.

Talking about documentation, there was an initiative to put the fundamentals of block development, rewrite some of that or put it in a different order. So when you’re trying to learn more about block development, that the official documentation in the block editor handbook helps you get started and learn all the concepts about the file structure, registration of a block, the block wrapper, working with JavaScript and the block, what block.json can do for you, landing and first pages and the landing pages and all. And they’re all kind of getting a revamp.

At the same time, Riad, I think it’s mainly Riad Benguella who is also writing the documentation for using Gutenberg as a framework, as a platform outside the WordPress context. It hasn’t been published yet, but if you fork the Gutenberg repo and you can start reading it. And he has some great tutorials on attributes, definitions, transform pages and blocks, and also the block supports for the framework, which is a little bit… Works a little bit differently than in the WordPress context, of course. So this is pretty new on the… And then, of course, there’s always some work to be done on the documentation with the new components, theme.json, and also template names and web pack options and all that. So this is highly technical and I would suggest you read the change log on the documentation part, if you’re interested in that and learning about new things.

And I think, yeah, it’s also the Create Block scaffolding. I don’t know if you have used it, Sarah, but I’m a big fan of that scaffolding tool since the beginning because I don’t have to remember all the things I need for a plugin that has a block. And you can also use an interactive template that makes the new block ready-to-use Interactivity API. And because there’s a new Store API for the Interactivity API, the Create Block scaffolding tool has already been updated to use that. So this is pretty cool.

Sarah Norris: Yeah, it’s very cool.

Birgit Pauli-Haack: Very cool. And I think that’s it from Gutenberg 17.2, and we go right headfirst into 17.3. Do you want to start us off?

Gutenberg 17.3

Sarah Norris: Yeah, sure. So this also included many improvements to the revision changes like we highlighted before 6.5. So 17.3 included adding a brief summary of the revision changes to global styles. So when you view the revisions in global styles and you click on the dates, it’ll now give you a brief summary of the blocks that would change and the styles… Yeah, the blocks that would change with the style changes. Yeah, it’s very good.

Birgit Pauli-Haack: Yeah, that’s excellent. And there’s also enhancement of the social icons that is now using or adding the Gravatar service and it’s also updated. Well, sometimes I’m really cool. I’m really excited when I see consistency be applied to all the controls. So the default typography controls are now consistent across all the blocks, because different contributors write the different pieces of it, and then once you have the pieces you kind of need to see, okay, how can it make this a little bit more consistent, because then it’s easier on the eye end. You don’t have to worry, why is that distance longer than the other one, or whatever. So that is really good work. It’s God’s work, but it’s not always appreciated or seen that much. So I wanted to point that out. The same is also… Or the color dimensions of the List items Block, I think that’s new. That’s an enhancement for the List Block. So you can do the margins and the padding around list items. You can also have controls over it. It’s really cool.

Sarah Norris: The preference is modal as well. It’s also had a nice update, maybe something you wouldn’t expect to see updates for, but in 17.3, it’s had an organization update with the introduction of some new panels for appearance and accessibility settings.

Birgit Pauli-Haack: Yeah, that’s really cool.

Sarah Norris: Nice UX enhancement.

Birgit Pauli-Haack: Oh yeah, there were also some updates to the external… Have you ever noticed the external images panel in the Post publish sidebar?

Sarah Norris: Yes. Yeah, right.

Birgit Pauli-Haack: That’s such a cool feature. So what does it do? And it kind of seems to be unnoticed, but it helps you. So if you copy paste from a different webpage or from Google Docs into your block editor canvas, out of the box or automatically, it links the images from the original space. So once you publish it and you delete the Google doc where… Yeah, all of a sudden your images go away or if you migrated from a different webpage, those external images don’t come automatically over. So each of the images in the toolbar has an upload to your own media library. But if you have 10 images, you don’t want to do it one at a time. And when you publish the post, the pre-published view has kind of thumbnails of all the images that are external and gives you a button to upload them all at once into your media library before you publish your post. I think that’s genius.

Sarah Norris: It is.

Birgit Pauli-Haack: Because in the preview you see the images because the original place still has them, and all of a sudden the post goes away. We actually have met the developer blog quite a bit when… So it’s a really cool feature.

Sarah Norris: Yeah, it is. It’s something that’s maybe easily forgotten about as well because like you say, if you’re copying and pasting, like a lot of people do, and then you’re just like, “Yeah, they’re showing, they’re fine,” and you can just easily forget about them. Yeah, so really good feature.

Birgit Pauli-Haack: Yeah, really good. Well done, Ella. So was that all that we had? I think there wasn’t a whole lot of… In that release, but I like all the accessibility improvements that are listed in there and the performance as well. There’s quite a few performance improvements, just because improving the code quality and having not so many calls to the same feature or same store kind of reduces that load times and the reloading of things. The experiments, I’m pretty much done with that. Are we? 17.3?

Sarah Norris: I think there’s one about the update for matching the front-end layout class names between the editor and the front end. So it’s a minor change, but I think anyone who’s working with CSS, especially with WordPress, will appreciate any updates like this where the generated layout class name in the editor will now match to the front end.

Birgit Pauli-Haack: Yay.

Sarah Norris: So yeah, it’s a nice little enhancement.

Birgit Pauli-Haack: So those who have dealt with that before, they need to revisit the code to not… Are there compatibility issues with that or…?

Sarah Norris: No, I don’t think so. I think just going forward the class names will match. So I guess previously there would be a lot more work involved, so things should be more simple going forward. So I don’t think there’s any backwards compatibility.

Birgit Pauli-Haack: Good, good, good. Yeah, sometimes I wonder when CSS changes come. And we had a few hiccups with releases there as well. Yeah. All right, well, we are really good.

Gutenberg 17.4

We are through 17.3, and then this week Gutenberg 17.4 was released and also had a few highlights, and definitely the unification between site and post editor has progressed rapidly. So now we have Page Attributes panel, post taxonomies panel, the view link thing, panel. Discussion panel and feature image panels are now available also in the site editor. And that’s really good. So when you create pages and edit pages, you have all the tools that you need there.

Sarah Norris: Next one, there’s so many improvements to the DataViews as well with this release. So we’ve stabilized the experience of the template screen, making it available outside the experiments flag and without the additional views options, but templates have been marked as stable. Yeah.

Birgit Pauli-Haack: Yeah. So DataViews testing is now on. If you install, you can use the plugin also on the test site or on Playground and install it there and test those template pages. So the DataViews of that is really… You can start now. For the design tools, the 17.4 has the first iteration of support background image in the Group… Well, we had background image in the Group Block before, but now it also has some tools, controls for the background size and also for tiling or repeat feature on the background image. So there’s a cover option there that means it covers the whole size of the Group Block, or you could have a contains option that it contains the aspect ratio and the Group Block can display something on top or below. But with that you can also enable the repeat feature and then it would only repeat in one dimension.

So if the block is longer than the image, then it would repeat in the height of it and if the Group Block is wider than the background image, then it would tile it in the width of it. And then there’s a custom size. So you can say, “Okay, use that background image but only in the size of 200 width and then repeat it.” And then it gives you the repetition over the full set of the Group Block. Did I explain this right?

Sarah Norris: Yeah, I think so. Yeah, expanding the background image options to include cover and contain, and then with all those options you just described. Yeah.

Birgit Pauli-Haack: And I think that’s pretty cool because then you can have some great… Well, some people say it reminds them of GeoCities, but that’s not a bad thing. Giving more controls to the user and to designers to make some interesting layouts and interesting designs for the websites.

Sarah Norris: And I think anything that reminds me of GeoCities can only be a good thing. Maybe that’s just my age showing.

Birgit Pauli-Haack: Or mine. I love it. Played quite a bit of a part. The next step?

Sarah Norris: We’ve also got some updates… Yeah, the global Styles revision. So we mentioned these as part of the 6.5 roadmap, but as part of 17.4 we’ve got some updates to the revisions for adding pagination and the integration into the Style Book. So global Styles revisions, you can now navigate between lots of different revisions over multiple pages of revisions and you can also see them from the Style Book itself as well. And I think that that really highlights the Style Book as such a useful tool as well, especially for styling. It’s in the name, Style Book, but especially for styling many blocks, many blocks at a different… Sorry, at the same time, rather than… I don’t know if maybe some people who are new to the editor may feel that they have to edit certain sections in different places because things feel new and they’re all over the place. If you start with the style book and you can see all the blocks in one place, I think it may help understand how they all interact with the different styling and how they interact with each other as well.

Birgit Pauli-Haack: And the Style Book is actually something that I, at the beginning of the block editor when I was trying to figure out if they… In 2018 actually, trying to figure out if we should enable the block editor for certain websites, and I was putting all the blocks in one post and then make them available for that particular site. And then we were able to look through it, how do the blocks behave? Whereas the styles need to be adjusted so they actually show the cover block and all that. And the Style Book is really replacing that totally. But it’s really helpful for… As you said, you have so many places where you can change the appearance of a block, of an element, more of a… That, or of a section, that it… Or in a post or globally on the style IU, you sometimes have a hard time figuring out, “Where did I change that or where is that red line coming from?” So the Style Book really helps you with that, to kind of track that down.

Sarah Norris: We’ve also got the right-click for blocks. So yeah. So in the list view, yeah. So you can now right-click blocks in the list view, so on the left-hand side when you’re in the editor, and it’ll open the block settings panel for that block. And I think this is super cool because it makes Gutenberg feel a lot more like an app. It already feels like an app. And then we’ve got the admin redesign coming as well, and now we’re going to have right-click menus. Yeah.

Birgit Pauli-Haack: Yeah, right-click menus. Yay.

Sarah Norris: Right, yeah. Right-click menus, yeah.

Birgit Pauli-Haack: Yeah. And that’s the block settings menu that will come up. That’s where you have add, before and after, copy things, create patterns. Those are the menu items that are in the block settings menu that shows up when you right-click on a block in the list view. It also makes you streamline the whole process quite a bit because you only have one list view and you don’t have to scroll up and down the canvas, you can just kind of collapse and expand on the list view and do some fine-tuning there. What’s also quite interesting here is in 17.4, all the performance enhancements or improvements that people are working on as well, most of them, again, also store subscriptions and improvements that take down the load times and the reload times. So that is definitely yay to the performance improvements. There are quite… I don’t know, I haven’t counted them, but it might be 40 or so items that are concerning the data view.

So that experiment is really progressing quite a bit. So even if that’s the template part, you can enable the experiment and then get all the other data views as well to test things. Yeah, list view, the sync patterns is kind of working. Yeah, the documentation updates, one is that there is a new build your first block tutorial in the Getting Started section of the block editor handbook. And I’m not quite sure how finished that is, but it’s definitely something to keep an eye out for that, as it made the start of your block development experience easier than before. At least, that’s the hope. And if it doesn’t, yell at us. It’s good to get your frustrations out because that’s how we learn, we’ve got to get over it, then we need to get back to it. I did one of the courses, the data layer introduction course on learn.wordpress.org, and I’ve really found it quite interesting to go through that.

And I learned so much about using the components also for plugin outside the block editor context and a plugin settings page, and also how to interact with the WordPress data. And I shared my enthusiasm for that course on Twitter. And then someone who also went through that said, “Well, it’s not always quite clear which code examples need to be changed to get to the next step.” And I said, “Yeah, you’re not alone.” And I definitely have a set of notes for that, for the faculty member who created the course, but I also found it quite satisfying that I actually figured out what needs to happen. And that’s part of the learning piece, that you cement the learning so much better when you figure it out yourself than somebody spoon feeding that to you. So I’m in two minds about that. But yeah.

Sarah Norris: You can fall into the trap of just copying and pasting everything, if everything is there. But I also understand examples are amazing to be in docs. So yeah, we need a good balance of just enough examples to get people to figure out the next thing on their own so they feel like they’ve learned something too.

Birgit Pauli-Haack: And I think it’s also… It might be the experience of a web developer that we had to figure out so much before on our own that it’s kind of part of the habit, too. “Yeah, it’s not working the first time.” That expectation is not there, so we always have to figure it out. Same with using different scripts and all that. As I said, computers are involved, easy is not always easy as it seems. But if you are on the developer path and you’re listening and want to learn something, they have some great courses on the learn.wordpress.org site, and they’re relatively fast to get through. Not always easy, as we said, but yeah. And speaking of which, the easy part, I think we are through with Gutenberg 17.4, right? So this time you got it, three Gutenberg releases in one hour, just about.

What’s in Active Development or Discussed     

Yeah. But I sat down on a quest during the holidays… Or between the holidays or between the year, as we say in Germany, between the year, I sat on a quest to migrate the Gutenberg Times to block theme, and I now take the opportunity to have discussed that with Sarah, who’s the professional theme developer and builder of tools, to see if I’m on the right track. So I migrated Gutenberg Times off to a different hosting to Pressable. They’re very impressive. It’s a really great hosting company, but that was the first part of it. So now I wanted to scope out what needs to change visibly, and I thought, “Okay, how can I look at 2024 without changing my front end and without getting all my site door mixed up?” And I remembered there is this site health and troubleshooting plugin from the WordPress community where you can kind of switch to a different theme for the admin, but the front end stays the same.

The visitor sees what they see and you don’t change it. So I enabled the 2024 and the necessary plugins that I needed for content, like the plugin… The podcast plugin or the blocks that I have from a different plugin. I use the Post Grid block from the Genesis Blocks for a long time. So I needed to enable that. And then I navigated the site like I was the visitor and took notes. I have a list of to-do items, and so I get the scope for that. And now, but how do I execute that? So I was thinking, and I wanted to check with you, Sarah, if that’s the right approach or if there’s a better way to do this. So I would create a clone of my site, then install the Create Block Theme plugin, which is in the repository. Then I would activate for real the 2024 theme and then make the changes to the template, create new templates, change the styles of things, and then, what? I export the new theme and then upload it to the live site? Would that be a good place? Good way to do it?

Sarah Norris: Yes, I think so. A really good shout out to the Site Health plugin as well, I never would’ve thought of it. Yeah, it’s a good starting point. Yes, I think… So you’ve already created a clone of the site, so you’ve isolated a copy of your site, you’re working on that as a separate theme and then you’re going to export that as the new theme in order to activate it on your live site. So yeah, I think that sounds like a perfect workflow. The only other option I was thinking was that… But I don’t think in your specific case… I’m not sure how much it’d help, but just to put another option out there, Create Block Theme also has the option to start from scratch, so create a blank theme rather than starting with an existing theme.

But I definitely would recommend starting with 2024, but I know that some people, especially if you’re used to designing from scratch or a blank canvas, some people might like to start from a blank theme and you do have that option with Create Block Theme. So yeah, you’ll get completely empty templates, empty pages, but it will be a block theme starting point, so you don’t have to figure out how to actually get started.

Birgit Pauli-Haack: Oh, good. Yeah.

Sarah Norris: In the theme technical terms. But yeah, you’re ready to start inserting things into the page templates and creating new menus. So yeah, probably if you’ve got an existing site. I guess it depends on the layout, and you could also choose another existing block theme that maybe matches the current classic theme more closely. But yeah, so it depends on your use case. I guess the biggest thing to decide is where your starting point is going to be, whether it’s an existing theme, a default theme, or the blank theme that comes with Create Block Theme. But yeah, the approach you suggested sounds perfect. Yeah, export a new theme and then you can upload it somewhere. Yeah.

Birgit Pauli-Haack: Okay. Yeah. All right. Okay. Yeah, so I’m not missing any step and then be surprised, like, “Oh no, that doesn’t work.” And start from scratch again. No, I think I want to start from an existing theme. So with the step on the Site Health and troubleshooting plugin, you could install… Or before you enable the troubleshooting mode on the plugin, install other plug themes. So I would think maybe Brian Gardner has some… Two block themes, the Frost and the Powder. Then Ellen Bauer has two great themes. One is the AinoBlock and the other of the Aino theme, but I think it was an earlier block theme. And then the latest one is MOOC, which is actually for magazine sites, which I am going to review again to see if that matches up. It’s quite a nice theme. And then my classic theme is Excel from… And there’s Norén, who also has quite a few block themes, and is actually an early adopter of block themes. And he has, I think, four or five block themes in there.

So I’m not yet quite sure on my decision on the 2024 theme, but Eat Your Own Dog Food is probably… That’s where I’m going to end up. But I like exploring the different themes. And the troubleshooting mode on the plugin, SiteHealth plugin, is definitely helping quite easily because you don’t have to set up a new site and all that to just test out some of the themes. And of course I could do Playground… No, I can’t. Well, there are ideas around Playground to actually create a copy of your site and then you can test things out. But I think that’s not that far yet. But keep out, watch out for Playground, it can really help you with things.

Sarah Norris: At the moment, with Playground, you could install the Create Block Theme plugin in a Playground instance and then build a theme in that instance and then export it from there. So again, maybe not a hundred percent for your use case, but just to know there’s another option, yet another option out there. It’s good for isolating the WordPress instance, and you don’t have to worry about all the other things that come with it, like hosting and setting up WordPress, obviously all the benefits of Playground. So you can just start from Create Block Theme, basically.

Birgit Pauli-Haack: That’s so true. So any designer could just use Playground, click on one button on the Playground site and then install the plugin. And then once you… The Create Block Theme and then create from scratch or use the 2024 one and then export it and use it on any other site. But it goes away, right? Playground goes away again, when you close the browser, right?

Sarah Norris: You can now change the option so it will persist. So yeah, there are other options. So if you’re looking for these options, they’re in the top right when you visit the Playground site. But yeah, so not everything disappears now when you close the Playground, you can persist it in the browser, in the browser history.

Birgit Pauli-Haack: Wow, that’s fantastic. You don’t even need anything, any websites. Yeah, you can just use Playground to persist it. All right, well, this has been such a great show to talk to you about and chat about. Thank you so much, Sarah. So when people want to reach you, where do they find you?

Sarah Norris: I am mikachan or mikachan underscore. Someone else has already taken my username on everywhere, basically, on wordpress.org and Twitter and yeah. Yeah.

Birgit Pauli-Haack: All right.

Sarah Norris: Please reach out. Yeah.

Birgit Pauli-Haack: Yeah. And I will share the contact information in the show notes so you can follow up with them. Well, this was the first show of 2024. Thank you so much, Sarah, for being here and being my… Keep me straight on the straight and narrow here. And as always, the show notes will be published on the gutenbergtimes.com/podcast. This is episode 94, and if you have questions or suggestions or news, just send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. So thank you all for listening. Hope you all have a great 2024, and until the next time. Bye. Bye, Sarah.

Sarah Norris: Bye.