Gutenberg Changelog #79 – WordPress 6.2, Gutenberg plugin versions 15.0 and 15.1

Gutenberg Changelog episide 79 Cover with Birgit Pauli-Haack and Nick Diego
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #79 - WordPress 6.2, Gutenberg plugin versions 15.0 and 15.1
/

Birgit Pauli-Haack and Nick Diego discuss the high-priority items for WordPress 6.2, and the releases of the latest Gutenberg plugin versions 15.0 and 15.1.

Show Notes / Transcript

Nick Diego

developer advocate at WP Engine, plugin developer and themes builder. He is also a core contributor. Running Triage sessions in the core editor channel and is on the WordPress 6.1 release squad

WordPress 6.2

Community Contributions

More Block Plugins

Gutenberg 15.0

Gutenberg 15.1

At the time of recording the Gutenberg 15.1 version was only available as release candidate.

15.1.0 RC1

Fonts API won’t make it into 6.2

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello and welcome to our 79th episode of the Gutenberg Changelog Podcast, recording February 3rd, 2023. In today’s episode, we will talk about Gutenberg 15.0, 15.1, as well as the upcoming major release of WordPress 6.2 and a little bit more. Not much more. Special guest today is Nick Diego, developer advocate at WP Engine, Block Editor Triage Squad, and On the Block Editor Triage Squad for WordPress 6.2. I am your host, Birgit Pauli-Haack, curator at the Good Work Times and full-time core contributor for the WordPress Opensource Project, sponsored by Automattic. Howdy, howdy, Nick. How are you doing? Thanks for joining me today as a co-host on the show, as it’s always a treat to geek out over Gutenberg with you. So how are you today?

Nick Diego: I’m doing great. Thank you so much for having me back on the show.

Birgit Pauli-Haack: Oh yeah, it’s great pleasure. Yeah, thanks for coming back on. So we have a great show for you dear listeners, as mentioned, but we will take the WordPress 6.2 section at the beginning, so you all are up-to-date on that. 

WordPress 6.2

Hector Prieto published the WordPress 6.2 planning roundup with the schedule and the squad, and that has pretty much followed the earlier proposal. We talked about the schedule is Beta 1, scheduled for February 7th. That’s coming up fast, 2023. The release Candidate 1 will escape into the world on March 7th, that’s a month later. And the final release is scheduled for March 28th, 2023. Release Candidate 1 is also the time when the developer notes will be published, so they come out at the beginning of March.

The squad release lead is Matt Mullenweg. There are two release coordinators with Francesca Marano and Hector Prieto. So glad that Francesca is back in the saddle of coordinating with Core. Core tech leads are Tanya Morgan and John Baptiste Audras, and the editor tech colleagues are George Mamadashvili and Nik Tsekouras. I think I got this right. Core triage co-leads, Colin Stewart and Mukesh Panchal, and then editor co-leads, as mentioned, Nick Diego and Anne McCarthy. Design lead is Rich Tabor and Documentation co-leads, now we are a group of four with Femy Praseet, Milana Cap, and Apha Thakor. And then there are marketing community co-leads with Jonathan Patani, Lauren Stein and Mary Baum. Test co-leads are Robin Nasmore Hasan, and Adel Tahri. This time new on the WordPress, the release squad is a performance lead, and the first one is Felix Arntz from the performance team. So yeah. Nick, how are you doing with being on the editor triage co-leads?

Nick Diego: Oh, it’s been fun. So first this role was new in WordPress 6.0 and then we continued it for 6.1 and now 6.2 and I think we have a bit more method to the madness now. Things are a bit more organized, think we’re the most organized we’ve ever been before beta one has even come out. So I’m feeling pretty good right now as we head towards 6.2.

Birgit Pauli-Haack: Yeah, so what does it exactly entail? If people don’t know what a triage co-lead is, what do you do there?

Nick Diego: It’s mainly organization, so there’s a lot of issues and PRs that need to get included in 6.2. We do our best to make sure that any issue or feature that’s related to 6.2 appropriately has eyes on it, is appropriately getting handled and done. And we also are responsible for helping determine whether an issue maybe is important but maybe isn’t a blocker to the release, so maybe that can get moved to the next version of Gutenberg or the next 6.3. So it’s kind of managing all the pieces that are coming together at the end as we head into the final release. We also work with the editor tech co-leads on Backport. So once we get past beta, any new feature will need to get backed into the release and so we help handle that. So it’s really kind of a bit like an organizational role to make sure that the release goes as smoothly as possible.

Birgit Pauli-Haack: That’s awesome. Yeah, I know that’s definitely worth having and you do awesome work. It’s also kind of managing some of the personalities at some point and also kind of what gets priority or not. It’s really interesting. Thanks for doing it. Again, it’s the third time that you are on the editor triage leads, right?

Nick Diego: Yeah, it is. And thank you for all the documentation work that you guys do, so it’s a lot of people in the process and to make the release go as smoothly as possible.

Birgit Pauli-Haack: Yeah, and I can only repeat what you said. Thereafter, the first two, we all are kind of getting really organized on documentation. We now have, as a new feature, no, not feature, a person on the release team. We also have end user documentation person, Femy Praseet on the release squad. She can also be part of the release team and organize themselves pretty easily. And she gets all the information because that really wasn’t happening before and there was always, yeah, what is unnecessary for end user documentation versus developer notes and they’re still behind with end user documentation. They’re still working on 6.1, but knowing, okay, this is coming into 6.2 and getting the issues done. I also know that both the organization from Milana and Femy, the documentation team has increased in contributors and many of those are actually working on end user documentation. So I’m really glad that we have that now on the WordPress release team.

Nick Diego: Yeah. And the documentation page on the website got a new redesign recently, which looks very cool. So if you haven’t seen that yet, go check out the documentation page on wordpress.org.

Birgit Pauli-Haack: Oh, is it live now?

Nick Diego: I believe it is, yeah.

Birgit Pauli-Haack: Okay, cool, cool, cool. Because yeah, we have been waiting for on the developer blog, designed to actually follow the documentation design, so we’ll see how that’s going to work because the developer news blog is still out in beta. We haven’t officially released it, so we hope to get to that point quickly. Hopefully before WordCamp in Asia. Are you going to WordCamp in Asia?

Nick Diego: I am not, unfortunately. I’ll be jealous of everybody else who gets to go, but no, not this time unfortunately.

Birgit Pauli-Haack: Okay. All right. So yeah, with the Gutenberg plugins released, we talk quite a bit on the Gutenberg podcast about all the new features that come in. So I wanted, but still go over the high priority items that are in that one issue that Anne keeps updating and McCarthy keeps updating in the status of it. There are quite a few improvements or massive improvements and new features coming in with 6.2. So I think it can’t hurt if we look at those high visible items or important items together. They’re all cataloged by features. So it starts out with patterns and there are two things that come in. One is the pattern inserter next, that means inserter is starting with a list of categories for core as well as the third-party categories.

And then, with a click on the category, a panel opens with the patterns for that particular category in a thumbnail view. And I really like that. So you have to kind of, it makes necessary that the categories are very well defined, but it also kind of keeps the focus of the creator, the content creator on what they actually want to do and not distracted on all the other cool patterns. So that is definitely, and that has been in the Gutenberg plugin since the Gutenberg 14.4 release, so it should been quite refined.

Nick Diego: Yeah. And I think it’s one of those things where it may seem minor to folks, but once you start using it, it’s like, wow, this is so much better than what it was before. I think it was a dropdown menu where you can select the different categories. So it’s great to see. And one of the other things that is included with patterns is kind of a re-envisioning of query patterns. So query loop patterns for end users specifically are not really familiar with the term query. It’s kind of a foreign term if you’re not deeply entrenched in WordPress. And so, that’s been changed to be posts, so it displays post summaries in lists or grids and other layouts. So I think it’s a little bit more user-friendly, and there was also some work to make sure that category descriptions are part of the rest API, which just make the pattern panel a little bit more interactive, a little bit more intuitive. So really great to see the direction that this went and hopefully will just make inserting patterns using patterns more usable for folks.

Birgit Pauli-Haack: Yeah, and it’s definitely also for when you have patterns for your plugins or something like that, you can add a description. It’s so much better than just have a title there to help the user figure out what they’re going to do with it. So there are six major items for the global styles. One is the way to document containing all blocks and styles. That’s the so-called style book, and that is really cool. We talked about it on the podcast before of course, but I really like that you can now see all the blocks that you use and that are in the theme in one overview, and also the third-party blocks. So if you make a change in the style editor in the global styles, you can see what the implication would be, especially for the blocks that you not use so often, but when you make a change, you can see the ramifications there.

And also when you make a change and you would think that it would go to another block because it uses the same block in a cover block or something like that, you see those things as well and are not surprised. Yeah, that has been missing for quite a while. I remember when I started at the agency, when we were starting with using blocks for post content, that we were always kind of trying to figure out, okay, does this seem style all the blocks well enough with the display? So we had one post that every single block was in there with different variations and then had to install it or copy paste it over to the sites to do unit testing. And that, of course, goes away now. And now we also have the third party blocks to view them in the Style book.

Nick Diego: Yeah. It works really well. And to your point, I think a lot of folks were building out default pages with every block on it or multiple pages to try and do those testing and this just makes it so much easier. Kind of going hand in hand with that, there was also some improvement to when you edit block settings in global styles, they’ll now generate a little preview, which is handy. So before you edit the block, and let’s say that the block wasn’t actually on the page you were on in the site editor, now it will give you a little preview so you can see what you’re actually changing, which coupled with the style book really helps you get a better understanding of what you’re changing, how it’s changing, and how it’s going to affect your site. So those two together I think really help refine the global styles interface. And there’s still improvements to come, so a lot of good stuff.

Birgit Pauli-Haack: Yes, and one of the other improvements that is coming with 6.2 is that you actually, and that goes hand in hand with the other two, is that you can now copy the style variations for block types. So if you added a style variation, there is a button block that is rounded, but you also want to change the background and then every button block should, with a rounded variation, should follow that design. You can make that happen by pushing that to the global block styles and have a style variation update on that as well. Yeah, it’s getting really, really sophisticated in terms of what you can manage as a site editor or site user, a site owner in terms of styling and being very deliberate in, okay, this my overall style and this is just for this post, and make sure that those were a tier two in a kind of quasi design system for the editor.

Nick Diego: Yeah, and I think that you kind of look at it in two ways, and we’ll talk about this later in this episode, the create block theme plugin, but you have the global styles. So if you’re the owner of a website and you want to make changes to your site, that’s great for you. But I’ve also loved using the site editor to build themes, to build themes for yourself or clients or whatever. It’s a great building platform. And these tools that allow you to design a block style and then push it globally really speed up that development process when you’re building out a theme.

And then you can use something like the create block theme plugin, which we’ll talk about later again, where you can just export that as a complete package. And on top of that, one of the things that we’ve heard a lot about is, if you remember the customizer had an option where you could add custom CSS, right inside of the customizer, and I think people use that a lot for quick fixes or small little CSS snippets that you would want that you wouldn’t want to have to put into the style sheet of the theme.

Well, that’s actually coming now to Global Styles as well. There’ll be an input now for custom CSS that you can apply directly within the Global Styles panel to your theme, and there’s now going to be per block custom CSS as well, which is really cool. So if you want custom CSS specifically for a specific block, you can do that too. So, so many cool enhancements to global styles that really allow you, whether you’re an end user and you’re just managing your own site or you’re building block-based themes for others, so many cool features that really increase the power of the site editor in global styles.

Birgit Pauli-Haack: Absolutely, absolutely. Yeah, especially the custom styles. Custom CSS was a feature that kept also developers or theme developers to not adopt that much on block themes, but with that little feature to be very much in control of little fixes that don’t have to go back to the theme JSON and wherever for that one. That is really powerful. And yeah, it will come in, I think it came in with 15.1 to the Gutenberg, no, it came into 14.8, but it was refined later on. You don’t find it in the left menu, it will be in the styles menu. So it’s a little bit further away than before, but I think it’s also more focused to what it actually does.

Yeah, you’re not getting distracted when you don’t use it. So for the editor, there is one information that the documentation information and the outline of the list view is now together. So the information about how many words or how much time to read is now in the list view panel in a separate tab, and just recently it was actually changed that it comes from the bottom is again up on top so it’s not covered by the view post when you save it. And it’s a very nice design that came in now with, I think, 15.1.

Nick Diego: Yeah, and we are starting to see, and we’ll see this more as we talk, but a more tab based design within the interface. So instead of having an icon that you click on to get that information, it’s now kind of part of the insertion tab and it goes hand in hand with some of the other things that we’ve seen, one of them being a new media tab. So when you go to insert blocks and patterns, you’ll now have a media tab where you can have direct access to your media library, which is really cool. It just kind of speeds up that flow. You can of course always add image block and then navigate to your media library and do the same thing, but this really just makes it a lot easier to add media to a page, which is neat. And then, oh sorry, go.

Birgit Pauli-Haack: No, no, sorry. Yeah, the media tab is really helpful, especially when you just want to reuse some of the media that you just uploaded. Yeah, it kind of gives you direct access to it without having to have that modal come up. But what it also does is that gives you a basic open verse integration that is now available. So you can search the open verse. Open verse is the Creative Comments image library that is available at wordpress.org/openverse, and so you see images that are free to use on a website. And Steve Burge, actually, he reviewed the feature through the Gutenberg plugin before it even was out.

And we put the link in the show note, he wrote about it, about the open verse integration, and it’s so much easier to handle when you’re looking for pictures and you don’t have to go out on a new website. You don’t have to go out to the new place for your image and download it. It’s right there. You can access it. It will link to the open verse CDN, but there is a button in the image block where you can say download to media library so you have it again next time when you use it, when I use it again.

Nick Diego: And it’s such a cool thing and especially as open verse continues to grow, a good resource there. One other thing in regards to the editor that was introduced was it’s really kind of hard for a user to differentiate between just a static lock and those that are what we call sync, so template parts and reusable blocks. So while this is not the be all, end all solution, one thing that was added was to colorize synced blocks. Again, temple parts are your reusable blocks. So at first glance, it’s just easier to differentiate, oh, I’m editing something that impacts that could change things elsewhere on the site. So those synced blocks are now purple. So if you see purple when 6.2 comes out, that’s what that means.

Birgit Pauli-Haack: Right. Yeah, reusable block have the same content everywhere, and when you change them, it will be changed everywhere, and template parts, it’s just the styling of things. But yeah, it’s really interesting how different modals and how they’re so similar but then have a total different impact when you change it on your site. Yeah.

Nick Diego: Absolutely.

Birgit Pauli-Haack: Yeah, it’s definitely worth going over the user documentation for that to just get it really figured out for your daily routine. Yeah. Another feedback was from the full site editing outreach program was that the people have a hard time between what are they editing and what are they looking at, and it now is now introduced in a browse mode that gives you, you can go through all your templates but not add anything. You have to click edit so you know that you are working on that particular template part. Before, when you clicked on the appearance site editor, you jump in right into your homepage for editing and that was kind of confusing because you that might not be what you wanted to edit, and it was also confusing that it only changed on the homepage but not everywhere else when you were doing something.

So there are some really good quality of life, so to speak, changes in 6.2 as well, but also to make the workflow a little bit more intuitive, a little bit more separated kind of separation of concerns. So the user is absolutely clear what they’re doing in terms of editing or viewing or adding. So there are a few changes that come through the tools section. That one is that the group block now has a setup state, so you can pick the variant.

Up until now, you’ve selected the group block, and then on the right hand side in the sidebar, you selected if it’s a row, a default, or a stacked block, and now you can do this right when you add it to your canvas, which is pretty cool. With it comes the feature to set a width for the blocks in a row. That means that you can really say, okay, these have the same distance, or you need to fill it up with the whole wording or something like that. It definitely helps controlling that. And there’s also one, you mentioned that in 15.1 that there’s now minimum height for the stack block group block.

Nick Diego: Yeah, yeah. Minimum height seems like an innocuous change, but it is incredibly useful in various designs. And what we’re seeing in 6.2 is a lot of improvements to tools that we’ve had for a long time. So the stack block in particular has been one that it’s hard for people who don’t understand, who aren’t familiar with flex layouts, it’s like, well, what is this thing? Isn’t it kind of similar to just a group? It just vertically presents my content, right? Well, it’s actually much more tricky than that, but we’ve been missing some of the tools within the UI that allow you to do some cool things with stacks and rows. So, we’re at a point now with 15.1 and soon to be 6.2, WordPress 6.2, where we have a lot of these tools in the UI. And another one of those tools is fixed position or sticky position because one of the things that people have wanted a lot is the ability to have a header, which you see on a lot of websites, that sticks to the top of the browser window as you scroll down the page.

And this has been introduced in 15.0 where you can now set the position on blocks to be sticky. Now, this is an initial implementation of sticky and position in general. It’s going to be iterated on for 6.2. You will only be allowed to apply sticky to blocks that are at the root of the page. So that would be things like sticky headers, mainly because there’s some UX concern. People understanding how sticky’s kind of a complicated CSS property. So making sure that it’s really clear to folks when they apply sticky, how it’s going to impact the page. So there’s some UX issues there in terms of expanding sticky and other positioning elements throughout the interface, but this is a good first step and it does allow for sticky headers and footers, which is awesome. So a lot of fun things to play with for theme developers specifically that can reduce the amount of custom CSS you need.

Birgit Pauli-Haack: Yeah, and I know we all talked quite a bit about the sticky headers, but I also find sticky footers even more important because that’s where my thumb is when I look at the mobile version of a website. So don’t discount the sticky photos.

Nick Diego: Absolutely. Absolutely.

Birgit Pauli-Haack: And yeah, that could be next pages navigation or new features or get totally out of the website with something else, but that can be all done from the footer. Yeah, there were some updates on the blocks as well that are coming to 6.2. There are many, many more, but as I said, these are all the priority items. These are the things that are worked on to actually come to 6.2 period. And one of them is that they fixed the layout jumps selecting an image. That was actually very early in the release cycle in 14.4 plugin release.

But now, and the second one is also the split block toolbar in the sidebar, what you mentioned that there’s more tabbing going on. The team separated the settings from the appearance in the block sidebar and it was completed in 14.7 and there are certainly some updates later on. And I don’t know exactly, I have this question since I saw it, and I have not researched it. But do you know if there’s a way for third-party developers to decide where their settings are going or is that still all coming into settings?

Nick Diego: So yes, I was a big part of making sure that that was possible. Well, I didn’t do it, but I was advocating for that because one of the good examples is color. Color is clearly an appearance type thing style, but a lot of third-party plugins, or even some core plugins, register their own color pickers. So because that’s not generated by block support, it’s a custom implementation, it would by default land in settings. So there would need to be a way to move your custom color panel to styles, especially for user experience because someone’s, okay, we now have the style tab, wait, colors in settings? So that has been done. So there’s now a way to define a group on your panels. So if you can say group style and it will end up in the style panel, if you say group setting, it will end up in the settings panel.

By default, if you don’t define a group, and this is something that we’ll need to put together in a dev note and especially for the field guide for 6.2, if you don’t define a group, it’s going to default to settings just because WordPress doesn’t know what it is. But you can easily update your third-party block or whatever to define what side you want to be on, which is fantastic. I think the tab situation is really good for user experience because I think we’ve all seen sidebars that you got to scroll forever to see all the different functionality there. So separating that into styles and settings is great. We just now need to make sure that third-party folks can put stuff where they want it and we have the documentation on showing how to do that.

Birgit Pauli-Haack: Yeah, yeah, I think the next step for the sidebar would be that a user can actually move things around. So yeah, if you want to, but that is, well, a girl can dream, right? And then there is a change or an update and make it easy to copy and paste block styles. So when you have two paragraphs and you change the first one, the styling, like the background of the color, you can say there’s another menu item in the ellipse menu on the block where say copy styles and then you can go to the next paragraph and you can then paste the style with the same menu item. And that is definitely very powerful. We had reuse of the styles when you create buttons, a row of buttons. Every time you had them styles and then you add a new button, it took over the style from the previous button. That was automatically done, but we didn’t have that for the single blocks, like for instance, a paragraph block. So this is definitely quite powerful.

Nick Diego: Yeah. And I want to stress here that when you are copying and pasting styles, what it’s doing is it’s copying and pasting styles provided by block supports. So things like dimensions and color, things that are when a block opts into native block supports. So I think that as we move forward, third-party blocks have an incentive to opt into native WordPress controls more than ever, because one, when you opt into native WordPress controls, it’s very easy. You get all those controls there for you with a single line of code. And two, now we have some additional functionality like copy and paste that supports those native block supports.

So I think this is a very subtle change, but it is really going to start helping hopefully standardize third-party blocks to use core block supports as much as possible, which in the end really improves that user experience. Because if you’re a new user to WordPress, you just learned how to apply dimension controls or order or whatever, and then you go to a third-party block that doesn’t have those controls or has a complete custom set of controls, it’s quite jarring. So I think little changes like this will start incentivizing third-party block developers to standardize around core block supports, which in the end will just improve WordPress across the board. So very excited for this one.

Birgit Pauli-Haack: Yeah, that’s great. Very good point. And there are quite a few plugin developers that now, amongst you, that provide additional functionality for it. And if they get additional features that they can use that are maintained by core committers, instead of themselves, it definitely makes the updates easier to propagate. And in the list of 6.2 high priority items, the last one is providing a pathway to migrate widgets to block themes. So what that means is if you are using a classic theme and you switch over to a block theme, it will make it available for you to have the same widgets can now be added to a footer or to a sidebar that’s in the block theme and you don’t have to recreate them again as you had to do before. So this is always also a good pathway for adoption of block themes when the migration from a classic theme to a block theme is a little bit easier now.

Nick Diego: Yeah, this is a great thing. I mean, it’s just one step to make that transition process easier, which we all know it’s not seamless. I mean, it takes some work to go from classic to block based, but this goes a long way.

Birgit Pauli-Haack: Yeah, I see sometimes some questions on Twitter and other places where, how do I convert my classic theme to a block theme? And I don’t think that that’s really possible. I think because they both have so different paradigms to think of, what is the same is the template hierarchy, but I think the block-based approach is so much richer feature set for the user that it’s not possible to do this one to one transition. There are certainly ways to do that in particular parts. So you could have template parts that are block based on your classic theme, or here, like the migrate the widgets over to block themes, but there is not a one-to-one translation possible because of the different based architecture and paradigms.

Nick Diego: Yeah.

Birgit Pauli-Haack: All right, so these were the major points of 6.2. I know there are many, many other smaller changes or that came across without being the high priority, but they’re still very helpful for 6.2. 

Community Contributions

Now, I wanted to point out some community contributions and then we get into the release of Gutenberg 15.0 and 15.1. And so, I wanted to point out the advanced query loop plugin by Ryan Welcher. He adds variations for that post loop that we talked about. He calls it a query loop because that’s what he builds his variation on, but also for date filtering, you can now also, if you use that plugin, you can also have pages that are just per author or for custom post types or custom fields. So he has really expanded that query loop or the post loop in the block editor, so you get a lot of variety and variations that you can use for the more expanded block themes. Because those are still the idea out there that it’s for simple websites, block themes are good, but not for complex ones.

And this is definitely helping. This advanced query loop plugin is definitely helping expanding that. You can certainly learn more about it as he builds out his Ryan live streams, all his work live on Twitch every Thursday from 10:30 PM Eastern AM, PM right? No, I’m sorry. He live streams his work live on Twitch every Thursday, 10:30 AM, and then after a week or so he also updates the recording to YouTube and that’s where you’ll find his work on the advanced query loop plugin. And of course. We share those all in the show notes. Well, if you ping him on Slack or on Twitter or on his Discord, you can certainly also make requests to what to show in the Twitch stream. So this is really cool. Yeah, Ryan has done this now for a year and he has quite the following on there, but it’s definitely hands-on programming with blocks and plugins and additional custom fields. There’s quite a variety there.

Nick Diego: And it’s a fantastic resource for learning, especially for folks who want to build very advanced things. Whether you’re going to use his plugin, advanced query loop, or not, watching him build it will give you tons of resources and tools to build your own custom blocks. It shows how sophisticated block-based development can be. It’s not just your simple paragraph block and image. I mean, you can do some really powerful things with blocks and create some really sophisticated interfaces for users. So even if you don’t need advanced query loop, check out his stream because you’ll learn a lot of good tips and tricks on how to build your own custom stuff.

Birgit Pauli-Haack: Yeah, and for me, what’s also a good value is when I watch Ryan do his work, sometimes he runs into something where he says, I didn’t know where to do that, or there was a mistake and just his workflow on how to debug things and where to look up things. Yeah, it’s such helpful to watch for your own research and how to handle all the difference, be it the console on the browser or be it the arrow debug log or all the tools that you have. He uses them and he uses them as an expert, but also, when he starts out with something and said, how does this work? Or why doesn’t it work? It’s definitely good. Yeah, it also helps me with my imposter syndrome.

Nick Diego: Yeah. We all make mistakes, we all make mistakes, and he does a good job showing you how to dig out from them.

Birgit Pauli-Haack: If we all make mistakes, what happens next is the clue for fixing it. Yeah.

Nick Diego: I mean, half of development is Googling things, right?

Birgit Pauli-Haack: Yeah, definitely. Yeah. And there’s another plugin, and you mentioned it before, Nick, when we were going through the 6.2 thing was the create theme plugin. And that is created by developers from WordPress and as a tool for theme developers that are not touching code. So you could export a current block theme with the changes you made in templates, template parts, and global styles. That’s so powerful. And it also has other features. You can create a new child theme from the activated theme and then the activated theme becomes the parent theme. You can also create a completely new theme cloning the activated theme, and the result theme has all the assets of the activated theme and all the user changes. So that is also quite powerful and it saves the user changes as theme changes and deletes the user changes. So they’re saved in the theme in the folder and the theme JSON is updated and all that.

You could also use that plugin to actually create an empty theme, which sometimes you want to just start out fresh. And just recently there’s a new feature that came in that’s saves your user changes as a style variation. Remember, the 2023 theme was built with community support on the style variations. They had 38 submissions of style variations and then 10 of those came into theme 2023. But now you can actually create those style variations with the site editor and have your own personal theme 2023 style variation. So Daisy Olsen has started also a weekly live stream on Twitch and for Friday 10:30.

And she has been demoing how to use it and all she talks about is block themes, but also how to then use all the tools that are available. She posts also her recordings on YouTube. I know that Twitch removes videos after 14 days, so all the Twitch streamers are moving recordings over to YouTube when it’s appropriate. So those are two plugins that you definitely want to check out when you are new to two block themes. But Nick, you also have some great plugins in the repository. And do you have an update on them? I know it’s the block visibility plugin. What does that do? And then the icon block.

Nick Diego: Yeah, so I built block visibility thinking a year and a half ago now as a way to teach myself some of these new techniques. How do blocks work? I taught myself React to build this block, to build this plugin. And the plugin does something very simple. It was something that I used to have in classic WordPress where you could show, or dynamically show or hide content. Usually you do that with a short code or something like that. I was very popular with widgets. There were tons of plugins that would allow you to only show this widget on pages with certain categories or whatever. And so, in a block-based world where everything on a website is a block, well you then have a consistent type of content that if you can interact with it, if you can do something for a block, then you can basically dynamically show any part of your website.

So that’s where the genesis of block visibility came about as my own fun little project. It’s grown considerably. It’s now at 8,000 active users, which kind of surprises me. And the interesting thing about it is not really the plugin itself, but more so that I am personally anecdotally starting to see a decent uptick in people activating and using block plugins. The icon block is super simple. It’s literally a way to show SVG icons in a block format. And I tried to build it in a way that is as close to core as possible. It’s functionality that probably would never be in core because working with SVGs is not really something probably core wants to deal with, but it uses as many block supports as possible, which I try to make it as much like core as possible just for a fun side project. That also just reached 8,000 active users.

So if people are looking to build plugins, I’ve historically been a plugins developer. I have built themes before, but I like building plugins more. I’ve built widgets, I’ve built short codes, I’ve built all sorts of different plugins. But building blocks is really fun. And we now have tools like the Create Block Package that I know Ryan has put a lot of time and effort into supporting. It’s so much easier to build with blocks now than it used to be. And if you’re kind of on the fence about building custom blocks, I encourage you to do so.

One, there’s seemingly the market for them, and two, it’s such a fun ecosystem to play in. So I really enjoyed my two plugins. They’re doing quite well, which I’m proud of and thankful to the community for supporting. And I think that we really need, in this new block-based world, we need a rich ecosystem of third-party plugins to do niche functionality that core might not support. So I’m the biggest champion of folks building custom blocks, whether they’re on the repo or for yourself. And if you need help, let Ryan or myself know and we’ll help you with it. But yeah, start building blocks.

Birgit Pauli-Haack: Yeah. Well, thank you so much. And also to kind of just trail blaze a little bit more, you were ahead of the curve there as well. And how did that turn out? Yeah, I think the last time you were on the show, we were talking about your build a block in 15 minutes talk for WordCamp US, and it was quite interesting to see. I was in the show and yeah, what were the comments afterwards? Yeah.

Nick Diego: Tons of positive feedback. I think that, and honestly, more of that kind of thing we need to do. I know that there’s a lot of folks who build websites for clients and they’re on time constraints. They don’t have time necessarily to completely learn something new. Whatever it might be is maybe holding them back from working with blocks. Maybe they don’t even need to work with blocks because their workflow doesn’t require it. That being said, I think there’s a lot of opportunity, especially after 6.2. I think back to this time last year where WordPress was. We have introduced so much functionality. It’s so much easier to build a block theme. It’s so much easier to build a custom block. I look at 2023 as the age of maturity for block-based WordPress. I mean, we’re at a point now where you can do so much and build so many sophisticated interfaces. And I’m starting to see more and more people picking up blocks, exploring blocks. So yeah, it’s an exciting time to be in WordPress.

Birgit Pauli-Haack: Yeah, absolutely. Absolutely. And thank you for being such an advocate for block development and all that. 

Gutenberg 15.0

So, that brings us to the Gutenberg plugin releases. We have two to cover. The main things we already kind of talked about in the 6.2 thing, but the Gutenberg 15.0 was released on January 18th. It had 109 merch PRs by 42 contributors. Seven of them were first time contributors. Yay, first time contributors, congratulations. 

Enhancements

And we had a few enhancements. One was allowing the resource of the sidebar frame for the side editor. So the side editor has on the left hand side the menu where template parts and templates and other things, forgot what it was. There are more menus there. And now you can change the frame, the space that the sidebar takes from your canvas, which is really cool. You never had that before.

Nick Diego: Yeah. Also, if you slide it all the way, you can also see what the site looks like in mobile view, because it also resizes the site editor itself. So that’s a really cool one.

Birgit Pauli-Haack: Yeah, it does it only in browse mode. When you click on the edit button, the blue edit button, you kind of get the full editor again, full screen editor, but that’s for the menu item. Yeah. And then your big W or side icon gets you back to the menu out of the editor. So that’s kind of the workflow from browse mode to edit mode. Yeah. Then yeah, go ahead.

Nick Diego: So I was going to say, one of the cool things that was kind of frustrating for folks, that if you were in a certain mode in the editor and you refresh it, sometimes that mode won’t stick. So now that’s synchronized. So if you were to edit a mode and then refresh your page, it will go back to the same state that you were just in. So small little like quality of life improvements, but big ones if you’re in the site editor all the time. And another quality improvement was copy and paste, the shortcuts for copy and paste, now work in the site editor, which obviously is seemingly small, but a very important fix that we’re seeing there.

Birgit Pauli-Haack: Yeah. And you only notice it when they don’t work. But yeah, when you try to do control C, control X and control V or command V for the paste and in which you use on any other editor around the world, be it your email, be it your Word or your Google Docs or even and all of a sudden in the editor it doesn’t work. So yeah, it definitely has been updated there. Now it comes to you. We talked about paste style to the block settings. Yeah, we talked about that. And then it’s now in 15.0, so if you upgrade your plugin to 15.1, 15.0 is still out. Yeah, 15.1 hasn’t been out yet. It’s only going to be released on February 8th, but you will be able to use those paste styles. And the next one is prevent an image from being resized larger than its container. Yeah, that was one of the things that really mixed up your layouts when that was not handled, but now it is and that’s a very good thing.

Nick Diego: Yeah. Working with image sometimes in the editor is tricky, and I think that this really makes it much more intuitive in the editor, between the editor view and the front end view. So that was a really good improvement to see there.

Birgit Pauli-Haack: Yeah. And you see the borders now, so you know when you kind of go into outside the container and then it doesn’t let you, yeah.

Nick Diego: Next up we have some improvements to navigation. There’s a lot of improvements to navigation between 5.0 and 5.1. For longtime observers of the Gutenberg project, navigation is probably one of the hardest things to get right and there’s so many moving parts in managing there. So, little improvements like add an icon, add a sub menu item option. There was a Phantom ghost inserter little artifact that was there that was confusing. Improving loading indicators and replacing setting menus when custom. This is going to sound too complicated, but lots of improvements to navigation that make it more intuitive and make the workflows better. And we’ll actually see some more of those as we continue into 15.1.

Birgit Pauli-Haack: Right, right. Yeah, the navigation block actually got a complete redesign or thinking of the process of creating menus in the block editor and it became the page list block got kind of a rejuvenation and a repurposing for that. So it’s in the sidebar, you can use the page list block, or the sidebar uses the page list block to actually create the menus. So there are some noise additional features in that particular block as well. Then the sidebar tabs, we talked about the block inspector tabs experiment with the split controls for the tabs. It will not see an additional tab whenever you use the navigation block and then it kind of uses the off canvas kind of navigation editor for that.

Nick Diego: Yeah, so back to we were talking about tabs, so more tabs in the interface. And I think that once you get, it’s a little jarring, from before, but once you get used to it, it’s such an improvement. So now instead of having to manage the navigation menu all the way in the actual block, you can do it right on that sidebar off canvas functionality within the tab. So yeah, you’ll start to see a lot of tabs, but it’s a good thing. It will really make editing easier.

Birgit Pauli-Haack: Especially for the navigation block where you never had enough space to do something like that or you never hit the right block or right border or right inserter. That was quite some confusion going on and this is definitely coming to 6.2, the total rethinking about the navigation block. And there are little things there. We talked about the next item is the edit the block style variations for global styles. We talked about that. That is now in Gutenberg 15.0 available. So try it out and see how that’s going to work. And those were the highlights from 15.0.

Nick Diego: Yeah, there was one more, which was the sticky support for position, which we talked about. So that will be coming in 6.2 specifically for blocks that are not in containers. So that will enable sticky headers and footers. Again, this is kind of a first implementation, and as we move forward with Gutenberg and WordPress 6.3, there’ll be more position functionality, but this is a good first step.

Birgit Pauli-Haack: And if you want to help testing that, use the Gutenberg 15.0 plugin a version and just play around with it. And the more feedback you get in before beta, then the core contributors can fix some of the things that they haven’t found before, because they haven’t used it as much as you would. So yeah, that definitely will help how that’s going to turn out in 6.1, 6.2, sorry. Good. So that was 15.0. I haven’t seen anything else come in there. 

Gutenberg 15.1

Then let’s get right into 15.1 with the caveat that we are looking at the change log from 15.1 release candidate one, which was released on February 1st. The final release will be February 7th and everything that comes in before on Monday, no, on Tuesday will be in beta one from that particular release. So that is actually feature freeze from main features. All right. Do you want to take it on?

Nick Diego: Yeah, yeah. So the first thing going back to navigation was, in the site editor, there’s now in the browse mode, there’s now a navigation section where you can move around and manipulate the navigation menu. This is kind of an initial implementation and we’ll see in the future how much more gets built out, but it’s kind of neat. You can, in browse mode, you can modify your main navigation easily. The initial implementation is starting to look a lot like that, the classic menu management screen where it’s kind of an abstracted view of the menu and you can move things around and adjust things. So it’s a really interesting start. Personally, I would love to see in that browse menu sidebar being able to edit your templates, your template parts and your navigation and see all your menus there. A first step, but a really good one, and I think it’s really intuitive and it will be helpful for users to edit navigation menus.

Enhancements

Birgit Pauli-Haack: Yeah, the next big feature that is coming with 15.1 is the add shadow presets and UI tools and global styles. The box shadow was already in there, but now it comes with a UI for users to change the drop shadows in the global styles. It’s a first iteration. Oh no, there won’t be any. It’s only going to be for button. And there is on the developer news blog, Justin Tadlock, who has quite a nice tutorial on how the block shadow feature is going to work for themes. So yeah, it’s definitely something that was missing before. Yeah, any thoughts on that?

Nick Diego: Yeah, so the shadow functionality and what Justin wrote about is you can add drop shadows via manually adding the attributes to a block. So if you’re a theme developer, you’re designing a template and you can manually add that to the template file. We were just really missing that UI and the preset functionality. Similar to sticky UI for shadow and user experience for the shadow control is a little tricky, which is why the first implementation was get the functionality there from a template builder from a code perspective and now we’re starting to see the presets and the UI tools. So right now, there’s UI in global styles for button to add a global button styles with Shadow. First implementation, assuming that all works well and is intuitive, it will then be rolled out to additional blocks.

So the next one, I just wanted, it’s pretty minor, but I think it’s one that’s been sitting around since early last year. So a lot of blocks now you can add HTML anchors to or ID tags to. And dynamic blocks did not have this functionality. So things like post lists and I’m not remembering off the top of my head all the dynamic blocks that we have, but now it does. So anchor block is now supported across dynamic blocks. Pretty small change, but one that was needed because navigation and navigation items are dynamic blocks and so they did not have HTML anchor support. So a small little thing that people have been asking for a long time. It’s good to see that that’s been included.

Birgit Pauli-Haack: Yeah, it’s really hard to target multiple things that don’t have at ease and could be really good. Yeah. And yeah, 15.1 comes with a ton of changes to the navigation block. Part of it is the off-camera navigation as a default experience. Then adding manage menu buttons for the menu selector dropdown. So, if you switch from one theme to the next, menus are persistent. And also, if you change from the classic to your block theme, you will find your classic themes menu available through the navigation block. That’s also very seamless now. And there are also custom labels for the navigation block view through the list view appender so you can name things quite a bit. We talked about copy and pasting styles menu items to separate menu group? No, we didn’t. That’s also navigation enhancement where you can copy and paste styles menu items to a separate menu group so it shows up in different places where you use that.

Nick Diego: Yeah, little enhancements that go a long way. As we move down the list here, we also saw a lot of improvements to the custom CSS, the ability to add that custom CSS right in global styles, some refinements to descriptions, refinements to what we’re calling it. Also, the custom CSS used to be just a panel that you would see immediately when you went into Global Styles. It’s been a little bit more hidden. The main reason, once you know where it is, very easy to find, but for new users to the site editor, it’s a little overwhelming to be presented with all those options. So now that is a bit hidden within the global styles.

Birgit Pauli-Haack: Yeah, and it also comes with a validation kind of process. So when you add your customer CSS to make sure that that’s actually valid code, it gives you a little message there and checks it out. So it’s really good. There’s also the per block custom CSS. We talked about it earlier. It comes with 15.1. It’s very late in the process to be tested quite a lot in the Gutenberg plugin. But check it out and see how that works for you. I’m really interested on the use case for that. I also saw a use case or request for use case for getting post single post custom CSS panel, but that is, I think, will stay plugins territory.

There is a plugin in the Repo where you can do that, but I don’t think it’s going to come to core because it’s not block-based anymore. It’s kind of content based and that’s a little bit tricky to do. Yeah, and you mentioned it before, 15.1 also adds some of the missing controls to the flex layouts, the vertical alignment for the stack blocks, and also the ability for minimum height in the stacks and make the flex layouts now really powerful for theme developers as well as site owners.

Nick Diego: Yeah, really excited for this one. This is going to reduce the amount of custom CSS themed developers need to build some sophisticated layouts. Really a cool one. One of those little minor things on the list here, but actually is super impactful.

Birgit Pauli-Haack: Yeah. And I see we also highlighted, for the sticky position, you mentioned it before. It’s a block that’s not on a root block. Kind of being on the canvas will not be able to be sticky for now because the user experience concerns are a little bit not yet worked out. So it will be a limited functionality. And then the last part is renaming. So web fonts has been around, talked about since 6.0, was supposed to get in 6.0. There was a big flag raised from Core Committers and since then the core team has worked on that. 15.1 comes with a rename of the font’s API, but I also saw in our release channel on the Mac block that Tanya Mork announced that the fund’s API won’t make it into 6.2. She posted it on February 1st in the release channel. That is actually public. You can anytime kind of go into the six dash two dash release dash leads channel on the Make WordPress Slack and see what the discussion is about.

So, it will not make it. It’s slated for the Gutenberg plugin in 15.1, but it comes out only a day after beta one for 6.1. So 6.2 and it won’t make it the API. She finds it needs several Gutenberg releases to stabilize. And after they did a complete rewrite on it and renamed it and the last rewrites happened for Gutenberg 15.1, but that’s just too close to the beta release. The next focus will be to getting the API stabilized, assessing and improving the performance of it, and then adding automatic font and queuing for all fonts in clover styles. And then developers upgrading to use a new API with a backwards compatibility layer. And that is temporary. So all those seem to be doable to target very early for the 6.3 release alpha. That kind of starts after 6.2 is released, which is in May. So they’ll find things in the core nightly and goodnight nightly after the 6.2 release.

Nick Diego: Yeah, it’s one of those things where it’s taken a while, but it needs to take a while to make sure everything is in the right shape. And we just got to wait a little bit longer, but very soon we’ll be able to test it in the Gutenberg plugin, which is awesome.

Birgit Pauli-Haack: Yeah. And then we have one last item, I think, from 15.1 that we talk about. Make child themes inherit parents style variation, which is pretty cool.

Nick Diego: Yeah, block themes is one of those things where people are familiar with child themes and block themes obviously want to support child themes as well. And if you have a parent with a bunch of style variations like 2023 and you want to make a few changes in a child theme, you want to also pull those style variations over. So a nice intuitive improvement to child theming in a block based world.

Birgit Pauli-Haack: Yeah. Well, and that, dear listeners, concludes our Gutenberg plugin 15.1 release change log. And we are pretty much at the end of the show. And it’s been quite the long show, but it’s also important to talk about what’s going to buoy you in 6.2. So thank you so much, Nick, on walking us through or going with me as a co-host through all those different changes and talk about the advantages and disadvantages of many, many things.

Nick Diego: Yeah, thank you again for having me. I cannot wait for the 6.2 release. I think we’re going to get so many new functionality that will empower block builders, block theme builders, end users, so on and so forth. So very much looking forward to it. And thanks again for having me.

Birgit Pauli-Haack: Yes, and that’s wonderful. So, as always, the show notes will be published. At gutenbergtimes.com/podcast. This is the episode 79, and if you have questions or suggestions or news you want to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. And I also want to have, I will share the last WP Briefing episode by Josepha Hayden Chomphosy, where she talks about now if Gutenberg part two is kind of coming to an end, what does that mean? We still will add refinements to the plugin into the editors, even if the collaboration phase kind of starts soon in 2023. But I will share that so you can hear it from the executive director of the open source project. I also am really excited for the 6.2 release, and I hope people hear you with the episode 80 of the Gutenberg change log in about two to four weeks. I have not yet scheduled it, but I’m also traveling, so I’m kind of be patient. It will arrive in your inbox in your podcast. All right, that’s it. Thank you for listening and goodbye and have a wonderful time with testing 6.2. Bye bye.

Leave a Reply

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