Gutenberg Changelog #83 – WordPress 6.2.1, Gutenberg 15.7, 15.8 and experiments

Fabian Kägy, special guest on the Gutenberg Changelog episode 83
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #83 - WordPress 6.2.1, Gutenberg 15.7, 15.8 and experiments
/

Fabian Kägy and Birgit Pauli-Haack discuss the new enhancements in Gutenberg plugin releases 15.7 and 15.8 as well as the Experiments available in the plugin.

Show Notes / Transcript

Special Guest: Fabian Kägy

Announcements

What’s released

WordPress 6.2.1 + 6.2.2

Gutenberg 15.7

Gutenberg 15.8

What’s new in Gutenberg 15.8? (May 17)

Experiments in Gutenberg

Zoomed out view Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed) (#41156)
Color randomizer Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly. (#40988)
Command centerTest the command center; Open it using cmd + k in the site or post editors. (#50128)
Grid variation for Group block Test the Grid layout type as a new variation of Group block. (#49018)
Details block Test the Details block (#49808)
Block Theme Previews Enable Block Theme Previews (#50030)
Navigation block Test the Navigation block using the Interactivity API (#50041)

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello and welcome to our 83rd episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about WordPress Point Release, 6.2.1, Gutenberg 15.8, and of course the previous one, Gutenberg 15.7 as well, and some of the experiments featured hiding in the Gutenberg plugin. I’m your host, Birgit Pauli-Haack, curator of the Gutenberg Times and WordPress developer advocate, and a full-time core contributor for the WordPress Open Source project. 

I’m so happy to have, again, Fabian Kägy back on the show. It’s been a while since we talked and so much happened. We just found out, it was the episode 59 and it was in February 2022, well, it’s a whole world happened in between. So for our new listeners, Fabian Kägy is the Associate Director of Editorial Engineering at 10up and a core contributor to the Gutenberg project since 2017, I think. So welcome back on the show, Fabian. How are you today?

Fabian Kägy: Thank you so much for having me. I’m excited to be back on this.

Birgit Pauli-Haack: I’m glad you’re here. So I have to ask, editorial engineering, what does that entail at the agency 10up?

Fabian Kägy: So that is a special, in quotation marks, “made up role”, where I started down the path of a front end engineer and over time became more and more passionate about all things editorial experience. So that is now a special role where I get to focus part of my time on actually coming up with best practices and solutions for working with a block editor and helping the entire team level up and carved out my niche.

Birgit Pauli-Haack: That’s awesome, especially because in view of the next phase of Gutenberg where it is actually all about collaboration on an editorial team, so making that a smooth experience is definitely something we all will be working on for when 6.3 come out, I think. Your input will be invaluable for your clients, as well as for the team, I think.

Fabian Kägy: Yes. I’m very, very excited about all the things that are lined up for all of us to work on and to explore, and it’ll be fun.

Birgit Pauli-Haack: So with the developer blog, I’m part of the editorial team that does reviews and works with writers. Once in a while, we start out with Google Docs and have everybody comment on it. Some writers say, “Well, I’m waiting for that moment where I don’t have to use Google Docs anymore to collaborate with people on a post and not have to copy/paste it over.” So we are very much looking forward to that collaboration and we will be eating the Gutenberg dog food, so to speak, on the developer blog.                                                        

Announcements

Speaking of the developer blog, Justin Tadlock just published the What’s New for Developers in May 2023 on the developer blog, and that’s a series of roundup posts that were started in February, where we look at all the publications that come out throughout the month, what’s new in core, the Gutenberg plugin, the keeping up with Gutenberg index page, and so much more, and just pick those things that are relevant for developers not to teach them how to use them, but more like, “Watch out, this is coming,” and prepare them for an X release pretty much. 

The main one has quite a few items in there that are highlighted there. One is the Block Selectors API, which has definitely the markup of a larger tutorial, but it got quite a few developers excited about CSS and their blocks and being more in control of it. Another one as we will also talk about it is the first community theme and all things. So it’s pretty much a roundup of a lot of things that are interesting for extenders like plugins, developers, theme developers, and also agency developers.

So we share the latest blog post link in the show notes, but if you haven’t looked at those yet, and if you’re a developer, subscribe to the feed of the developer blog or just for the roundup post so you get a heads up on many things.

Fabian Kägy: I would highly encourage everybody to take a look at those because they’re super valuable, just quick shares of what’s going on, what are the things to look out for, and even if you’re not developing for the actual experimental Gutenberg plugin, it is something. It makes it so much easier when the next big WordPress update comes around to know what’s in the pipeline, what are the things that are being talked about and already have some grasp of just what’s coming.

Birgit Pauli-Haack: Well, thank you so much. Justin does a great job in putting it all together and also shares some resources that are available on Learn WordPress. Then there were two new posts since we had the last show. There was one on how Webpack and WordPress packages interact by Ryan Welcher. That really gets you a little bit more theory around how WordPress and Webpack work together. For those that are not like me, I trust the things … I trust in God. I trust in things that if I put an NPM, run something, that it’s all going to work out, but some people want to really dive into Webpack some more and this gives them a great introduction to that. How are you doing with Webpack? Are you manipulating Webpack for your own development?

Fabian Kägy: So I used to do it a lot, especially in the early days of the WordPress Scripts package. There were so many things that were not yet a part of it, and I was very actively adding hacky solutions to add post CSS and all of those SaaS things to WordPress Scripts. That was my introduction to actually working with Webpack. Now, WordPress Scripts takes care of most of our needs or for some of the things, we have a similar tool at 10up that is a helper so we don’t have to deal with custom Webpack configurations.

I read through that post from Ryan about how that interacts, and it’s a really solid deep dive. If you want to understand the areas, the inner workings of how some of these Webpack plugins interact, which you don’t need to, but if you want to, that is very, very useful.

Birgit Pauli-Haack: Then the other blog post was the per-block CSS with theme.json. The per-block CSS came out out of feedback from the community that custom CSS were not available anymore to put in custom CMS for the block themes and for sites, and it was introduced with 6.2, but it also needs some additional handle. Justin wrote a blog post about it, how best to think about per-block CSS with theme.json without getting too deep into the weeds and how that’s offered to the user. So definitely read up about it. 

For the FSE program, Anne published two summary posts and you make your part of coffee first because they’re both very long but also very detailed from the latest testing calls. One was Build Your Block Theme with the great block theme plugin and the other one was the testing call 21 for the FSE program for the front page fund summary. There will be a new testing call coming out of the FSE program.

So if you are into block themes and users use them and all that, it’s definitely a good overview on what are the pain points, what are the team working on because Anne is very, very thorough in adding to all pain points or discussion points, also the PRs or the issue that is on GitHub about that particular topic. So you can chime in with your opinions, with your experiences, and with your testing, and it would really help if you chime in and be encouraged to actually be part of the testing project. That’s it. 

Of course, we share all the links in the show notes for this episode. 

Community Contributions

Another great announcement and community contribution is the first theme coming out of the community theme project where community members and team members are working together on creating block themes and the first one is called Stacks. It’s a theme with which you can build slide decks. It’s a very interesting approach to a website that is more a slide deck rather than have navigation from page to page to page. It’s more like a guided tool that you can use it or you can use it for your next presentation, but you don’t have to use a third-party tool for that if you want to spin up a website and just use it for your presentation. 

It’s quite interesting to see how that comes together. The code is certainly available on GitHub and we share both the announcement post, as well as the write up by Sarah Gooding on the WP Tavern for you.

Fabian Kägy: These explorations and these themes and plugins that allow you to build your slide deck in the block editor, I’m always amazed when I see that. I think a couple of years ago, Ella was maybe one of the first ones who did talk at a React conference and blew my mind in the end when they revealed, “Hey, and all of this was created in the block editor and these slides are powered by it.” I think Nick Diego also did it at WordCamp US or at WordCamp and it’s always pretty cool to see.

Birgit Pauli-Haack: You’re right. Nick Diego did it at WordCamp US for his talk, Build A Block in 15 minutes, and he built actually that slide back there as well. It’s very interesting how this can be used on your own website. Yes, Ella had a slide. It was actually a block that she added. I think it was the same for Nick Diego and now we have a theme for it. So it’s really cool.                                                        

What’s Released

All right. That brings us into what’s released and, of course, let’s start with the minor release for WordPress, the 6.2.1 Point Release that just came out this week and there were a few hiccups there. Do you want to talk about this and what’s happening there?

Fabian Kägy: Sure. So 6.2.1 was released, I believe it was at some point early this week. One thing, there was a security issue that the security team took care of and made sure that that gets resolved as quickly as possible, but that security issue essentially resulted in short codes no longer working in block templates. So in a block-based theme, if you have a short code inside a block template, that will no longer actually get converted to the dynamic data. That has caused some issues for folks, especially around auto updates because it’s just a minor patch release, but it is breaking some existing sites, which as always, it is a very difficult choice to make and a very unfortunate thing when that has to happen because of security thing. 

There is an open issue in track where a lot of this is getting discussed right now, and it was discussed in the core chat yesterday, where essentially, it is very unfortunate when something like that has to happen. From my perspective, I think the team, if there is a security issue, that is the only thing that can be done. The only thing that I think we as a community can try to be a little better at is communicating those types of things ahead so folks are more aware of that, “Hey, we needed to make a difficult decision here. Beware, you should make this update, but here are some things that you can do instead to help your site still be up there,” because the communication around the issue could have been a little better.

Birgit Pauli-Haack: I don’t think there’s no maybe about it, but it was a little obscure in the change log and it wasn’t saying, “Okay. It’s going to break sites,” but I think it’s really hard to also suggest a solution right now. So Jean Baptist Audras was one of the release leads together with George Mamadoshvilli, and he wrote in the core dev chat on Wednesday night, “The release itself went pretty well. Thanks everyone for your patience. However, as you may know, one security fix led to the important issues with the short codes used in templates, but it was not templates per se, but block templates in block themes. So the issue is currently actively discussed in the security editor team and some hypotheses have been made to sort this out in a quick followup release. No schedule is available right now because the discussions haven’t been finished yet, but it will depend on the followup patch currently discussed by the editor team.”

So to just point out, and Paul Byron had actually … All the solutions on how to deal with it right now in the emergency situation when you see dozens or even hundreds of page breaks, one is to roll back to 6.2 with a core rollback plugin, use the short code, and put them in template parts. That seems to be working in the block themes that you put the short code in a template part and add that template part to the template or have … In the ticket that you mentioned, Fabian, there were also a code example on how to introduce making the shortcuts work again, but all three of them introduced the security issue again. 

So I’m not sure quite how to advise people to work, but there are no good choices right now because you are caught between you want your client’s side to work, but you also don’t want their security issue to be out there too long. So the core editor team is definitely working on a solution to fix the security fix, but all, what I just said, is actually just introducing back the security issue into your sites. 

So there are also opinions that short codes might be a legacy way of dealing with things. Maybe it’s a good call for converting the most important short codes to blocks and use them for the block editor instead of … but not everybody has the capacity for it, not everybody has the time for it or they’re just not there yet, but the plugins that they use are also not converting the shortcuts to blocks. So it’s the nature of the beast. I don’t think the shortcuts will ever go away, but there’s a better way to handle that.

Fabian Kägy: Yeah, definitely. In regards to the various options that we have right now, rolling back and that plugin that exists and that code that you can add to your theme, those all add back the vulnerability, like you said. I wasn’t sure from my understanding whether putting the short code in the template part actually caused any issues. I thought that that was the best proposed solution even though it’s clunky to have to deal with template parts for those areas individually, but from my understanding, that was the best outcome where you’re not really introducing the security vulnerability, but also can retain your feature or the look of your site. So I think that is the best option right now, but yeah, it is a little opaque.

Birgit Pauli-Haack: Good point. Thank you for pointing that out again. Okay. The rest of 6.2.1, quite a few bug fixes for core, as well as for the editor that were found during the release of 6.2 and didn’t make it into 6.2, but that’s why the followup release was really on the schedule relatively to the 6.2 release. We will also share the changelog for the release in the show notes, as well as the tickets for the discussion. Paul Byron also added that solution with the template parts to the ticket so you have it all in one place to look up for if you want to follow up on that.                                                        

Gutenberg 15.7

All right. Next one up was Gutenberg 15.7 and it had quite a few enhancements. One is that as group and media texts have now allowed blocks attributes that can be passed to the inner block props, so to speak, that means that you can control which blocks can be added to a certain group or a media text block if you wanted to.

Fabian Kägy: That is a really useful thing for extenders or theme builders or if you create a pattern that is meant to be a certain thing, you’re now able to restrict which other blocks can be used within that area, which can be super useful when you build a call to action and have some styling around that and don’t want to support a table to be in that call to action, for example. This is so useful to be able to do that. So we don’t have to build the custom block for it, but instead we can create a pattern and have all those options and can curate that editorial experience to really, the level that we want to curate it to. With the template and template block, we were able to do some things, but now with the allowed blocks, we have most of the controls of an actual inner block area also exposed for these blocks that support inner blocks, which is very useful, I think. 

Birgit Pauli-Haack: Excellent. 

Fabian Kägy: Next up, we have the site logo added a replacement flow that allows you to change out the actual logo using the inspector control. That is just an addition, an alternative way that you can deal with the site logo essentially. You can still use the inline controls, but while you are in the sidebar tweaking your spacing or any other visual controls, you can also quickly swap out the media there, which I think is an interesting approach to this.

For this one in particular, I’m interested to see the feedback around it because for the most part, we’ve been very strict about there should be direct manipulation of content right in the editor canvas and not many controls should live in the inspector controls. It’s not removing it from the inline, but it’s also adding that secondary way of manipulating it to the inspector controls. I’m very curious to see how that will play out and how that may affect just how we use this.

Birgit Pauli-Haack: So inspector controls is just another way to say sidebar, just make sure where those tools are when you first encounter them. I think it comes more like we want to be a parity with a customizer. That’s one more step. Then in the inspector in the sidebar, when you replace the media, you are going right directly to the media library and select that. So you don’t have to … It seems to be a slightly different workflow than it is from the toolbar. 

So the next feature is actually a really cool addition or enhancement of the fluid typography. So when the fluid typography was introduced first in 6.1, it still had the problem that if you have very large fonts, they wouldn’t go small enough for the mobile version because the calculations would stop and it would still be too big. This feature introduces a logarithmic scale factor to calculate the minimum font size and now the font adopts to all screen sizes. Even if you have a 68 or 102 pixel font, it will scale down to a mobile version and not stop at 50 or something like that. 

Fabian Kägy: The next thing on the list here is the behavior of the top toolbar has been changed, and that is for a long time now you’ve been able to using that user settings menu in the upright corner change the behavior of the block toolbar to no longer be attached to the actual block, but instead always be fixed at the top of the editor. The behavior of that has been changed so that you can collapse that toolbar and still have it available there, but because the space in that top toolbar is quite sparse, that allows for just some more flexibility with how things are getting laid out there. 

There are a couple more things that we’ll talk about later that were changed about the overall layout of that tool toolbar. Actually, I like it very much the way that it’s coming together and with some of the explorations happening there. I really like the direction where a lot of this is going right now.

Birgit Pauli-Haack: It also fixed … One particular thing that was still missing is that you now have access to the parent block, which on the block toolbar you were always able to select the parent toolbar and then the sidebar changed and everything. When you had the toolbar fixed on the top, you wouldn’t have that particular icon available to click on to manipulate the parent block. That has changed too, and it came in with that particular feature there. 

I was always 50/50. Some weeks I like having the block toolbar right on the block, especially when I’m further down on the block page, and sometimes I just want it on the top and I’m changing it all the time. I don’t know how you do it. So I have not tested this new toolbar fixed setting yet, but I definitely will. I read through the comments and there are some discussions. So please add your feedback and your experiences to it and what you think about it to make it the best it can be.

The next is that the image block now also displays … No, it’s not the image block, it’s when an image is in a block or in a template, it now also displays the borders on the placeholder. So if you have a template that gives you all the series of blocks and each block you want the feature image there, you will also see now in the placeholder the color of the borders, including the color of it. So it makes your choices of images maybe even smoother. It’s very subtle, but it’s definitely a live quality enhancement that I definitely like because sometimes you just need to have a picture that does not clash with your borders if you had a design option that image has borders.

Fabian Kägy: It just makes your life a lot easier when you’re creating a template and you don’t … Before this when there was a placeholder where no actual image was selected for the post, it was just difficult to gauge, “Hey, how do these border controls actually affect this?” Having the placeholder resemble the actual image much closer and retain all of those border controls is just a very good thing. 

Next up, we have a change in experiment for the actual pattern insertion modal, which I am really excited about. When you use the pattern instruction modal, you know that all of the various patterns are displayed in a grid, and that grid can look a little weird sometimes because it’s very staggered how these … Some patterns are very tall, and then the next one is very narrow, very short. There’s a lot of white space in that modal. This option here tries a masonry layout where they actually … If you’ve ever used Pinterest, it’s essentially that type of layout where it just fills all that white space and it’s showing all of those, I think, in a more elegant fashion and it just makes that look a little more refined. I’m very happy to see that.

Birgit Pauli-Haack: It’s definitely a more natural look for the pattern modal. The next feature is that duotone block controls are now added to the sidebar. They were hidden before in the block toolbar and you had to know that they are there and the icon was a little bit obscure. Then the options when you do it in the block toolbar is it feels like you are in the wrong place to make those decisions, and now you can make them from the sidebar. I really like that. It’s a clear adoption to the interfaces that we saw from other design tools.

Fabian Kägy: Next up, in the accessibility section, there are some refactors of how the ARIA attributes for the list view have been modified, which makes it much easier and much more accessible to navigate through the list view. It’s always good to see those enhancements over time.

Birgit Pauli-Haack: Those ARIA levels, there were quite a few in the list view, so there was a major overhaul of the display of the list view. I think Alex Stein did some great work there to make it happen and put it over the finish line.

So I’m scrolling a little bit further down to the changelog and I have the feeling we are done with 15.7. It was a smaller release, but it had definitely some great features in there. 

Gutenberg 15.8

We are now coming up with 15.8. Fabian, you were the release lead on that. Do you want to kind of kick it off and let us know what’s in there?

Fabian Kägy: Sure. So there were a couple of major features which get their introduction here, which is always fun. One of them is the addition of a command center. There actually is … There was a post on the make blog from Riad that I’m sure will get added to the release note or to the podcast notes here that explains a little bit more in depth what this command center actually is. Right now, it is an experiment, but it essentially like spotlights on a Mac, for example, or some of these launchers. You have a quick keyboard command. In this case, it’s command K, to launch essentially, an open prompt field where you can put in your prompts and jump to different places of the editor or create new pages or just perform quick actions. 

It’s also meant to be extendable and meant to be something that plugin developers can hook into and allow users to actually quickly navigate their site and perform actions. I’m really excited to see if this comes to life and explore how this ships out in the future. With this feature, I’m so here for it, I’m so excited about it. I cannot wait for the day where this gets expanded outside of the editor view and is just available in all of the screens of WordPress because right now, it is limited to the editor screens, but I think in the future, this will be available in all of the pages of the admin of WordPress. I’m so looking forward to that.

Birgit Pauli-Haack: Riad’s post on the Make Core Blog … Blog and block, sometimes I get it mixed up, but I did it right this time. It’s the Make Core Blog. It’s called Command Center and Request for Feedback. So he explains what the prototype is. There’s also a small little video that quickly shows you how it works and then explains the API and the static commands and also what dynamic commands are, definitely, and the contextual commands. So there are three commands that you can have it use, but it’s also the extendability in mind for plugin developers. 

I think it also triggered a few things. If you want to employ an AI to use within the block editor, having a standard interface that can call AI commands is certainly beneficial to the editor. So as Fabian said, I will share the post in the show notes so you can chime in and see what you think about it and how it works. It’s really hard to describe on a podcast, audio podcast, for that reason.

Fabian Kägy: As somebody who has championed extensibility and plugability in the editor for such a long time, I’m so happy to see how this feature is getting rolled out and how it is built with that extendability and plugability from the very beginning. So I’m really excited about this.

Birgit Pauli-Haack: If you want to try it, it’s still behind the experiment flag. You need to go to install the plugin 15.8 and then go to the Gutenberg menu on your WP admin and then there’s an experiments page and you need to check the mark for the command center to actually be able to test it. 

The next item on the list is a new feature as well, and the first version of the revisions UI for the global styles, so all the talk about global styles and new features and new options to change things. Some people want to try just something out and then revert to the previous version and there was no revision available for the global styles. Now, there is, and it has actually some nice features. When you have the site editor style, the style site open and click on the revisions, it will show you a history of the revisions, and when you click on the items, it will show you a version of it on the canvas and you can also compare versions. 

So I think it’s getting there. It definitely needs some more refinement in terms of what information will be there, how many revisions are we showing, and all that. So that’s a really interesting progression on this global styles editing.

Fabian Kägy: If you’ve ever used revisions of a standard post or a page since the block editor was introduced, this is a great feature for global styles and I think it’s the right thing to roll it out for this first, but the live preview of a revision in a rich preview makes me so excited for a future where we can eventually get rid of the existing code view of revisions for standard post content stuff and actually show rich previews of that because, especially since the introduction of blocks, the revisions UI is just really, really difficult for non-technical people and even technical people to really manage because you just get a code view and are trying to figure out what changed. 

This year is a visual preview of what revisions look like for global styles and it’s making me so excited about what’s to come for more other visuals or revisions in the future.

Birgit Pauli-Haack: I totally agree that revisions for the posts and pages are on the board for the collaboration project, the phase three of Gutenberg and making revisions be aware is definitely something we are all looking forward to. 

Fabian Kägy: Next up, we have the inspector panel. So again we’re talking about that right-hand sidebar of the global styles panel is now getting or got a refactor to make it work and look more similar to how it works on the standard post. I think that for a long time had been an area of confusion for me where if you wanted to change the typography options or color options in the global styles, the interface was just structured completely differently to how it is structured when you just select a paragraph block, for example, in the standard editor. This is unifying those two experiences to be alike and that just lifts a whole bunch of cognitive load that you have to think about and just makes it work the same way in both of those areas.

Birgit Pauli-Haack: Excellent. In the same way, there is now a details block. We talked about it on the show before. That is in experiments and it now has been enhanced to be able to use InnerBlocks in the details of the spoiler alert block. I call it spoiler alert because the detailed summary that’s as broad idea that some people don’t know what we’re talking about, but you have a sentence or just a headline, and then you get an arrow and then it reveals additional content. You can use it to talk about spoilers in your book review or in your film review or you can hide details that only a certain amount of readers will need about a technical thing or so. In the earlier versions, you only could add a paragraph to those details or only paragraph blocks and now you can add images, you can add quotes and all that. So this is definitely an enrichment of the details block. Also an experiment though.

Fabian Kägy: That is really something … I know I have been involved with those conversations of the details block for way too long already, but I’m really looking forward to getting the community feedback of just what’s available there. It’s a very difficult thing because the detailed summary is essentially an accordion, but there are some accessibility issues that make it not the best use case for an accordion. So with these changes, just I’m interested in the feedback of the community of how they’re able to use all of the design tools to make it function the way they want to or whether there are struggles because this changes a little bit of what was there before and there were some more design options that you had with that earlier approach, but it also was a little less intuitive because it had more levels of nesting and the summary element was its own block and was just more complicated, and this is a much simpler implementation of that block. Also, it therefore removes some of the options that you have available. I’m really interested to see how that plays out and what people will think about it.

Birgit Pauli-Haack: Many, many, almost all block collections that came out when the block editor first was released had an accordion block in there. A lot of people liked it for FAQs and for how-tos and all that, but it was interesting, I really didn’t really know why there wasn’t an accordion block in core until I read through the discussions about the details and summary. Some people will make it work as an accordion, but what the accordion does, it knows about the other block. So you have an accordion. The first is the tab on top and then you have details and then you have another tab and then the details and each accordion knows about the other one being open or not open. That’s very hard to replicate in a model way how the block editor works. 

I tested the details in summary block that’s in the experiment right now with 15.8 and I didn’t find it particularly easy to navigate because it had some hiccups. I don’t know how to get out of it. Normally, if you have a list block, when you hit enter twice, you’re out of it and then you can add additional blocks to it. There are no visual cues when you are in the block writing or adding additional blocks. There are no visual cues, are you still in the details section or are you not? The summary, there is no way to get from the summary to the details block per keyboard. You need to change controls on it. 

So there are a few things, but that’s why it’s behind the experimental flag and not yet completely released. So do as a favor and enable that test, that experiment so you can also test it. As Fabian said, community input is wanted and necessary. 

Fabian Kägy: Next up, there is another addition to the site editor and that is in the main sidebar of the site editor. There now is a new menu item called Pages that allows you to view the 10 most latest edited pages of your site and directly jump in and edit them. That is one step of actually making content editing in the site editor more possible. Again, that was one of the features that was there in earlier revisions of the site editor but then got taken out before it got released in I believe it was 6.1. These are explorations of slowly adding that content editability back into the site editor. It’s really interesting to see how that works. It is so difficult how to best communicate with the user when you’re editing parts of a template versus when you’re editing parts of the actual content of a page. 

I think that that will still be the most difficult issue to solve for here, but this is slowly introducing that back into the site editor and it is really cool to see just having all of those things in there. 

Birgit Pauli-Haack: Look at the menu item on the left-hand side, as other people say the dark side of the site editor, but it’s there. So the next item or feature that got introduced makes Fabian really, really happy and it’s the introduction of the plugin template settings panel slot, which means on the sidebar, there is now a way for plugin developers to extend the feature set that’s displayed to the user. Have you tried it out yet? Have you looked at that feature?

Fabian Kägy: I’ve not yet had a chance to play with it, but yeah, more slots and more places for extenders to add to the experience and showcase custom settings and those types of things always make me happy, especially when they’re done right, and this seems pretty cool. 

Next up, we have an update that is very useful for extenders again. It consolidates and adds some more documentations to the storybook. If you’re not familiar with the storybook, that is actually something when you go to the GitHub repository of the Gutenberg plugin, in the right-hand sidebar there is, I think it’s called pages or deployments. You can actually jump to that storybook right from GitHub and view it. The storybook essentially is showcasing all of the various React components that were built as part of the Gutenberg plugin and are available in WordPress core and is showing live previews of them with some controls. You can tweak some of the settings right there visually and also have some of the documentation there. This consolidates and changes a little bit of just how that is structured and how that appears. Just in general, the storybook that has been there for a long time is a super valuable and great tool and it’s always nice to see additional enhancements for that.

Birgit Pauli-Haack: I definitely want to point that out that at WordCamp Asia, I heard from a few people that were at the contributor day and working with the core editor table there, they were really surprised that many developers that came and wanted to work on things did not know about the storybook. I think we have not done a good job in explaining what it is and pointing people to it. I think it’s part of the documentation that is in the components, but it’s not referred to … Most of the time, it’s not referred to in the documentation on the developer site in the block editor handbook. We are going to change that a little bit and add more links to the storybook for the various components because it’s such a rich developer experience where you can change things and then you click on a button and it gives you the code for it for the changes that you made and you can immediately reuse it in your own code base. Definitely, I take any chance when I can talk about the storybook now.

The next part is a feature for the block editor that is talking about the dimension controls and it’s not always visible. So now, it’s an attempt to show all the dimensions control at the beginning and not hide them so much where you had to open them and then decide do you want to see the padding, do you want to see the margin. It’s now easily available so you don’t have to look for it, what padding and margins is, because we all talk about padding and margins, but we never talk about dimension controls. So when the words appear on the screen, you don’t as easily recognize that that’s what you’re talking about.

Fabian Kägy: This, again, is also something where it is just difficult and interesting. The vertical space that we have available in the sidebar is very limited and it’s always an interesting balance to strike of how much do we show by default versus how much do we hide behind the setting so it’s not overwhelming for somebody that is new to the editor, but also makes it discoverable for somebody. So it is not changing any of the features that are available, but it is trying to show some more by default. I’m very interested to see how folks will react to that, whether it feels overwhelming or whether it makes it more approachable. The only real way to find that out is by actually testing that. So I’m glad to see those explorations happening in the plugin. 

Birgit Pauli-Haack: It might go away again or will be tweaked later on. So your comments are certainly wanted and necessary. We share in the show notes the release post for 15.7, the release post for 15.8. By the time you listen to this, Fabian will have published it, and I’m sure also, Sarah Gooding will talk about both releases or already has on 15.7 and 15.8. 

What’s in Active Development or Discussed

or I just wanted to at the end of it … So those were all the releases and we are now talking about what’s in active development or discussed. We have right now the largest number of experiments in the block editor since the beginning. I think there are now seven experiments hiding on the experiments page for the plugin. So let’s talk about them. Some of them we already talked about. So it starts out with a zoomed out view and it’s test a new zoomed out view on the site editor. So I’m reading from the page now and it also has a warning attached to it, “The new feature is not ready. You may experience UX issues that are being addressed.” UX means user experience, just to clarify that. Did you test that before?

Fabian Kägy: Yeah. So the zoomed out view essentially means that you can more quickly navigate through or get a more holistic view of your page and not appearing in the same size as you would always see it, but instead, it zooms out and shows you more of your entire page smaller in the canvas. That is very useful when you want to make changes to your global styles and just want to see how it affects your site more holistically or when you tweak those things. Especially when you switch between block theme variations, that is just useful to see how it will not just affect that very small area of the site that you see in your viewport, but instead see it more broadly for an entire page. 

So I think this is a great thing to work on. Right now, as the warning says, there are some issues that are being worked on. Especially for working with global styles, having that more zoomed out view is very useful.

Birgit Pauli-Haack: So if you tested it and you have an idea how to make it better, definitely air those on GitHub and filing an issue of that. So the second one, it says color randomizer, test the global styles color randomizer, a utility that lets you mix the current color palette pseudo- randomly. I think it’s one of those features where it said, “Okay. It’s cool to have and cool to test things out, but it’s not something that a lot of people would think they needed.” Do you have any thoughts on it? 

Fabian Kägy: It is one of those features where from my perspective as somebody who works a lot in the large agency space, that is not a feature I would’ve ever come up with, but I can see how, especially if you’re somebody who’s just playing around in the editor trying to build a new design, it can be a useful partner to give you some inspiration of maybe you’re not the best with color theory and coming up with an accessible color palette yourself, and that can be a great way to get some inspiration for just showing you different variations of what your site could look like with different colors and spark some of that imagination, but it is one of those features that I know for a client site that has a design guide with strict color I would want to disable that feature and would not want to expose certain clients to that feature. So it’s definitely one of those where I can see it being useful for some, but also rather distracting for others. So I’m interested to see how that will actually get rolled out.

Birgit Pauli-Haack: It might also be part of the explorations, but the design team does in figuring out is there a way to include different palettes that are on third-party sites that can come in and you can choose from, but I think it’s not a high priority right now for the team. That’s why it’s all still in the experimental phase and it hasn’t gone that route yet. I heard Matt Mullenweg and one of his state of the word talking about making color palettes that are out in the universe interesting, available to site builders or site owners in some way or shape. 

The third test item on the page is the command center, a test of command center, open it up using command K in the site of post editor. We talked about it. I don’t think we need to elaborate some more, but that’s where you find it. 

The fourth one is the grid variation for a group block, test the grid layout type as a new variation for the group block. Right now, that only works on the site editor because it’s actually a template or site design approach to the grid. Grid, it’s actually a CSS feature. So this tries to explore how you can make templates that adhere to a certain grid layout, but I’m not as knowledgeable about design to be able to use that. I think I need a little pre-beginner’s tutorial for that. 

Fabian Kägy: It is. I am really happy to see this exploration being done right now. In the last couple of years, we got that row and stack variation of the group block, which essentially as a developer, that is my flex box. Flex box allows you to layout content in one direction, so either horizontally, the row, or vertically with the stack. The grid, you can achieve some of those grid layouts with the columns block, but the columns block, it is very difficult for it to wrap around. So if you wanted to, let’s say, have a three column grid that is not just one free column layout, but instead has two rows of those two columns, that is not really or is technically possible, but it is not ideal. That is where grid layouts come into play and are, I think, so much more powerful.

I think there also is an exploration that is not listed here of adding an actual grid layout or using CSS grid layout for the grid in the query block. We weren’t able to use grid when the editor first came out because it was too new of a CSS feature and we needed to support more older browsers, but that browser support has changed so much in the last couple of years that we’re now able to use grid in the editor. It just opens up so many new design possibilities and makes it so much easier. 

I’ll say on the custom development side, grid block is one of the first things that we build on one or a grid block is one of the first things we build on many custom sites because it is just much more powerful than the columns block and also easier to use in a way. So I’m excited for these explorations. 

I will say though, a couple of releases ago, the group block changed to show that variation picker when you first insert it where you have to pick between the variations. I’m not yet sure I’m in love with that approach of … I like the various variations of the group block, but when I add a new group, it always pauses me a little too much because I need to step back and, “Hey, I just want to start with a default grid or a default group and then continue with it.” So I’m happy for more of these variations of the group block and for more of those layout controls. I’m not quite sure we have found the best way to expose them.

Birgit Pauli-Haack: I hear you. Making the decision to use a group block now becomes also a decision of what kind of flow you want and you are not there yet. When you get the group block, I understand that, but I’m also excited for the grid layout in terms of it is a feature that was requested quite a bit in the early days of the block editor layout site editing things, and it’s still missing. So now, certain plug-ins and block collections and theme collections have stepped in and allowed that already. So core is a little bit behind on that, but of course, core has a different outlook for the site editor than plugin developers have. 

The fifth experiment in the experiments page is the details block with the detailed summary block. We talked about it. It’s there for you to test out.

The sixth one is the block theme previews, and it enables block theme previews. That’s not much of an explanation, but what it allows you is on your site … So the customizer had the live preview of themes that were already installed on your site so you can see how your site would need to change to when a theme would be activated. It’s more a decision making tool rather than a good design tool. 

So with many, many block themes coming online, we are now beyond 300 in the directory. I think the largest number is 306. I think it helps with the decision if you want to change your theme out to have a better preview, and the customers that preview doesn’t work with it. This is the first iteration. I ran that through themes through the preview and it was a great experience, so much better than the original one to review certain parts of an existing site.

It also revealed that not all block themes are alike. There are significant differences, and having a tool to actually explore those differences or even notice them is invaluable, definitely. Not every theme behaves with this live preview feature in it, so if you are working on themes and either you have a starting theme in an agency or you use a collection of themes to build your sites to choose from, you might want to test them with this theme preview so you can turn on and off features and showcase a few things that are available in the preview. 

Also, please, please comment on the issues or file issues on GitHub after your tests. I already found one that when I look for style variation and I want to see how a page changed the style variation, I don’t have a way to do this because the page that is linked, the link doesn’t go to the preview, it goes to the page in the template editor, and all of a sudden, I’m out of my mindset on a preview, but all of a sudden it gets me into the editor. So that’s common for things that are in testing, but it also needs to be pointed out that that’s a major stumbling point for someone who uses the feature for the first time. 

The last one of the tests has just come in. It’s a navigation block that uses the still in Experiment interactivity API, and I have not used it. Did you look at that, Fabian?

Fabian Kägy: I looked at it briefly, but the summary of it is if you’re using it and you notice a difference that worked before, there’s a bug because this essentially swaps out the engine, but you should notice it as an end user. It changes how the front end JavaScript of the site works to use that interactivity API, but instead of some custom JavaScript that was purposefully written for this, using that interactivity API to make it more declarative, but as an end user, toggling that setting should not change anything about it works. Yeah, it may produce the actual bundle size, therefore make your site a little bit faster, but usability wise, there should be no difference and there should be full-on feature parity with how the navigation works today before or after you switch that setting.

Birgit Pauli-Haack: Good to know. So if you don’t notice anything, it’s okay. Excellent. So this brings us to the end of the show today. Well, I think we talked a lot about all the new things that come to block editor and to WordPress. Thank you so much for joining me today. Fabian, is there anything that you want our listeners to know about the block editor, about WordPress, about 10up? Now is the chance to talk about it and we’ll add links to the show notes. I just wanted to say about 10up, you have a wonderful educational site about the block editor with quite a few white papers and tutorials. How did that come about? Is it your work or…?

Fabian Kägy: Yeah. The gutenberg.10up.com website, our block editor best practice site has been my baby for the last year and a half or so, where I got to spend a lot of time actually writing down how we as an agency approach working with the block editor and setting up the best practices for how to do that in the agency setting for that special type of client. Whereas the main documentation of core is more geared to end users, which is the right thing, but because of that, we decided that there is space for an additional resource to focus on the things that are important for those very curated experience for big clients and so forth. 

So that is one thing that I would mention, just taking a look at that gutenberg.10up.com website, and if you have any feedback on that, feel free to reach out anywhere on the Make Slack or on Twitter or Masévon or Blue Sky or wherever you can find me pretty much always talking about block editor stuff. 

Then the other thing that I will just mention is the 10up block components NPM package, which is my passion project and has been for the last three years or so, which essentially is a collection of React components that work like all of the WordPress packages, the WordPress components, WordPress block editor components. It is a collection of additional components that are adding sometimes very complex, sometimes easy functionality for you to build. If you build custom blocks, making that a whole lot easier so you have to write less code and know that it’s tested and is working with the way that it should, and doing that in a way that feels 100% like it is just core WordPress. I’m very happy and proud of that project. If you find it useful or if you have questions or feedback about that, always happy to chat.

Birgit Pauli-Haack: Well, thank you so much. There’s some great resources. You mentioned custom blocks. There has been discussion around static block with this dynamic blocks. Where do you land?

Fabian Kägy: The way I think about it, if I’m building a plugin that is meant for the official directory where I as a developer do not have access to the site where the code is running on, I would go with a static block unless I need to show dynamic data. If I as the developer can access and have maintenance over the site I built dynamic blocks, and that means in the agency context where we’re often changing designs, making quick iterations, we are, for the most part, only building dynamic blocks because of that because we cannot spend the time to deal with deprecations and all of those things. 

It really comes down to that where if you have … The thing that you should ask yourself is, “What should happen when I need to change something about this block on a code level? Should all of the old instances that maybe were published three years ago, should they also get those updates automatically or should I not … Should that historical content stay untouched and just stay the way that it was?” If it should stay in touch, static blocks is your right answer. That is the way to go. If it should update in all instances or if you need to modify the block structure very often and have access to the maintenance there, dynamic blocks are much easier to deal with and are … So I’m coming down most of the time on the dynamic side.

Birgit Pauli-Haack: Dynamic blocks side. All right. So well, thank you for answering these quick questions and having some insight in how you work as a longtime block editor adopter and in the agencies. It was a great pleasure talking to you, Fabian. We will share all the links that you mentioned, of course, in the show notes. Before we end the show, oh, what’s your Twitter handle, Fabian?

Fabian Kägy: My full name spelled out, so F-A-B-I-A-N-K-A-E-G-Y, just all spelled together. You should be able to search for it and it should come up.

Birgit Pauli-Haack: That’s just for the people who don’t go through the show notes. We, of course, have all the links in the show notes. As always, the show notes will be published on gutenbergtimes.com/podcast. This is episode 83. If you have questions, suggestions, and news that you want us to include in the next show, please send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Thank you all for listening. Thank you for being here, Fabian. This is goodbye and I wish you a wonderful weekend.

Fabian Kägy: Thank you so much for having me.

Leave a Reply

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