Gutenberg Changelog #93 – Gutenberg 17.1, Command Palette, Data Views and Grid Layout

Gutenberg Changelog 93 with Isabel Brison and Birgit Pauli-Haack
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #93 - Gutenberg 17.1, Command Palette, Data Views and Grid Layout
Loading
/

In this episode, Isabel Brison and Birgit Pauli-Haack discuss Gutenberg 17.1, the Command Palette, experimental Data Views and Grid Layout

Show Notes / Transcript

Show Notes

Special guest: Isabel Brison

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 93rd episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about Gutenberg 17.1, the command palette, data views, grid layouts. A lot of good things. I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and a full-time core contributor for the WordPress Open Source project sponsored by Automattic’s Five for the Future Program.

Wow, that’s a mouthful. I’m so happy to have Isabel Brison with me. She’s a JavaScript developer at Automattic, working on Gutenberg as a core contributor. Editor co-lead for 6.3. WordPress 6.3 release in August. And also, she mentored the cohort editor tech and triage for 6.4, which just came out at the beginning of November. So, greetings to Sydney, Australia. How are you today, Isabel?

Isabel Brison: Hi. Hello. Very good. Just getting towards the evening, end of the day here. And yeah. Doing pretty well. Thanks.

Birgit Pauli-Haack: Excellent. Excellent. Yeah. Well, I just got up. Just so everybody knows, we are an around the globe operation here. And it’s now 9:30 on November 24th in Europe. And Isabelle, it’s about 7 o’clock at your place?

Isabel Brison: Yeah, it’s 7:30 here.

Birgit Pauli-Haack: 7:30. Yeah. So, let’s get started. We have a lot of things to talk about.

Isabel Brison: Yes.

Community Contributions – Command Palette

Birgit Pauli-Haack: But first we have … Before we go into the changelog of the latest Gutenberg plugin, let’s talk about other things that happen in the community. The first one is Justin Tadlock published a tutorial on how to create your own commands with the command API. It’s an introductory tutorial, and it shows you how to create … If you want to open up the Experiments page, you can do this with a plugin.

So, you put all the commands in one plugin, and then you activate it. And then, you have command for opening the Experiments page. Or it also has toggle the panel command or toggle the user preference commands. And the last one is also toggle the panel command, but it has some additional sidebar notices in there. Not sidebar. Snack bar. Snack bar are the ones that are on the bottom of screen. So, you know, “Okay, something happened.” Sometimes, with a command palette, sometimes, you don’t get a notification back, something happened. So, adding the snack bar notices is also in the tutorial. So, this is a great way to get started. And there is an advanced article to come, as well, to use command loaders to have additional or a little bit more, how would I say, functionality with it without just opening up and down certain features.

Isabel Brison: Yeah. This is pretty cool because, I guess, you can open any page. You can open setting … You can toggle settings from it. And say you’re a plugin. You could potentially add a command to the palette where you can direct people to your plugin page.

Birgit Pauli-Haack: Yeah, for own plugin. Of course, yeah. You can add that as an additional feature to your plugin to provide also commands for the command palette. I think that’s really cool. I’m waiting for the point, but I’m always waiting. I’m waiting to the point where I can daisy chain those commands, so certain workflows can happen on key press with the shortcut. Yeah. So, I can say, “Okay. Now, give me a separator block and use that particular variation.” And it would save me three clicks on the mouse on a weekend edition that has, I don’t know, 15 sidebars in there. So, it will be quite a saving, but yeah.

Isabel Brison: Oh, workflows. That would be pretty cool. Yeah.

Birgit Pauli-Haack: Yeah. I don’t know if that’s … I think that’s part of the idea for the command palette later on, maybe. Yeah. Or maybe that’s plugin territory. We’ll see what comes out of it.

Isabel Brison: I was just thinking and just wildly speculating here, but with all the talk about AI that’s been happening in the past 12 months or so, you can imagine that that would be a flow where you could just … In the future, you would be able to just open it up and go, “Oh, give me this, that, and that.” And your AI assistant would pull it up like a bunch of translate what you said into blocks.

Birgit Pauli-Haack: Yeah, yeah. You could certainly use that search box on the command palette also to create AI commands, and then what comes back in the lower section of the command palette would be some cool stuff. Yeah, some pictures that you were looking for or some … Oh yeah, some summaries or text or translations. Yeah. Yeah. Let’s wildly speculate on the command palette for … I love it.

So, Joen Asmussen, who is part of the WordPress design team, has published his Design Shares that is just showcasing the things that the team is working on or has been working on in the last two weeks. If you want to follow the design make blog, you will get notifications every two weeks and to see what’s going on, because the design team not only makes things pretty, it also thinks through some of the workflow and some of the, “How should this work, and how does the interface work with that?”

And so, you get a glimpse into the future for certain things. And he starts out with the sticky table elements. That’s for the data views or the admin list views. That’s how the header column and pagination, and also that the data inside each cell’s always integrated and the pagination is locked in the same position.

So, then, also, to new and URL popover, tightening up the user interface. They’re working out, also, on the open source audio component for the Creative Commons site, which looks really nice. I really like that.

Isabel Brison: Oh.

Birgit Pauli-Haack: Yeah. And then, some great iterations over a dropdown menu. That is a new component, and you can follow along that and you see what kind of details the team is working on for any of those interface components that not only power Gutenberg or the plug editor, but also are used by plugin developers for their own interfaces if they choose so. So, this is definitely a great insight into how much work and thought goes into some of the interfaces.

Isabel Brison: Oh, definitely. And dropdowns are such a hard area. It’s so hard to get right. And I mean, speaking from the experience developing in Gutenberg for years, and there have been so many problems with the popover component positioning, and there is so many bugs that we’ve had to fix. So, I’m really looking forward to the next iteration of dropdowns, and especially with these flyovers … I mean, a way of making the dropdowns when they’re nested easier to navigate. I think that’s really important.

Birgit Pauli-Haack: Yeah. Yeah. And it’s not only for menus. It’s for all kinds of interfaces that come in and out of the sidebars and from the top bar and all that. So, yeah. That’s definitely some great work that we can see there. They also worked on a range date picker. That’s more for plugins? I’m not quite sure. Yeah. The range picker is something that you get when you book a flight or a hotel where you say, “Okay, I go from November 11 to December 13,” and you have the range to pick. It’s an initial sketch and, yeah, it’s definitely something plugin can … I don’t know. I’m really having a hard time picking where in Gutenberg that might be helpful.

Isabel Brison: Yeah, I was trying to think where we deal with dates. I mean, post publishing doesn’t usually need a range, so I’m wondering if there’s … Oh, no, actually … So, possibly, because I think maybe that will have someplace in the data views where … Again, I’m wildly speculating here, but I imagine with … Because there’s a fair amount of thinking being done around how to actually make the data views be good to organize data and to organize content. And so, potentially, you’d think you might be able, at some point, to pick, say, a range of posts from this date to that date or something like that.

Birgit Pauli-Haack: Right. Yeah. Would make sense. Yeah.

Isabel Brison: And then, having a range date picker could be useful.

Birgit Pauli-Haack: Yeah. It could be useful for bulk edits, for instance, or just for viewing, say, “Okay, all the posts around Thanksgiving, give them a Thanksgiving kind of tag” or something like that. Yeah. Bulk things. Yeah. But yeah, you’re right. Yeah, that could be for some of the admin components. Yeah.

And then, the styles panel where … There’s an interesting iteration of the styles panel work where you can have it all on the left-hand side of the site editor. And right now, the style work is all on the right-hand side of the editor, but now you have a middle column between the content and the menu where you can edit or change the colors and the font and this kind of thing. So, that’s a nice iteration. We’ll see how far that gets into the editor.

Isabel Brison: I see that this styles panel … This is referring to what, in my head, I still call global styles.

Birgit Pauli-Haack: Yeah.

Isabel Brison: Okay.

Birgit Pauli-Haack: Yeah. And it’s also a combination between the global styles as you know it and the style book. And then, have the sidebar on the left-hand side, so it has more connection between which entity you are actually editing.

Isabel Brison: Because right now, on the left-hand sidebar, we have, in the site editor, we have a style section that allows you, if the theme has style variations, to pick a theme style variation. So, that’s … It’s weird that we have the styles on that side, and then we have the global styles on the other side. So, yeah. Potentially, it would be nice to have everything in one place.

Birgit Pauli-Haack: Yeah. And especially about the style variations … Once you have your theme selected and you select the style variations, then it’s too prominent in the menu because you don’t need it anymore. It can be hidden for something until you need it again. And I think that’s also part of the rethinking how the left menu items work in terms of order of importance or context sensitive. I don’t know. These are some of the thinking behind that. And it comes through some of the GitHub issues where say, “Hmm. Yeah. Shouldn’t we be smarter, or shouldn’t the system be smarter to hide that when you don’t need it anymore?” But that mind reading business is such a hard…

Isabel Brison: Oh, yeah.

Birgit Pauli-Haack: … such a hard tour.

Isabel Brison: Mind reading? Very hard, very hard. Even with AI.

Birgit Pauli-Haack: Yeah. And then, we are still in the design shares by Joen, and he also has a link for the events redesign. There’s … under the community section where the meetups and the WordPress, the WordCamps … they’re working on an events page or events section that is a little bit more modern than what we have right now. And it’s a nice iteration, and it’s really coming together. So, yeah. The community team is working very hard with the design team to get this done.

And then, there is a mockup. We found a mockup for something that was actually missing in the site editor, that … these are the settings around the homepage that are in the general settings, but actually totally removed from all the homepage templates, kind of thing, so … and page edits. So, this is going to … might be … It’s a quick mockup to bring those settings in also into the site editor.

Yeah. So, those were Design Shares. And I always like to do … Go in there and look at it even for … Well, and this was the first, again, that we did it on the podcast because, of course, it’s visual and, on the podcast, you don’t see anything. We can’t show it to you. But I really urge you to, of course, share the link in the show notes. But take a look at that. It’s really very interesting for me and exciting. And when you follow every two weeks, you get an idea of where things are going and what people are working on.

And then, the last thing I wanted to point out for you, dear listeners, is that the plugin directory … About six weeks ago, there was this little kerfuffle that there was a live preview button enabled on the plugin directory, but it wouldn’t work for all plugins. And what it does, it opens up the WordPress playground, installs the plugin so a user can actually test out the plugin in a live environment without having to set up a test site or put it on their production site or any of that. So, it’s a really cool feature in my view.

And Alex Shiels, who’s a longtime member of the Meta Team, enabled it, and it was actually a smart move because, within a day or so, he had all the feedback he needed to take it down again and revamp it, and then come out with it in a way that the plugin developers can work with it. And on the Meta blog, he just published that the preview button is now available for plugin developers, for the plugin maintainers to create a blueprint file on what is all needed for the test site, for the playground to be a good test site for that plugin.

And they can test it out. They can configure the playground with a blueprint file. And then, once it fits our needs, they can opt in for themselves. And then, later on … That’s not yet implemented. They can open it up to their users. So, there’s a double opt-in for that feature, but it had all the … So, it’s all in the control of the plugin developer. But if you are a maintainer of the plugin developer, any feedback you have about this, leave it on the post. They’re very grateful for it to make this better and better and better.

Isabel Brison: Yeah, absolutely. It’s a feature where you really need plugin developers to test it and make sure that it works for their use case because there are so many different types of plugins. And I think, from memory, one of the problems that was flagged initially was that some plugins have dependencies, so they don’t do anything in isolation, and having a preview just doesn’t work unless you can configure the proper environment to have that preview in. And so, I think that’s one of the features that have now been added is that each plugin developer can configure the optimal environment for their plugin to run it.

Birgit Pauli-Haack: Exactly. Yeah.

Isabel Brison: … which makes perfect sense.

Birgit Pauli-Haack: Yeah, it has a few … So, the blueprint.JSON … It’s a JSON file that you can have the steps that the playground needs to make to be a good demo site, be it a plugin install, be it a open up … In the block editor, for instance, if it’s a block or a block editor feature to see it right away and not have to go through, “Okay, this is the admin. This is the login. This is …”. You get right to the point of it. It’s really neatly done. So, yeah. Check it out as a plugin developer. Again, it’s not yet open to the public.

What’s Released – Gutenberg 17.1                                                       

All right. This brings us to the section, what’s released. And right now, we’re talking about Gutenberg 17.1. Andre Maneiro was the release lead. And it has PRs from 55 contributors, three of them new. Yay. And they submitted about 200 PRs that are merged in this version.

Andre writes, “The release includes several new enhancements, loads of bug fixes, and continued work on Phase 3.” The release post is, of course, in the show notes, and let’s just dive in. And yeah, say in the foreground though, it’s more quality of life and bug fixes than anything else apart from the data views. But we can talk about it a little bit later about that.

Enhancements

So, the first item I have highlighted is that the template parts now have a fallback to the current theme when it’s not provided. So, that is just make it all a little bit more predictable and not running into errors or confusion for the user. So, if a template part … If a header isn’t … What is that exactly? So … Go ahead.

Isabel Brison:The template part. If there is a template part referred that doesn’t actually exist, then it will fall back to a default template? I didn’t actually read it.

Birgit Pauli-Haack: Yeah, that comes from the theme. Yeah. So …

Isabel Brison: I’m not sure how the internals work.

Birgit Pauli-Haack: Yeah. No, it’s the fallback is directly to the theme part that comes closest, pretty much. It’s a performance enhancement to make sure that searching for something that’s not there doesn’t slow things down. And now, the next one that I wanted to point out was that the site editor now also shows theme patterns from the directory, showing things from the directory. It wasn’t built into the site editor yet. It wasn’t the post editor. So, any post and pages. You were able to add things, point out to the … So, the theme has … In the theme JSON can point to patterns that are in the directory, and they would show up in the pattern section of the post editor, but they wouldn’t in the site editor, and that’s now fixed. Does that make sense?

Isabel Brison: Yeah, that’s great. Yeah, yeah.

Birgit Pauli-Haack: Yeah. So, for the theme, it means the theme developer doesn’t have to bundle all the patterns with theme if they put it up on the directory and then just can refer it to it with the slug. And that’s a nice way to do it.

Isabel Brison: Yeah, that’s also … I mean, that can also be considered or … Maybe not performance enhancement in itself, but it does make things easier if you want to create a performance theme so you don’t have a dozen, or I don’t know, a hundred patterns bundled into the actual theme.

Birgit Pauli-Haack: Yeah. That’s true. Yeah. But, of course, they all need to follow the same mechanism. So, if you have more than one theme and you want to refer the same patterns in the directory, it also streamlines your processes a bit. So, there are a few things that are coming for the globalized revisions. So, revisions are something that were supposed to come into 6.4, but they didn’t make it because it was such a huge project that the two months of development time wasn’t enough. But it’s definitely slated for 6.5 and, now, there are improvements with every Gutenberg plugin release.

This time, we have a consistent back button behavior and the scripted text timeline for the revisions. And also, it loads unsafe revision items in the revisions preview, even if you haven’t clicked on Save. So, that definitely helps you not losing content or changes. Those global style revisions are so useful, and I’m looking forward to seeing them in WordPress.

Isabel Brison: So, there is a version of revisions. There’s a very basic global styles revisions already available in 6.4, which you can … From global styles or styles … I always call it global styles because styles is just so vague. Styles revisions. There’s a little section in here, and you can look at the revision history.

Birgit Pauli-Haack: Yeah. So, it was in 6.4, but not fully fledged out. Yeah.

Isabel Brison: Yeah.

Birgit Pauli-Haack: You’re right. Yeah.

Isabel Brison: So, it’s ongoing. So, there’s a very basic version that’s been merged in 6.4. There is a lot more optimization, UI improvements, making the whole experience smoother that is still being worked on and due for 6.5.

Birgit Pauli-Haack: Yeah. I think the revisions on posts are so old. They don’t know anything about blocks. So, it’s really hard to make a good, informed decision on how that’s actually going to look visually when you have to show style. So, going from one place to the next and see how that fits in and does it work? I think it’s a longer iteration process than one would seem. And that … Yeah. 

Isabel Brison: Yeah, totally. Because for the post edit … So, if you’re revising your content, if you’re looking at the revisions for posts, you still get that. Basically, it’s the classic WordPress admin interface where you see a diff of the content, but it appears in markup form and that gives you no clue. I mean, especially if you have a lot of blocks on the page and you’ve changed the attributes and you’ve changed the blocks. And you just have to go and read through all that markup, and there’s no way of seeing the difference visually, which is important when there’s a very visual-oriented tool, which is the block editor. So, yeah. That will be great. That’s still to come, being actively worked on.

Birgit Pauli-Haack: Then, the block editor has the button block got a simple thing, we would think, but it’s … because our muscle memory. So, now, if you use double enter, you skip to the default block and it doesn’t repeat the design of the other block. Is that what I’m reading there?

Isabel Brison: There’s a keyboard shortcut for the button block. Yeah. So, buttons are interesting because, a while ago, it was decided that, if you change a style on a button … Say, if you change button to another style variation, you will probably want the next button to have the same style and you might not. So, the double enter thing. I’m not quite sure how it works because when you click enter from one button, you go into the next button, usually. Right? So, double enter.

Birgit Pauli-Haack: If you do double enter, it skips the styles and goes to a default block way.

Isabel Brison: But to a default button block? Is that what it does? Sorry. It’s just not very…

Birgit Pauli-Haack: So, double enter at the end of a button block.

Isabel Brison: … clear to figure out what it does.

Birgit Pauli-Haack: … moves back to the next line so you continue typing. Double enter in the middle of button blocks.

Isabel Brison: Oh, it takes you out of the button block. Oh. Oh, that’s brilliant. Yes. I see. Cool. Cool. So, it has nothing to do with the button styles. It’s all about making it easier to add another block that’s not a button after the button block.

Birgit Pauli-Haack: Yeah.

Isabel Brison: Oh, that’s great. Yeah. Oh, I’m all for keyboard improvements all the time.

Birgit Pauli-Haack: Default block, not default button. I read it wrong. Yeah, I’m kind of … Yeah. Okay. That’s a really good behavior. And I knew it was something that I was actually expecting to be because we know it from the list view. We know it from the list block. We also know it from other blocks that, when you do double enter, you’re out of that whole inner block behavior, like the social blocks, and then you go out. And I just read it wrong all of a sudden.

Isabel Brison: Oh, that is such a great improvement.

Birgit Pauli-Haack: Yeah. And it’s like … Some of the things where I say, “Why wasn’t it before?” 

Isabel Brison: Yeah. Well, it’s an iterative process. Yeah, true. There are all these … And sometimes, it’s just tiny things make the experience so much better, but they’re not always obvious. And sometimes, they’re actually not very easy to implement. In this case, I don’t know. I didn’t actually look at the pull request for this.

Birgit Pauli-Haack: And a similar thing is actually the next one for the design tools where we get block gap support for the quote block. And so, now, it has a good layout support, and you can better control the spacing of the inner blocks. Yeah.

Isabel Brison: Well, that one was actually easy to implement. I know because I like it myself. So, someone else did. So, another contributor submitted a pull request to add layout support to the quote block. This was Tomoki Shimo Mura. I hope I’m saying the name correctly. And so, that added basically support to the quote block, and that means that quote will automatically use the default block spacing. And that is good because it brings it in line with whatever the default theme block spacing is. So, it’ll have the same kind of spacing that other blocks have between them by default.

But then, I and a few other contributors reviewed that pull request, and we started talking, “Well, what would be great would be to actually give explicit block spacing support to the block.” Because now that it is using the default block spacing, it would make sense that, if people want to change it, they have the control available. So, that was just sort of a little follow-up, and it was literally one-liner. Just adding support for block spacing…

Birgit Pauli-Haack: Oh, and this is…

Isabel Brison: … which made sense.

Birgit Pauli-Haack: … blocks JSON? Yeah.

Isabel Brison: So, now, you can change. So, now, by default, it will have whatever the default theme spacing, block spacing is. And if you want, you can go into your quote block, and you can change the spacing to make it bigger or smaller as you design.

Birgit Pauli-Haack: Now, we get also … So, for the list view, we now have a keyboard shortcut to select all blocks. It follows the common keyboard shortcut for Select All. So, it’s either Command-A or Control-A. Command-A for Mac, and Control-A for Windows. To select all the blocks that are in the list view. And that’s really good, especially when you just hit delete and then gone!

Isabel Brison: Love a good keyboard shortcut. Command-A Delete. Yes.

New APIs

Birgit Pauli-Haack: Yeah. And then, next one is actually a good thing. It sounds so technical, but it’s the Download blob: remove download js dependency. But what it actually does is … Found that when you export the patterns, the former reusable block being synced patterns now … When you export them and use the JSON to upload them, it works. But if you do this with other patterns, the synced patterns, somehow, it used the different JSON package, whatever, and it was malformed JSON. And now, they streamlined the same mechanism for both of the downloads and exports for the patterns.

So, that was interesting experience that it was implemented in both, but then one implementation worked and the other didn’t. Now, we found out which one is the right one and streamlined it. Sometimes, it is a clear path forward on certain bugs, and sometimes it’s not. But this was clear.

Isabel Brison: Yeah. Oh, yeah. That’s good.

Bug Fixes

Birgit Pauli-Haack: Speaking of patterns, now you can actually add embed blogs to your patterns, and they render correctly on the front end, which was … I think, even in the block editor, that wasn’t always a given that you could use a certain video in the patterns or a certain social post in the pattern. It would only display the link for that, but it didn’t process the embed. So, now, it does. And that’s a really good enhancement there.

Isabel Brison: Yeah, this brings it in line with templates. I guess patterns was one of the areas where it was probably one of, I guess, the last remaining area where embeds weren’t being processed because there’s already logic in place to process them in templates and widgets and things like that. So, this made perfect sense.

Birgit Pauli-Haack: Yeah. And now … Well, we are a travel from all the different things to all patterns, like template parts are patterns. Reusable blocks are patterns. Patterns are patterns. And people are working on the partially synced patterns. So, it’s all … Pattern is what makes it stick now.

Isabel Brison: Yeah. I think it’s a good thing in general. I mean, we’ve had reusable blocks for ages, and patterns was a new version, but they’re very similar in, I suppose, the ways that they’re used in their use cases, I should say. And so, it does make sense for them to be one thing, and you can choose whether they’re synced, whether they’re not, whether they’re partially synced, I guess.

Birgit Pauli-Haack: Yeah. Yeah.

Isabel Brison: So … It’s good to provide a range of options, but I definitely appreciate having the renaming of reusable blocks to patterns so that we all know that we’re talking about the same thing.

Birgit Pauli-Haack: Yeah. And the only so difference from just which content updates and which doesn’t. Yeah. So, the next item … It’s just a code quality or quality of What You See Is What You Get editor that you can now see the post image block is now wrapped in anchor tags, is also in the editor, not only on the front end but also in the editor. So, you know it’s actually working and functioning, kind of thing.

Isabel Brison: Oh, yeah. Yeah.

Birgit Pauli-Haack: Yeah. The What You See Is What You Get editor is a promise, and sometimes it falls down.

Isabel Brison: It’s good to have consistency. It’s hard. It’s a hard problem sometimes because the markup. The editor is an editor ultimately, and you have to have content edits all over the place because the content has to be editable, obviously. And so, there can’t always be a one-to-one match between the markup in the editor in the front end, but the more divergent it becomes, the more chance there is for bugs to be introduced and for them not to be a visual match. So, we are always trying to make sure it works. It’s a very fine line.

Birgit Pauli-Haack: Yeah. It’s very interesting. Sometimes, you encounter problems when you solve something on the front end, but then you get it into the editor and then it doesn’t work anymore. So, one example was that the gaps between the blocks … You could actually switch off, and all controlled through the interface.

But what happened was, now that the space between the blocks wasn’t big enough, the siblings insert between didn’t have a place to show anymore. So, that was an interesting … I don’t know if you have an issue for that, but it came up in one of the calls for testing, and it was really interesting to … Yeah. Well, yeah. What You See Is What You Get, then it’s not what you see.

Isabel Brison: It’s actually … It’s What You See Is Not What You Want To Get, I guess, because you still want to see … I don’t want to have space between the blocks, but I do want the sibling insert to appear because I do actually need to add something between these two blocks.

Birgit Pauli-Haack: And sometimes, you have these competing interests to line up … Just a little tangent here.

Isabel Brison: So, what do we have?

Accessibility

Birgit Pauli-Haack: The next is a component for the … There’s the image link button pressed state on the media text block. Sometimes, the headlines are a little bit obscure. So, in the image block and in the media text block, when the image is linked, the link button in the block tool doesn’t have a pressed state. Okay. So, as such, there’s no visual semantic accessible information for the image to actually be linked. Okay. That is fixed. Cool. Yeah, that’s an important accessibility issue fixed. And then, another one.

Isabel Brison: I’m just going through and trying out all the things. Adding a link to an image and seeing … Oh, yeah. I see. So, now, it actually becomes obvious that there’s something in here. So, now, the button … It becomes a dark background, light-colored text. I think this is the change. Oh, that’s cool.

Birgit Pauli-Haack: Yeah. The next one is a similar one. It helps you get your focus back when you’re on the toolbar and use the Escape key and then you get back to the editor canvas, and you don’t have to tap around the thing. Escape gets you out of the block tool. It’s interesting.

For those who are more keyword users, that’s definitely a good problem to solve. And that’s the piece that goes with a double Escape coming out of a button block into the canvas. Again, that’s a similar one when you block toolbar doesn’t get you … You have to use the mouse or something like that to get out of the toolbar or tap instead of Escape. Yeah.

Isabel Brison: I think … memory. I’m going to test this. But I think what happened before was, if you were on the block toolbar and you pressed Escape, you would be taken into navigation mode.

Birgit Pauli-Haack: Oh, yeah. Right. Yes.

Isabel Brison: But actually, no. I think, now, I’m actually testing this on a 6.4 vanilla, no Gutenberg install. And what I’m doing … I’m in the block toolbar. I’m going around the buttons in the block toolbar, and now I press Escape and focus just seems to go somewhere. I’m not sure where it goes. It might actually … Ah, interesting. Okay. That was definitely a bug. Good job. It’s been fixed.

Birgit Pauli-Haack: Yeah. So, when you say, “vanilla 6.4, no plugin,” means that was before this release came up.

Isabel Brison: Yeah. So, I was comparing. So, I’ve got Gutenberg … Actually, I’ve got Gutenberg trunk on my local development environment, and I have another install of just 6.4 and I just keep comparing it and see what’s changed.

Performance

Birgit Pauli-Haack: What’s changed. Yeah. So, this was the time for some of the basic accessibility things to be fixed and bugs to squash. Another one was … It actually sounds like a code quality performance, a code quality PR. But it’s under performance. And the List View Block. It has a lot of calls to the same hooks. And the code quality was to just combine those hooks, those calls, to the ‘useSelect.’ And that actually increased performance quite a bit on the List View. So, yay.

Isabel Brison: Yay for all performance improvements and especially with the List View because it’s becoming more and more important to navigating in the block.

Birgit Pauli-Haack: Yeah. Yeah. And it’s definitely considerable when the tests were 1,000 blocks, and the call were four calls per block. So, it was 4,000 calls to the same store. It was interesting.

Isabel Brison: Yeah. Oh, yeah. Absolutely. Yeah, you don’t want that.

Documentation

Birgit Pauli-Haack: Yeah. So, there were two documentation issues that I wanted to point out from this release. And there was that there is a new Block Development Quick Start Guide in the Block Editor Handbook and also one for how to create the block templates for the scaffolding tool. So, if you’re a block developer and/or a budding block developer, check out the new quick start guide on your journey from becoming confused to becoming a proficient block developer. And so, that is in part of the revamp of the Block Editor Handbook that has been published. And the second one is also there is a built-in local environment with Gutenberg. It’s called wp-env, and that is now also listed under additional resources for local environments.

Isabel Brison: Oh, nice. That’s good. I mean, it’s a good development environment if you’re okay with running Docker, which, I guess, Docker can be pretty resource-intensive. So, it depends on how powerful a machine you have, if you want to run it or not. But if you’re okay with running Docker, then this is a really easy environment to get set up and running.

Birgit Pauli-Haack: Yeah. And to test whatever you’re developing on the current environment. You don’t have to set up database and PHP and connectings to and the usual MAMP things. Yeah. So, yeah. It’s definitely a good resource, and people worked on it. So, yeah. It’s been around for a while but never really mentioned in the documentation. So, now it is.

And that’s, I think, is all we have from this release. And I guess you probably, dear listeners, agreeing with us. There was not a whole lot of big things in there. There was no big thing in there, but it was all good enhancements and … Performance enhancement as well as user interface enhancements and certain great accessibility improvements as well. 

What’s in Active Development or Discussed – Grid Layout and Data Views

Which brings us to what’s in active development or what’s discussed. And this is just an announcement. Maybe we could have done it earlier, but it’s “What’s new for developers?” a roundup post is published on the developer blog.

If you haven’t signed up for that feed, it’s a roundup post of what’s new between the 10th of the month and the 9th of the month and published on the 10th of the month. And Justin Tadlock and I were compiling that from various sources like being a GitHub, a Gutenberg release, what’s new into core, what’s around on the learn for developers. So, you can go through … It has a huge table of content, but it also gives you an inkling on what’s new, what you should pay attention to, and where things are going, and where you find the information to follow along.

And it mentions the experimental pieces, the form and input blocks, and also the Data View works with links. And then, some major changes that came with 6.4, but this is a repeat of some of the Dev Notes condensed, but just highlighting in case you missed it. And then, moving away from the WordPress/element to React and … Yeah, all these good technical things.

I will share a link to it in the show notes. For instance, it mentions the new Tabs component that replaces the TabPanel or the PluginPostExcerpt slot fill for plugin developers on the block editor and all that good stuff. Is there anything that stands out that you want to talk about?

Isabel Brison: From the developer?

Birgit Pauli-Haack: The “What’s new for developer?” Yeah. We separated into what’s interesting for plugin developers and what’s interesting for theme developers. Sometimes, it has an overlap, and then it’s a toss-up. But that is where you can say, “Okay, I’m not interested in plugin stuff. I just want to see what’s new in the theme stuff.” And that’s also a pattern update.

Isabel Brison: Yeah. I’m very interested in seeing where the Data Views work is going. I think there’s a lot of potential for enabling. It’s already viewable as an experiment in Gutenberg. So, that’s a cool one I’ll be keeping an eye on.

Birgit Pauli-Haack: So, if you want to, just as a developer, if you still have trouble, and … I think it’s getting worse that it’s hard to keep up with Gutenberg. That’s why we create this monthly view instead of having just everything new every four months when there is a new release out. So, you can see things coming. And if they were interested and not and follow up on that. Yeah.

So, yes. But speaking about experiments, when you enable the Experiment page on Gutenberg plugin, you see quite a few experiments. But let’s talk about two of them. One is the Data Views, and what you see is the progress on the lists for content types like the templates or the pages. When you have List All Pages, how can that look in the site editor as well as in the template? So the pages in the site editor as well as the template lists show already these new Data Views when you enable that experiment. Right?

Isabel Brison: From memory, I think it’s the pages. Let me check. I’m just going through. I’m not sure the templates…

Birgit Pauli-Haack: Yeah. It’s the pages.

Isabel Brison: … has it yet. So, if we go in the site editor and we get the little black bar on the left-hand side, when you go into the site editor. There’s a Pages section, and then, at the very bottom, you have Manage All Pages, which takes you to a list view of all of your pages.

Now, if you have the new admin views enabled, that page … So, that link in the site editor will actually take you to a new view, which is this Data View, which is quite experimental. And the interesting thing, well, for me, because I love layout and organizing things on pages. The interesting thing is that you can change the layout from a list to a grid, or you can even see a side-by-side view where you have your list of pages and then you can just click on a page and preview it in another window.

So, it works a bit more like an operating system, for a browser, I guess a bit more. It has this expanded functionality where you can view things in different ways, which could be quite useful depending on what kind of operation you want to do. So, yeah. I’m really appreciating the work that’s been done on this.

Birgit Pauli-Haack: Yeah, there’s also quite a filter view that you can review, can add a filter. You see only those four for a certain author, the pages who are just the status, just the scheduled one or the published ones. And in the views, there’s also a Sort By version. So, you can sort it by title, by author, by date. And not only the layout. So, also, you can say, “Okay, I want …”. And these are all features that you know from your WP admin, but it’s actually with a more modern interface and maybe even easier to handle for someone who is new to the system. The grid view shows you the featured image with it if you want to. And the side-by-side is really cool, as well, if you have the space on your screen.

Isabel Brison: Yeah.

Birgit Pauli-Haack: Yeah. You’ll see, right away, the layout of the page. Yeah, it’s really cool. Check out the experiment. It’s all experimental. So, at any time, it can change. Anytime, it can go away. Anytime, it can break. So, that’s the experimental nature of this. But … yeah. In this release, there has been quite some work on these Data Views, so if you go through the changelog, everything that says Data View at the beginning is about this admin section for the pages and the site editor.

Isabel Brison: But also, I want to add. The thing about experiments is that they’re being actively worked on, and they are always looking for feedback. And so, it’s immensely helpful, especially for folks who are invested in this and they want to see this going in a certain direction like, “Oh, this is really helpful” or “This is not good at all.” That feedback is really useful at an early stage, so that the developers know what’s working and what’s not and what might be causing issues for certain workflows or what might be a welcome addition.

So, yeah, the feedback … And I guess the downside of the experiments in Gutenberg is that they’re not always super visible because folks might not even think about going into the Experiment section. It’s like, “What is this?” And you can just click on things and randomly enable stuff, but it’s always super useful to go in and check those experiments and give feedback on them.

Birgit Pauli-Haack: Yeah. I found there are two kinds of people. Those who like to poke at new things and don’t mind if they get lost or confused or can recover quite nicely from it. And then, there are people who need to be secure or safe in safe spaces and they cannot … They just want to get their work done, and they are not interested in how the sausage is made and they don’t want to test things. Say, “Well, I’m not your beta test,” that kind of thing.

In open source, unfortunately, it’s a little bit different because we all work on it and we all use it. So, feedback is really important. But as you said, Isabel, but I also know that experiments can be a scary place for certain people.

Isabel Brison: Oh, yeah. I mean, absolutely. I mean, probably, don’t use it in production, but play around with it on the test website.

Birgit Pauli-Haack: Yeah. But you will see that there’s actually quite a few things there amongst them. We skipped over that in the release, but there’s also a Forms Block feature or set that you can test out. And I also wanted to talk about the grid layout. When you go to the Experiments page, it tells you in the experiments there’s also grid variation for group block. And when you enable that, what happens?

Isabel Brison: What happens? So, when you enable that, what happens is that, when you then go into your post or template editor and you create a group block, instead of getting the standard three variations that you have, which is the regular group, the row, and the stack, you get a fourth variation, which is the grid. And that variation is also available from the block inserter. So, you can just type grid and it gives you the grid block.

And the grid block is … Essentially, it’s a variation of group. It’s not a block in itself. But what it does is it allows you to set the grid layout on your group block. And it’s only … And most of the reason why it’s still in experimental, even though … That’s actually … I did that a while ago now. More than six months ago. So, it’s been experimental for a couple of cycles. It’s not in core yet.

And the main reason is that it’s only a very basic implementation of grids. So, you have the ability to set the amount. Not the amount of columns, but the column width. That’s the default option that you get. That’s the only option for now, where you can set a width that will be the minimum width of your columns. So, if you squeeze it down onto a really small screen, the columns will not go under the width that you stipulate, but they can stretch if it’s a wider screen.

And the good thing about that is that this is pretty much the only version of grid where you can, with a couple of lines of code, create a block that is responsive. Because what happens is, if you get to a point where you don’t have enough space on your screen for … Say, you have four or five elements in your grid, and you no longer have the space on your screen to have those four or five elements side-by-side because each of them has a minimum width set. Then, the grid just free flows, and it just calculates how many columns will fit on the screen.

That’s the easiest way. It’s the paradigm of responsive without media queries. And that’s the best way to achieve that kind of responsive without media queries layout. But, having said that, there is a bunch of configuration that would probably be useful for folks creating actual layouts with this kind of grid. And I think one that jumps to mind immediately to me is the ability to set how many columns your item or your block is going to span because you might want to block to span a couple of columns. You might not want all the columns, all the elements in your grid to have the same width, to occupy the same amount of columns. You might even want some of them to stretch the full width of the grid. And so, having that sort of configurability for children, I think, would be a really useful addition.

The question is how to implement that. What is the most useful way of implementing that that will satisfy the most use cases? And that’s where I think there’s still a bit of design work to be done. And that’s why that’s still experimental, although it is … So, the secret here is … It’s not quite a secret, but … So, grid support technically already exists in core. The thing is the UI is not exposed. So, there’s no grid group variation in core, but the grid layout already exists because it underlies the grid’s layout in the post template block.

So, that’s already an implementation of CSS grids in post template. And so, that means that if you really wanted to use a grid layout in core, you could go into your block attributes and set the layout type as grids, and that would just work because the code to support the layout type is there. What is not there yet is the UI and the group block variation.

Birgit Pauli-Haack: Wow, that’s really interesting. Yeah, I had no idea. Excellent. Are you going to write a blog post about it for the developer blog? I’m asking you publicly, but you can say, “I am going to think about it.”

Isabel Brison: Is this something that I’m going to have to commit to? Yeah, no. I’ll have to think about that. I actually have a fair amount of stuff on my plate right now. I’m not saying no. That would be great. I would like to write … I mean, I love CSS and talking about it and trying out new stuff with it. So, that is definitely a possibility that I will consider.

Birgit Pauli-Haack: Well, I also know that Justin Tadlock is in the start blocks for a while now when he heard about grid layout to write about it. But as it’s still in experiments, it’s … Yeah. We need to wait till it’s out of experiments, and that might take a while. Yeah. What I can see is … I just enabled it on my test site, and it’s really cool. I just added a few pictures in there, so it looks like a gallery but it’s not … Yeah.

Isabel Brison: Hmm. Yeah, it works. I think gallery is actually a block where it would be really cool to have a grid implementation, especially if you could control the size of the child blocks. So, that’s something that I’m looking forward to being able to work on at some point in the future. But there’s a lot … And actually, if you go into Gutenberg and you search for the sort of issues where layout and, especially grid, is discussed, there’s a lot of thinking around how it should work. Everyone has an opinion on it. And it’s one of those things that it has to be done right, and it has to be done in a way that will satisfy the greatest amount of use cases while keeping the implementation fairly simple and lean. So, yeah. It’s not going to be a very easy problem to solve, I think, but it will be a great one to solve. It will be great to see the outcome of that once it’s done.

Birgit Pauli-Haack: Yeah. Yeah, absolutely. Absolutely. And it’ll also answer some of the questions about responsiveness and “Where are my viewpoints?” and all that. So, you actually wouldn’t need them because the grid helps you with that. That’s modern CSS to you, but it’s also, what, six or seven years old now?

Isabel Brison: Well, yeah. Grid’s been … Actually, it’s been around. It’s had decent browser support for a long time. The exciting thing now is subgrid, which is … It has also, I mean, in theory, been around for a long time, but actual implementation in browsers didn’t happen until last year-ish. And I think it’s still not stable in all browsers. Let me just check. Can I use CSS subgrid? Because I think that, in Chrome, it’s probably already in Canary, but I’m not sure it’s in Chrome Stable yet. Wait, what’s the latest version of Chrome? It might actually be. Oh, yeah. Released October 31st. Okay. So, it’s in the latest version of Chrome. Actually, it’s looking pretty good. It was very, very recently implemented in Chrome Stable. So, this means that we can start thinking about not only grids but subgrids, which … You know what would be amazing is having your block so your block uses grid and you detect whether a parent block uses grid, and then you can enable that. It nested grid as a subgrid of the parent. I’m thinking that that would be really cool.

Birgit Pauli-Haack: It’s really cool and totally confusing for a user interface.

Isabel Brison: But everything would be beautifully aligned!

Birgit Pauli-Haack: Yes, the alignment is that one that confuses people. And yeah, I want it. Yeah. 

And I think we’re getting, time-wise, to the end of our show. It has been a great pleasure talking with you, Isabel, today. The Gutenberg Changelog. The bad news is this is the last Changelog of the year. The good news is we start one right in the first week of January with episode 94. But I have one question, still. What are you currently working on? Because you worked on the grid log a while ago, but what are you working on right now?

Isabel Brison: Right now? So, my attention’s been a bit scattered here and there with different things.

Birgit Pauli-Haack: Welcome to the club.

Isabel Brison: I’m actually trying to get some … I’ve been trying to add in some controls to allow, I guess, website designers … And this is probably going to be an interesting feature for agencies and folks using Gutenberg at a more enterprise level, where … For a long time, folks have wanted to be able to disable certain design controls. And so, I’m adding a few settings to layout so that some of the controls in layout can be disabled at a site-wide or a block-wide level. But that’s not very exciting. That’s not very exciting in terms of new features, something that probably should have already existed in there. So, I’m just going, “Okay, let’s add this in.”

Birgit Pauli-Haack: Yeah. I know.

Isabel Brison: The thing I’m excited about…

Birgit Pauli-Haack: Yeah.

Isabel Brison: … which I’m just starting to dabble in. I’m starting to play around with Drag and Drop because I think there’s a lot of space for improvement in the current Drag and Drop. And this is not to say that it’s bad because it’s a lot better than it was a couple of years ago. There’s steadily been work and improvement in that area, but I think there’s still a fair bit of stuff that can be done. And I’m particularly excited to try and combine the Drag and Drop functionality with the ability to create layouts. So, add Drag and Drop elements so that they can be side-by-side and things like that. So, I’m playing around with some very experimental stuff and trying to figure out if it works.

Birgit Pauli-Haack: Yeah. I have the vision that when I Drag and Drop something, it actually pops to a grid. And I know there are certain tools out there that actually do that, but it would be phenomenal if that would come to WordPress. So, I’m glad you’re working on things like that.

And I do know people who are going to get excited about the disabled, site-wide, some layout stuff. So, yeah. You do some great work there as well. And people are waiting for it as well. Yeah.

So, okay, dear listeners. Now, we have to say goodbye to this year and wishing you not only happy Thanksgiving, but also happy holidays for those who celebrate it. And before we end the show, as always, the show notes will be published on the GutenbergTimes.com/podcast. This is episode 93, and if you have questions, suggestions, or news for the next one, in 2024, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. And Isabel, it’s not the first time that you’re on the show, but maybe we have a few new listeners. Where can you be reached when people want to reach out to you?

Isabel Brison: Oh, I am on GitHub as Tell the Machines. I am on WordPress Slack as Tell the Machines, also.

Birgit Pauli-Haack: Yeah. Good.

Isabel Brison: I’m not very inventive. That’s my username pretty much across all the WordPress sphere. Feel free to ping me, ask me questions and … Yeah, I’m around.

Birgit Pauli-Haack: Well, thank you so much and all the good wishes for the last month of the year. Also, to you, to Australia. You have summer now?

Isabel Brison: Yeah.

Birgit Pauli-Haack: We are coming into the winter, and it’s my first winter in Munich. So, I might turn into a hibernation and go … like Mama Bear always goes into hibernation when it’s too cold. That sounds like me. So, I sleep longer.

Isabel Brison: That’s great.

Birgit Pauli-Haack: I go earlier to bed.

Isabel Brison: Sounds like it’s going to be chilly. Yeah, it’s going to be warm. Well, Sydney’s pretty warm. So, expecting a fairly hot summer here.

Birgit Pauli-Haack: Yeah. All right. Well, I wish you all a good New Year and see you all in January. 

Isabel Brison: Happy holidays for everyone.

Birgit Pauli-Haack: Happy holidays. Bye bye.

Isabel Brison: Bye.

Leave a Reply

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