Gutenberg Changelog #80 – WordPress 6.2 Preview, Gutenberg 15.2 and 15.3

Podcast Cover Gutenberg Changelog 80 with Rich Tabor and Birgit Pauli-Haack
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #80 - WordPress 6.2 Preview, Gutenberg 15.2 and 15.3
Loading
/

Rich Tabor and Birgit Pauli-Haack chat about WordPress 6.2 Preview, Dev Notes and Fieldguide, Gutenberg 15.2 and 15.3.

Show Notes / Transcript

WordPress Developer Blog

Summary: Community Themes Project Kickoff

Rebuilding my website using a block theme by Felix Arntz

WordPress 6.2

Dev Notes

What’s new in Gutenberg 15.2? (22 February)

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello and welcome to our 80th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about WordPress 6.2 Preview, Gutenberg 15.2 and 15.3. I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate and a full-time core contributor to the WordPress Open Source Project. I’m thrilled to have with me today Rich Tabor, product manager for the WordPress Open Source project and part of Automattic’s Five for the Future program. Hi, Rich, thank you so much for taking the time out of your very busy week to be here with us and talk to our listeners. How are you?

Rich Tabor: Hey, thanks, Birgit. I’m doing pretty well. I can’t complain, to be honest. Thanks for having me on this show. It’s been a long time coming here.

Birgit Pauli-Haack: Yeah, I think so, for two years or so.

Rich Tabor: That’s right.

Birgit Pauli-Haack: In and out. For many who have known you in the community, you are an early adopter of the block editor, you and Jeffrey Carandang worked on several things together in the early days, and that’s about five years ago now. Since then, you presented at WordCamps, virtual and in-person. I remember your talk at WordCamp Atlanta. No, was it Atlanta in 2019? 

Rich Tabor: Yeah, it was.

Birgit Pauli-Haack: … Boston ’19 that I saw you, but both of them are fine. Also, your talk on WordCamp US in 2021 and last year, so there’s a lot you did in the last five years.

Rich Tabor: I’ve been exploring block editing since I guess before it landed in WordPress. WordCamp US in 2018, I believe, is really what kicked me into gear on designing and building block experiences for Gutenberg. Since then, I’ve been building, launching, and sharing my knowledge however I can. Code Blocks, the project I did with Jeffrey Carandang, it’s now under the GoDaddy brand, I was one of the early explorations and just a really great entry to learning the ins and outs of Gutenberg. I personally learn best by doing something real and releasing an open source block plugin for folks to actually use was certainly the catalyst to where I am today.

Birgit Pauli-Haack: I used Code Blocks together with Atomic Blocks. Michael Allison was pretty much also on the forefront and it must have been before 2018, though, WordCamp US 2018, because I think wasn’t that there when you already sold Code Blocks to GoDaddy?

Rich Tabor: I think it was January 2018. In 2018, it was the like, “Hey, I need to get serious,” moment. Maybe it was ’17, I don’t know, but right around there, it was like the, “Hey, let’s learn this and let’s do this.”

Birgit Pauli-Haack: Now, as a product builder, what do you find now fascinating about the WordPress, the block editor, the Site Editor, and this potential to empower folks?

Rich Tabor: I think that potential is huge. The WordPress experience is changing and evolving, and it’s slowly becoming more intuitive and better to use on the site level, not just on the post editor level. I just think that the opportunities for empowering those creatives and publishers and just people who want to share something and have a little ownership in it on the web is paramount to the future of the web, and I’m just so thankful to be a part of this time in WordPress.

Birgit Pauli-Haack: It’s been quite exciting to see what people come up in their creativity, what they do with the sites, what they do with the design tools, how they manage the space and the spacings and the dimension controls. There are quite a few additional explorations there that are totally new to WordPress, nobody really, apart from additional third-party page builder, but to have that right into the software is such an amazing product. I’m really happy about that. I’m glad we are finally here.

Rich Tabor: We’re getting there, yes.

Birgit Pauli-Haack: We are there. To the Site Editor, do you think it’s ready to have people use it in production and all that?

Rich Tabor: Oh yeah, certainly. I think that there’s always improvements to be made and there’s still a lot of lines to draw between the dots to connect a lot of these experiences, but overall, as a holistic editing experience for your site, it’s really been fine-tuned in the last couple of maybe half a year or so, since the release of 6.1, it’s really tightened up quite a bit and there’s more to do, but I’m pretty stoked at where we’re headed.

Birgit Pauli-Haack: Me too, me too. We will talk about it when we go to 15.3, I had another great experience with the new tools that are in there, but first of all, we have some announcements, well, actually one announcement, but it has multiple facets there. 

Announcements

There is an official WordPress Developer Blog and in February, there were six new posts published there and one of them was a block theme resource roundup by Daisy Olsen. If you are WordPress developer, either you have already experience with block themes, you get some resources there, as well as if you just get started and want to have one page where you can have a startup page, so to speak, get started and get to the resources that are available on wordpress.org, all through learn, through the Developer Blog, through documentation, the theme handbook, it’s a great roundup of all those resources.

The next one is a little bit is a topic that is really high on our minds and finally, we have a post up there, and you probably can talk about that, as well, it’s about the intrinsic design theming and rethinking how to do design with WordPress. Justin Tadlock wrote this post because there were a lot of questions about the responsiveness of WordPress, that’s one thing. The other one is many people that come from other page builders, they miss their viewpoints, the three viewpoints that they have been using for the last 8 or 10 years. But intrinsic design is more the fluid typography, so no matter what the screen size is, it adapts to the screen size and there’s also fluid spacing that’s now part of WordPress. Is that enough, what do you think, Rich?

Rich Tabor: I think you hit it on pretty good. It’s the idea that when you design something in WordPress, in this case, that it inherits the responsive nature of the viewport, instead of you having to actually declare those values, like instead of declaring that you want to font size smaller on mobile or even a column going to Stack on mobile versus on desktop, maybe it’s side-by-side. It is something that intrinsically will Stack whenever it becomes too small to render side-by-side, so trying to figure out those controls, it is tricky to be honest, but there’s been a lot of improvements in that direction and overall, it does simplify the editing experience quite a bit. That doesn’t mean that we’re there, by any means, on the controls that we need, but if we do improve some of the Row and Stack capabilities and some of this intrinsic design methodology in WordPress, I think it will move forward to the point where it’s less of a concept that you have to think about and more of just a way that you expect it to work.

Birgit Pauli-Haack: I can see that those viewpoints, that’s more for designers rather than your site owners or those who just want to build a website and hope that it’s all working out of the box, and those concepts can get really confusing, but also very hard to manage. I saw a plugin that was built on the block editor, but they had six viewpoints for every design decision. I don’t think that’s where we want to go as a product, pretty much, or for the normal user or even the design user, the theme developer, that they have to be so granular. It’s not so much thinking about the first version of it, but also where did I change this? Is it in the viewpoint of this one or this one or this one?

With the proliferation of the screen sizes, they go smaller, but they also get bigger, I think it’s going to be harder and harder to actually hit the right size for the viewpoints. I think there was a very interesting article from Justin Tadlock and there’s definitely a lot of discussion also on there, so dear listeners, you can definitely spend a half an hour or so reading that and also reading the discussions. Another article on the Developer Blog explains the difference between the static and dynamic blocks. Joni Halibi wrote this one. I know it was a topic close to her heart. She’s a developer at Georgetown University.

Rich Tabor: That’s right, yes.

Birgit Pauli-Haack: Thank you. I heard her talking about it, so I asked her if she wanted to write about it. It’s definitely a great rundown of the pros and cons of static and dynamic blocks. Dynamic blocks are rendered with PHP, static blocks are everything the editor, as well as frontend is coming from Post Content from the JavaScript. I think the biggest hurdle is the updating during development and after development. I’m jumping over the other lists there.

There is just today, Michael Burridge published an article on how to deprecate static blocks and have some version, so you have a version of a block on the site and you use it multiple times and then a new update comes for the block. Sometimes when you open up the post into the editor and there was a block in there and it wasn’t deprecated right, it has this error message in there, so something happened with the block kind of thing, and some of you have already seen it, and this prevents that from happening. It’s not difficult from the mechanics, but it’s definitely something to think about when you do static block development. How did you feel about that when you came across it in your early days of block development?

Rich Tabor: I feel like that’s a pointed question. The idea between static and dynamic blocks is really powerful. Dynamic blocks are definitely, I would say, probably the primary use case on most of the more complex blocks that you would build, in particular in third-party situations like rebuilding a custom block for a client, because you don’t need deprecations at that point. If you need to make changes, you can, because it’s all rendered in PHP, and the tooling around dynamic blocks has improved quite a bit, as well, with the render.php file that you can load in and it makes templating a much easier process than it was originally. But deprecations are a necessary part of static blocks and they can be a little frustrating just because it sits there forever at that point, but if I’m building a custom block these days, I probably would lean more on the dynamic side, if possible.

Birgit Pauli-Haack: I can see that. There are some new ideas actually happening that also will be on tap into the dynamic block development there, and we will talk about it on the Gutenberg Changelog when the time is right. Two more posts were launched just recently, one was how to create a custom block that stores Post Meta. That’s certainly a big question that a lot of people had and Ryan Welcher answers that question nicely, walk you through step-by-step, and explains very much most of the steps that are necessary to make that successful.

And then the other post is converting your short codes to blocks, and that one is from Jonathan Bossenger and he has his use case that he… It’s not really a conversion, it’s recreating something that was a short code into a block and make it more user-friendly. Short codes had their good usage, but with newer modern interfaces, they are just too cumbersome for site users to write all those text strings and not forgetting a comma or something like that, so converting them to blocks is definitely a good way to go about them. Any thoughts about those two problems? It doesn’t have to be from the articles.

Rich Tabor: I would say they’re both well-written and good examples of writing tutorials and documentation together, in a sense. There’s a short code that Jonathan’s actually converting in real time, you can see and watch it, I think you might be able to listen to part of it, but the idea that you’re taking a real-world example and converting it, I think is very powerful. And then the same goes for the other one about storing Post Meta with the custom block. I think it’s very powerful and hasn’t been done very often, or at least not often enough that’s front and center, because it really is a powerful way to manipulate Post Meta, but also site options. I think it works very similar if you’re updating the site options, which is what the site title block does and the Site Logo block. But you could do other options, perhaps, like I experimented with pulling in the WooCommerce phone number into a block, but if you update it there, it also updates it in WooCommerce, again, connecting some of those dots that right now are very disconnected and this is one of those steps in that direction.

Birgit Pauli-Haack: Well, that’s actually a good idea to look beyond the WordPress core and see where connections and integrations are made. We definitely share the links in the show notes that are coming out with this episode or you can just go to the Developer Blog and read through the latest What’s new for developers? (March 2023). That’s the second edition of a roundup post of what’s new not only in a block in the block development, but also for core and the learn places, but it’s specifically for developers, extenders, plugin developers, theme developers, or agency developers so they can get up to speed very fast. 

Community Contributions

We have, in the section of community contributions, there’s one new project, the theme team kicked off the community theme project, and I believe, Rich, you were part of it. What can you tell us about it?

Rich Tabor: Yeah, certainly. On March 7th, we had, I think, over 20 people participating in the Hallway Hangout session to discuss it. This community theme project is an interesting way to start really just encouraging experienced and new WordPress contributors to create more themes, in particular, block themes. It was a big learning curve to how block themes are created compared to existing themes, but really they’re much more of a simple system that’s design-oriented, so some of the talks were centered around a designing a theme within the editor and not necessarily with a different design tool like Figma, which is a huge challenge, but I really think it will help open up a lot more eyes to the issues that we need to continue resolving within the editor to encourage more of the explorative design work that designers can leverage to build beautiful themes.

There’s a Slack channel within Make, it’s the Core Themes Projects channel, there’s some discussion there. There’s a repo, I think it’s WordPress/community-themes. The idea is that you can start creating themes and submit them as a pull request and collectively, we’ll all try to help get these situated in the right way, so where we’re all learning and growing from this experience of building themes together.

Birgit Pauli-Haack: I’m really excited about this. This started with the theme team, thinking about the latest default team that was 2023, where there was a call for sending in style variations. There was a base theme that was made public very early and then there were, I think, 19 theme designers sent in about 30, almost 40, style variations, of which 10 made it into the final release. But that kind of community collaboration is always very fruitful and very creative and it helps people really learn about things, but also push the boundaries so much more than just brooding alone in your own remote home office. I think that’s a fantastic way to get the community also in producing more than one theme per year; I hope that is what will come out of it. The theme will all be published under the username of WordPress, so that’s the new part of it, I would think. Do you already have an idea for a theme that you might want to work on?

Rich Tabor: I’ve got the bug to redesign my blog again. I love it, but I want to remove some of the barriers to publishing. Featured image, right now, it’s almost required in my current blog design, and then I want my headings to be a certain lead flow, so I want to try to identify the things that are blocking me from publishing more and start designing in that essence, so it could be more of a thought feed instead of only technical blog posts, in a sense. That’s my personal project I’ve been exploring a little bit on.

Birgit Pauli-Haack: I saw that the list of block patterns for the Query Loop actually would probably help you with that, because there are quite a few text-based lists design available now in the Block Pattern Directory, as well as I think that are now coming out, as well.

Rich Tabor: Yeah. There’s more opinionated design elements to some of these patterns, which I think is great because at the end of the day, if you don’t want to use a pattern, you don’t have to use it, but if you do want to use one of these more interesting, opinionated designs, then it’s a great start to building out the rest of your theme. I’m really looking forward to even more of the patterns coming down from WordPress.org.

Birgit Pauli-Haack: Yeah. Oh, speaking about switching the site up, Felix Arntz, who is a software engineer with Google, shared his experience on doing exactly that, switching his site from a classic theme to a block theme and his post is exactly that, rebuilding my website using block theme. It’s a very long post; he recounts all the steps in detail that it took him to convert it, and it wasn’t so much… It was minimal code editing, he says, in part, but he also had to update his custom blocks, so that’s part of it. But he also, and that was very interesting for me to read, is that Felix is also a member of the WordPress Performance Team, so what he did was also measuring the performance before and after the redesign and it really piqued my interest, and you definitely should read it, dear listeners. I’m only Miss Numbers on the podcast, it’s really hard, but I just wanted to say one number.

He did two steps. One was just recreating the same pages with the block theme, the header and content and Query Loop and that part and then measured it, and then he did additional tweaking and he actually explains very detailed how he did those. And then with the first step, just moving it over to a block theme, he had an improvement on the LCP, which is the longest content paint, one of the web vitals. He went from something a little over 1 second to 600 milliseconds, so that was an almost 38% improvement of the speed. But when he did the first performance tweaks, he went down to 452 from 1 second to 0.4 second, that’s an improvement of almost 60%. That was the first time that I actually saw this so very much spelled out and I have a trust in Felix that his numbers are actually averages from multiple tests, he explains that also in his post, but this was a very interesting post in many, many directions. Also, learning more how to do some more performance tweaks was one. I’ll leave the link in the show notes and definitely go and read it.

Rich Tabor: I would just like to echo what Felix writes at the very end. He says, “Block themes in full site editing, the effort for the Site Editor has evolved quite a bit since it originally launching in 5.9.” He says, “Here, I can with confidence say that it was the right decision for me to jump on that train now. If you’ve tried block themes a while ago and weren’t satisfied, maybe give it another try.” I totally agree with that sentiment. Especially if you have a personal blog, I would say just give it a shot, even 2023, put that on there and start designing it within the editor, then start running with it, you can see what happens.

Birgit Pauli-Haack: If you are not a developer and a little bit of hesitant to change something in production or on a live site, definitely be cautious. There is a new tutorial up and I just listened to it a couple days ago with Sarah Snow, she actually did the same thing. She went and replaced her old theme with a new theme and rebuilt her website, but she also walks through how she tried to avoid all the pitfalls to take her site down and all that, so that is also for non-developers, a very good tutorial to look at and to watch. 

What’s Released – WordPress 6.2

That brings us to the section of what’s released? Of course, we start with this week, it was release week with multiple releases.

One of them was the 6.2 Release Candidate 1 and the contributor published 12 dev notes that are related to the block editor in the Field Guide. The Release Candidate 1 is that point in the release cycle where there is hard string freeze, the Field Guide is published, and the emails go out to plugin and theme developers about what’s new, that send the Field Guide and also to test their products against the new version so they can figure out all the incompatibilities or make it compatible to the version. The final release is on March 28th, 2023, that’s, right now, 18 days from today. We are recording this on March 10th. Rich, you were part of the release squad as lead for design, what was your role there, or is your role there, you are not done yet?

Rich Tabor: No, not quite yet.

Birgit Pauli-Haack: We are not done yet.

Rich Tabor: That’s right. I think there’s three focuses, especially around this release. But the first, I would say it’s keeping a general pulse on what’s coming, what’s being worked on, keeping contributors focused on delivering that best, optimal WordPress experience that’s always right there on the horizon. It doesn’t mean we’re there today, like I’ve said a couple times here, but if we set our gaze in that direction, I’m sure we will continue refining and iterating towards that best experience, so that’s the first. The second would be the about page. The WordPress about page introduces you to the latest and greatest parts of WordPress that have been put into by all these contributors over the last release.

That’s been a fun project working with designers from the design community and really putting together the images and the layout and the structure, even the copy, to make sure that it portrays 6.2 as intended. 6.2 has a lot of new stuff in it and it’s hard to distill that into one page, but it’s been a welcome challenge, for sure. And then the last bit, this release, we did a product demo of 6.2, I did it with Anne McCarthy, and that was a very nice way to really showcase what’s coming in a live action, here, this is like a real demo on a real site that I set up. I was using 2023 and I designed it a little bit differently so that it showcased some of the design tooling in the actual demo itself and it was great. We had lots of help, lots of folks really chimed in to make that what it was, and I thought it went pretty well.

Birgit Pauli-Haack: The site was beautiful. If you, dear listeners, haven’t seen it yet, go, and of course there will be a link in the show notes, but go to the product demo and watch that video. You will learn a lot about 6.2, but also it’s actually a joy to watch, so that’s definitely….

Rich Tabor: Awesome.

Birgit Pauli-Haack: It shows that a designer was preparing for the product, absolutely. As mentioned, there are block editor related dev notes, so what’s coming, what should developers watch out for? We are not going through all 12 of them, but there, we have a few. First off is the introduction of the Block Inspector tabs, which is a design, an interface change, that your customers or you, if you build sites for others, will need to get used to, because now the settings are in two tabs, one is the settings tab, the other one is the appearance tab. In the developer note, we learn how a custom block can manage that for themselves, where do the settings go or the styles? I know that some custom blocks have their own color picker and if they don’t do anything, they will find it under settings and not under appearance, for instance, because settings is a default. There’s a little trick there that’s in the dev notes how to do that, there’s a new Group attribute that says either style or settings.

Rich Tabor: Next step, we have shadows that are added to global styles in 6.2. These are shadow presets that are provided within the core theme.json file, but themes can also provide their own shadow presets using, I think it’s settings, shadow preset. There are four or five provided by core, but they’re pretty easy to override. In the future, releases will include the shadow control elsewhere. Right now, it’s only on the button block and that’s to restart refining it and tightening up the experience first. Some other ideas that are circling are perhaps allowing multiple shadows, so how do you Stack them, perhaps? Of course, the blur, the X and the Y, trying to really hone in on the design of the shadows, as well, but right now, they’re just preset-based. I think they’re nice, but they do need a little bit more work before we move them available on more blocks.

Birgit Pauli-Haack: You said that they are now only available for the button block, they are not available in the post editor, only in the Site Editor in the style sidebar, just because of that….

Rich Tabor: That’s right.

Birgit Pauli-Haack: … that you only can do global studies with that. The next one is the introduction of an HTML API, which is, it’s very developer-oriented, so it’s highly technical, but it’s a uniform way that WordPress developers now can travel through parsing a website and changing out tags. That was always prone to rejects and all the other things that was only prone to not always hit the mark and this one is now so much better. People can use it not only for the block editor, but of course, also for their PHP plugin or other apps that they add to the WordPress.

Rich Tabor: That’s right. The next one here is the sticky position block support was added in 6.2. Right now, it’s featured on top-level Group blocks, so only the Group blocks that are within the top level of your document, so in the list view, it’s the first level. It’s this new prop that right now enables you to set it to sticky and if it’s set to sticky, even within the editor itself, the actual Group block will stick. Right now, it’s not open to other blocks because there’s still some UX considerations around sticky positioning, because it doesn’t always stick if the surrounding element isn’t tall enough to allow for sticking, so trying to figure a smart way to communicate that is a very important part of that experience, otherwise you would think it would stick, but it doesn’t. I think that that’s something significant to iron out, but that’s already in the works for, hopefully, the next release of WordPress.

Birgit Pauli-Haack: There’s a lot of trial and error to do and a lot of people have a different ideas on how is this supposed to work, but I am really looking forward to it. Well, the sticky header, we all know about, but with mobile, you also need to think about a sticky footer, because that’s where your thumb goes. When you look at a webpage, you are not going to the top, you are going to the bottom, so there are quite some new variations possible. The next one is that a lot of people waited for it and now, here it is, custom CSS in the global styles, that’s one part, but also you can have custom CSS4 on a block level, so it’s now here. It’s a little bit more hidden, so it’s also in the style sidebar, it’s not upfront in the left-side menu item like it was for the customizer, but it’s there and it works and it’s beautiful.

Rich Tabor: Yes.

Birgit Pauli-Haack: A few people asked me if it would also come to the post editor so you can do it on a single instance of a block, because in the style sheet, you only do it for the block and then it propagates over the full site, but if you just want to do one section in your per… That’s not possible, unless you do an additional class name in the advanced section and then go to the standard sheet and put that class name and your styles in there. I have an answer for that person who had the question.

Rich Tabor: Yes. And then the next big one is the minimum height dimension support, and this is a new block support feature added to 6.2 for the Group and I believe the Post Content blocks and it’s opted in by default. This makes the Group and Post Content blocks perform much like the Cover block, where you can set a minimum height that it would take over in the page. It’s useful, for example, if you had a footer and some content and you wanted the content to keep the footer down below, so you can set a minimum height of the content using a viewport unit, perhaps, and then that would apply it to where the footer would stay towards the bottom of the page and not be meshed up at the top. It’s pretty self-explanatory and we already have this in the Cover block, but it starts to extend it out into other blocks.

Birgit Pauli-Haack: Wonderful. Excellent. Also, there is not a Card block per se, but there is a component there, but I think with the minimum height, you actually could use that Card block for all kinds of different content there. The Miscellaneous Editor changes in WordPress 6 is that that place where all the little things go in. There are a few little things that are not new features, but they are extending existing features. The first one is the fluid typography now also has a minimum font size in the UI that you can set, I think is it UI? Yeah, I think so. You could always do this for the theme. How you can use it, I read 13,000 words in three days or something like that, forgive me for that. That’s why in 6.1, there was a minimum, but there was a hard coded minimum and now it’s you can set this as a theme developer, as well, in the theme.json. Of course, it’s not in the UI yet, fluid topography is not that yet in the style things, I guess.

Rich Tabor: For another Miscellaneous improvement, we have sizing controls for flex layout children. This means that when you have Container blocks, like the Group block and Row and Stack blocks, you can set a flex-type layout which provides controls for the blocks within those. If your blocks are stacked vertically, then it would be a height control, if they’re stacked horizontally, it’s a width control, so it’s dynamic in that sense. You can set, I believe it’s fit, fill, and fixed, so that’s where it either hugs the content, fills the available space, or is a fixed value. This plays into the intrinsic design that we were talking about earlier in starting to add more controls that allow a block to either try to take up only a space as it needs, fill up all the space that is available, or stay within constrained value, so it’s one of those improvements in that direction.

Birgit Pauli-Haack: The next one is there is a new CSS class attributed to every Heading block, so now you can control the Heading block more granularly for each of the levels, and you can, for instance, say a blue background for all the H1s and a pink one for all the H2s, which is now easily done through the theme.json by adding the other style for the elements. You have style elements, each one, color, background, that would be the latter, and the other one would be styles for blocks and then Heading and then the elements, then each one, and the background, so it’s quite granular in the controls, that’s pretty cool.

Rich Tabor: Yeah, I agree. I believe the last one for the Miscellaneous Editor improvements is the ability to edit block style variations from theme.json. This is a new theme.json API that allows existing core block style variations to be styled directly from theme.json. For example, the Image block has a rounded variation, so you could target the rounded variation and set its border width or border radius within theme.json now, which is pretty neat.

Birgit Pauli-Haack: I believe then, was it in 15.3, we also get the UI for it in the style?

Rich Tabor: That’s right.

Birgit Pauli-Haack: Well, we’ll come to that. But that is our WordPress 6.2 rundown on the developer notes. Of course, there’s more, look at the Field Guide, the links will be in the show notes, of course. 

Gutenberg 15.2 and 15.3

We’re coming to the last, to Gutenberg releases 15.2 and 15.3. Gutenberg 15.2 was released on February 23rd. Yes, it’s been that long that we heard each other, I know, and I’m really sorry about that. Daisy Olsen was release lead for that and it contained 197 PRs merged by 57 contributors, four of them were new. It was mostly fixing bug fixes, because WordPress 6.2 will contain all the features that came out in 14.2 to 15.1, that’s the whole range, 10 Gutenberg plugin releases, the features all come into core. But then after the beta release, there are a lot  more people testing it, they find bugs, and they are still also finished the last little bit on some of the features, so many things in the Gutenberg 5.2 release or in the bug fix category. The new features probably didn’t make it into 6.2, but we can tackle each one of them and find out.

Rich Tabor: Yes, I’ll kick us off here. The first bit here is that there is a new nested level when selecting templates or template parts in the Site Editor, which is an enhancement that right now is a little bit it’s in a middle ground, where it’s basically a placeholder state for future contents to go. Some ideas are when you focus in on a template part, we could potentially have the different template parts that you could replace with that one, for example, or even some other different controls, like assigning it a category, having its name present, so it’s right now, a place to start thinking of what controls we can put there to control that template part.

Birgit Pauli-Haack: The second part I want to point out is there’s now a modal to choose a start pattern for particular templates. The biggest problem users have is they want to start a new template, but how do they start? Now, theme developers and also plugin developers can actually add patterns to the site that now opens a modal and then can be selected. Also, the selection is a little bit better to view because you have more space to see all the patterns that are available for that. There is also an API in the works that lets you target certain templates with your patterns, but that has not been released yet, that’s still in the works.

Rich Tabor: This next one here is pretty interesting, it’s the UI for template revisions. Now, we have a button to open up the revisions for templates and template parts, which is quite powerful because previously, it was very difficult or nearly impossible to find those revisions for your actual template parts. Say you’re focused in on your header and you changed some of your navigation items and then you changed maybe the background color of your header and then saved it all, but wanted to go back to a different version the next day or so, say it didn’t really sit well, you can now access those revisions and make those requests to change them back to what it was previously. I think it’s pretty neat on the template level and again on the template part.

Birgit Pauli-Haack: Revisions, I always need to change my mind once back and forth, this revision is really helpful, having access to it to know what my former self was thinking with that and go back to a previous one. The next one with 15.2, it came a global save button to the Site Editor, so when you make changes to multiple templates and all that, it tracks them and then you can save all at once, but it’s not anymore to the right, it’s going to be on the left. I think it makes it, actually, in 6.2, you can have that, that was….

Rich Tabor: Yeah, I believe so. We have another one here for the Post Excerpt block that allows you to control the length of the excerpt. There’s a range control now where you could slide it left or right, or I think you could also enter an integer value, as well. It would essentially truncate to the Post Excerpt within the Query Loop block, so now you can define how long you want those to be instead of falling back on the default number of characters, which was pretty large, so it’s a nice quality of life improvement for designing.

Birgit Pauli-Haack: I’m just hesitating and I need to verify this, there is the possibility that that was actually reversed in a later version.

Rich Tabor: I think the change, it was affecting if a post type didn’t support Post Excerpts. I don’t know that it actually reverted the control itself, but it is still a work in progress, that’s why I don’t think it landed in 6.2.

Birgit Pauli-Haack: No, it didn’t.

Rich Tabor: It could be tidied up a little bit.

Birgit Pauli-Haack: We definitely need to test this, as well, in a real-life situation.

Rich Tabor: Yes.

Birgit Pauli-Haack: Do you have a site that’s on Nightly or on trunk, where you have all the latest versions in production or so?

Rich Tabor: Yes. I’m running it dangerously, I’m running everything. The whole eat your own dog food stuff, I just really want to see the problems before they get big.

Birgit Pauli-Haack: I changed over, I don’t know, a year ago for the Gutenberg Times to run on WordPress Nightly and also on the trunk version of the Gutenberg Nightly, which is a plugin coming every day from the current version.

Rich Tabor: That’s right.

Birgit Pauli-Haack: On the website, on the Gutenberg Times, you can see the Nightly, if you need to live on the edge.

Rich Tabor: Yes.

Birgit Pauli-Haack: The next item on the list is that the Post Featured Image block now has aspect ratio controls, so you can determine that and it makes your post table, the list of posts, much nicer to control that so when you have different sizes and images, you can actually say which aspect ratio you want to have in there. That’s a long-time want of mine to get that. There are themes who manage that quite well, but now you can do this, as well, in the block editor site templates thing.

Rich Tabor: Yes. There’s some more follow-ups on aspect ratio. I think it can be quite a powerful tool for not just a Post Featured Image block, but also just Image blocks or even Cover block maybe, I think there’s other ways to continue to push that forward, for sure.

Birgit Pauli-Haack: I see from my agency days, which are not that long ago, see users adding featured images or even just images when they’re just changed the size of it and they didn’t change the aspect ratio with it, it was just very distorted. It’s very hard to teach that who is not dealing with it on a day-to-day basis and does not have an image dimension feel for it, it’s very hard to teach that, so if that works out as it should be in the editor, it makes for a much better web.

Bug Fixes

Rich Tabor: Yes, yes. I think that’s it for the highlights, for the enhancements. There was a whole slew of bugs that were fixed in 15.2, so I’ll call out this one here. The ToolsPanel needed a couple of tweaks, there’s a new feature in 6.2 for copy and pasting styles so you can design a heading or design a button, design anything, and copy its styling and then paste it onto another like block, so copy the heading styles to another heading or button to another button, for example. We needed a way to ensure that those values were properly propagated to these other blocks so there were some minor tweaks to fix that, but now, it’s all good and when you copy and paste those styles, you see those applied properly within the tools.

Birgit Pauli-Haack: That’s such a phenomenal feature, that copy styles over, that you can have it. It’s in-between block-oriented or block on this post and global styles, it’s in-between, and sometimes you need that to make the same things look the same, but not the other things. It’s really good to just do copy paste on that. I think that was it for 15.2, unless I’m overlooking something. I’m scrolling, scrolling, scrolling. Scrolling, scrolling, scrolling.

Rich Tabor: This is a pretty big Changelog, yes.

Birgit Pauli-Haack: Yeah. I find one, though. You could use, so that’s for the build tools, the WP Scripts has now another flag that you can actually run it in development without having the watch from apply every build on your development system. I think that’s a good flag to point out for people who use those internal script for that. That’s the Gutenberg 15.2 for us. Let’s dive right in to 15.3. You’re coming right off of releasing it, Rich, so what was your first experience with… Was this your first experience releasing a Gutenberg plugin?

Gutenberg 15.3

Rich Tabor: Yes, it was, but I did co-release it with Hector, so he’s a team member of mine. He helped me, he guided me quite a bit on this one, but it was pretty smooth, to be honest, especially there’s a little bit of tension around getting the immediate bug fixes in for 6.2 and backporting and keeping that in line. But generally speaking, I think it’s a well-oiled machine and moving forward.

Birgit Pauli-Haack: Definitely. It’s the 153rd release, so you hope that everything is well-oiled by then.

Rich Tabor: That’s right.

Birgit Pauli-Haack: I like when you say backport and not only to 6.2, but also there are bug fixes for the release after the Release Candidate. There is an expression that I really like that’s cherry picking, which is an interesting thing to do.

Rich Tabor: Yes.

Enhancements

Birgit Pauli-Haack: But it’s just a little joke. People talk about it with cherry emojis. The release had 161 PRs in there, so almost as big as 15.2, and also a lot of bug fixes in there, but it also had some enhancements to the Duotone, quite a few. The Duotone CSS is now not created in line, that’s the expression, right?

Rich Tabor: Yes. It’s not applied in line.

Birgit Pauli-Haack: In line, it’s now in the style engine, so it can also be controlled through all the different levels. There is a control for the global size control for the Duotone and CSS variables instead of slugs, which helps it to propagate it over different to use the presets, as well, so Duotone is quite interesting. There is actually a bug in the backwards compatibility, it’s already noted that when you have a Cover block with Duotone and you upgrade it to 15.3, you get the heart attack kind of thing, oh, my Duotone is missing. If you apply them again on the same Cover block, it will appear again. That’s something that we found while we were testing it, but the bug fix is in the works.

Rich Tabor: Nice. It also means that by using these slugs instead of hardcoded hex values for colors, that when you do switch to variations, for example, those Duotones can actually map now to the new variations. If they use the same slugs, then you’ll get the new styles instead of in previous versions, where if you applied a Duotone reset from a theme, like say it was yellow and blue and then you switched to a variation or changed your theme up to one that was green, they would still be yellow and blue, so now it can receive the new ones if there are there. I think it’s a pretty cool improvement on something that is one of those things that should have always worked this way and now that we’ve explored a little bit more, it’s like, “Let’s go ahead and knock that out,” so a lot of effort went into that.

Birgit Pauli-Haack: The style versions are very, very interesting in that regard, that sometimes you want the thing to come over, take over your site, but then you want certain things that stay the same. It’s very hard to read the user’s mind as a developer, as a designer.

Rich Tabor: The way I look at it is if you’re using a preset, then that’s game for a theme to manipulate. But if you’ve applied your own colors, I believe in these Duotone PRs, even if you applied a red and black, by picking the actual colors yourself, then those will stay hex value, so when you switch to a different theme, they’ll still remain red and black. But if it’s a preset, I would say that it’s open for interpretation by the theme designer.

Birgit Pauli-Haack: I think there is a bug in there. 15.3 also brings us a new block. It’s been a while since we had new blocks, but this one is a very tiny block, but it’s very powerful. People know that in a list view, you can see the number of blocks and the number of words and the time to read and several people asked, “Can we have that also show up as a block so we can add it to our post template or for the single post?” Yes, this was now implemented. It’s a very basic block, it only shows one minute or three minutes, well, 15 minutes, that’s all it does, but I really like that, because first, it can be translated in any language, and if you use it together with a Paragraph block in a Row, then you can have any string in front of it or after it that you as a site owner want to put in there. I tested that and it worked really nice.

Rich Tabor: I think there’s some follow-up PRs to do on that to add some of the design tooling that exists on other blocks, but it’s a great start and just nice, another piece of meta that can help readers know what to expect, investment-wise, like how much time am I going to invest on this? I think it’s great.

Birgit Pauli-Haack: That was the one point where I really needed and was so happy that they have now, the custom CSS, because on the blog where I used it, I wanted to have that line reading time, one minute or three minute, be smaller than the rest of the excerpt in the post list. I was able to, of course, use the typography controls for the paragraph part, but not for the time to read, so I created, there is an advanced section where I can add a new class. I set a T2R and then went to the custom styles and then created the custom style for the T2R and made it font size small, which is pretty much the same as the reading time. It worked out of the box and with the rows, I could align it. The row controls were really nice, I like that. Now, I see that you could do some of the other shortcuts that are out there that are actually strings that are in a paragraph can now be blocks that need some design controls, but you don’t have to use the shortcuts anymore.

Rich Tabor: That’s right.

Birgit Pauli-Haack: I’m thinking a little bit more in that direction.

Rich Tabor: Yes.

Birgit Pauli-Haack: I know that some of the developers actually were exploring having a token system to take care of those string-related in the middle of a paragraph kind of thing. I’m not sure if that is needed or just introduces another complication or complexity to the system and it’s hard for users to use. If you have a block meta for it, it’s so much easier to get it into the system.

Rich Tabor: Yes, I agree. 15.3, I would say these are the big hitters on these, but there were a bunch of small improvements like making the Site Logo block placeholder just a little bit smaller so it fits better within headers, especially around the new header patterns included in 6.2. There’s been some quite a few bug fixes around template parts, resetting all for typography, making sure the Site Editor’s a little bit more tightened up, so some of the alignment parts and then the design units within the Site Editor have been tweaked and it looks and feels like it’s coming together quite well, but generally, I think those are the big hitters.

Birgit Pauli-Haack: Let me go a little bit, I’m scrolling, scrolling, scrolling. Oh, what also happened, say, for some of the developers there wanted to know if there are new theme.json filters came into 6.1, but they were not yet in the documentation and they are now. There is a page in the how to guides of the Block Editor Handbook that is titled Curating the Editor Experience that has all the different ways how you can control or disable some of the features that are either in the sidebar available for your user or not or show up or are not. Now, you can also do this for the theme.json filters, they are now listed there. I believe one of the writers on the Developer Blog is actually looking at writing about them and having some good examples that are a little bit more closer to the real-life situations. I used the release candidate Changelog, but I think that was it, right, we all done?

Rich Tabor: Yeah, I think so.

Birgit Pauli-Haack: Yes. That’s all we wanted you to know about 15.3, the rest you need to discover yourself. Of course, we have the What’s New in Gutenberg 15.3 post will be in the show notes. I don’t know if you published them yet or is it still in the works?

Rich Tabor: It should be out soon, yes.

Birgit Pauli-Haack: I wait for the episode to be published for that post, of course, so we can get it in there. Almost at the end of our Changelog episode, so what’s next for you in next week or next month?

Rich Tabor: 6.2, the idea is that it sums up the culmination of Phase 2 and the kickoff of Phase 3. It doesn’t mean that there isn’t quite a bit more customization and design tooling that we need to continue to bake in, even like I was saying with the time to read block, as well, but that means that there’s now some more thinking going into what workflow-oriented processes look like for Phase 3, what type of collaboration can we start looking at. Making those plans and start writing about them and sharing ideas with everyone and really getting folks on focus and on point with Phase 3, I think is really important, so I’m going to start digging into that a little bit more, making sure the about page assets are tightened up and looking good for 6.2, and continuing to explore around designing block themes within the editor.

Birgit Pauli-Haack: Awesome. I very much looking forward to the Phase 3 collaboration because it also will catapult your WordPress a little bit ahead of all of the other content management systems, because that’s what we are actually waiting for the last 25 years, is collaborating on our websites and not using all the other tools where you have to copy paste things over once you’re done with the collaboration. Now, you can do it all on the website, so I am really excited about that. Thank you so much for being on the show and walking us through all the great design and interface changes. When people want to reach you, where can they reach out?

Rich Tabor: I write and share everything I know on my blog, richtabor, that’s T-A-B-O-R, .com. I am on Twitter, so Richard, R-I-C-H-A-R-D, _Tabor. I like to explore the fringes of WordPress and experience and try to push ideas around and see what resonates with folks, so feel free to chime in and ask questions or ping me anywhere.

Birgit Pauli-Haack: As always, the show notes will be published on the gutenbergtimes.com/podcast. This is the 80th episode. If you have questions, suggestions, or news you want us to talk about, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Thank you all for listening and thank you again, Rich, for spending time with me on this. Goodbye, everybody.

Leave a Reply

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