In episode 131 of the Gutenberg Changelog, Birgit Pauli-Haack welcomes Isabel Brison to discuss the latest developments in Gutenberg plugin releases 23.1, 23.2, and 23.3, as well as progress leading up to WordPress 7.1. The hosts highlight recent calls for testing, including collaborative editing\u2014previously delayed from 7.0 due to stability concerns\u2014and the new media editor modal for the image block.<\/p>\n
Isabel Brison shares insights into the new responsive global block styles, allowing users to customize styles per device breakpoint, as well as updates to the layout and dimensions controls in the block editor. She encourages feedback from users as these features iterate for the upcoming WordPress 7.1 release. The episode covers stabilizations, such as the improved, more ergonomic media editor and cropper, and strides in accessibility, particularly regarding the tabs block.<\/p>\n
The hosts also discuss experiments in dashboard widgets, content type management, and empowering plugin developers with new admin UI components. Both stress the importance of community feedback and testing, given the ambitious new features arriving soon. The episode wraps with practical notes on documentation improvements, React 19 integration, and a reminder of the short summer break ahead.<\/p>\n
Show Notes<\/a> \/ Transcript<\/a><\/p>\n Show Notes<\/strong><\/p>\n Stay in Touch<\/p>\n Transcript<\/strong><\/p>\n Birgit Pauli-Haack:<\/em> So welcome to our 131st episode of the Gutenberg Changelog. We will talk about Gutenberg plugin releases 23.1, 23.2 and 23.3. There are calls for testing out for WordPress 7.1 and we have more. I\u2019m 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. Today, Isabel Brison joins me from Sydney again. Isabel is a longtime core contributor and JavaScript developer on the Gutenberg Project. Welcome back to the show, Isabel. Thank you for joining me. How are you?<\/p>\n Isabel Brison<\/em>: I\u2019ll be good. Thanks for having me. It\u2019s always a pleasure to be here.<\/p>\n Birgit Pauli-Haack: Well, I\u2019m so glad you\u2019re here because you and your team have worked on some of the most exciting features that coming to Gutenberg. People have been waiting for quite a long time. So we will dive in when we get to the updates. How is Sydney?<\/p>\n Isabel Brison: <\/em>It\u2019s winter, cold, rainy, you know, the usual.<\/p>\n Birgit Pauli-Haack: <\/em>The usual? Yeah. How is the technology? I know you\u2019re going to meetups there. Are these WordPress meetups or are these other technology meetups?<\/p>\n Isabel Brison: <\/em>I go to a variety of tech meetups. There\u2019s not a huge amount, so I\u2019ll go say to JavaScript meetup and there\u2019s a good technology leaders one too. I enjoy going to the Python meetup even though I don\u2019t work with Python. It\u2019s just a lovely community and they have some interesting talks. So it\u2019s sort of whatever\u2019s on offer, I guess.<\/p>\n Birgit Pauli-Haack:<\/em> Oh, nice. Yeah, I found out in Munich to the technology community and I kind of connected with a local Claude meetup community and it was kind of interesting at the Technical university or the Design university, they switch around the places, but it was interesting. Yeah, they had some lightning talks. Yeah, like 20-minute talks and it was really cool. Yeah, I think we need to get out more.<\/p>\n Isabel Brison:<\/em> Yeah, no, I like, I like going out after work and just, you know, even if it\u2019s just to listen to some tech talks, you get a bit of air and meet new people.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, that\u2019s good. Yeah. <\/p>\n All right, so we have a few announcements. WordPress 7.0 has been released two weeks ago and we are heading big steps towards 7.1. Beta 1 is scheduled for July 15th. That\u2019s kind of a little bit of ahh. It\u2019s only six weeks away.<\/p>\n Isabel Brison: <\/em>Yeah. So we get going not long time at all.<\/p>\n Birgit Pauli-Haack: <\/em>And contributors have been working on the next major version already. So the official roadmap planning post is in the works. The team is in the final steps to assemble the release squad and we do well from the Gutenberg plugin releases we get a pretty good idea what might come through also from what didn\u2019t make it into 7.0 as well. So we will. But it\u2019s the web, right? Web is translated for me in the Japanese kind of design thing. Yeah, it\u2019s like wabi sabi. Nothing is finished, nothing is last, and nothing is perfect. So we always get work to do and it\u2019s always getting better. Yeah.<\/p>\n Isabel Brison: <\/em>Yep. It\u2019s a work in progress.<\/p>\n Birgit Pauli-Haack: <\/em>It\u2019s a work in progress. <\/p>\n So there are two calls for testing out now. One is announcing the collaborative editing outreach effort for 7.1. Many of you dear listeners remember, okay, collaborative editing, real time collaborative editing was pulled from the 7.0 because it wasn\u2019t stable enough for all the hosting environments that are out there. And there was this call for testing out for hosting and now there\u2019s another one for outreach effort to make sure that everything is kind of caught for 7.1. <\/p>\n And Anne McCarthy just published it on the Make Core blog so you can join it anytime. There\u2019s a separate channel Collaborative Editing Outreach that you can. It\u2019s kind of modeled after the full site editing outreach program that ran for two or three years. I hope this doesn\u2019t run for two or three years before it\u2019s released, but it definitely there are more people kind of discussing it and how it all supposed to work. Amy Kamala, who was the Release Coordinator for 7.0 and Justin Tadlock, who is a developer advocate at Automattic and Theme Team Rep are helping Anne to coordinate those calls for testing. And also some of the teams at Automattic who work with Enterprise level are also there. So yeah, it\u2019s a bigger discussion on how collaborative editing works on all the levels.<\/p>\n Isabel Brison: <\/em>Yeah, it\u2019s a pretty big and complex piece of work.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah, join the channel and dive right in if that\u2019s a feature that you are excited about. I\u2019m excited about it. But I also only have two or three people that handle my editing stuff. So I don\u2019t have 10 or 15 editors in my post zone. <\/p>\n Another call for testing is about the media editor Modal that has been added to the image block. Ramon Dodd published a call for testing about two weeks ago about the new modal for the image cropper. It\u2019s kind of the bigger image cropping in the block editor, so you don\u2019t have to. It\u2019s a much easier way to get your images in line, but you can also rotate the images and resize them. And it has been merged with the Gutenberg plugin. It also, with 23.3, is out of experimentation. So anybody who has the Gutenberg plugin installed can be testers. And Ramon has some great details on how to test things and what to look for and how to share the feedback. It also has a little paragraph there on what\u2019s out of scope. So for this version, we of course share all the links in the show. Notes. Isabel, you\u2019re part of that project. What excites you about it?<\/p>\n Isabel Brison: <\/em>I haven\u2019t actually, actually worked on it. Well, not I, I, I helped a little, a little bit at the very beginning when we were discussing sort of choice of libraries and whether to build our own or use a third party. And a bit with the initial testing, but it was mostly Ramon and Andrew\u2019s work. This latter part, the bit that\u2019s now in Gutenberg, in fact, it was all their work. And I think it\u2019s super exciting because replacing the old, the old Cropper, I. I never liked it. I have to be perfectly honest.<\/p>\n Birgit Pauli-Haack: <\/em>I hate the old Cropper.<\/p>\n Isabel Brison: <\/em>I never could figure out how to use it. It was not ergonomic at all. And this one is such a better experience. Aside from allowing us to do all the stuff that the old Cropper, the in Editor Cropper is what I\u2019m talking about. The one that you can access from the Image block toolbar. It\u2019s also on the site Logo block. So you can now access it from both those blocks and the new one, in addition to what the old one did, also allows you to do free cropping and free rotating. So if you want to rotate your image 3 degrees and if you want to crop it to whatever weird aspect ratio you like, you can do that, which you couldn\u2019t on the old one. Yeah, and it\u2019s. It\u2019s just a much nicer experience. I believe it\u2019s also more accessible than the old one in terms of the keyboard accessibility of it. It\u2019s. It\u2019s better too, so. All advantages. Yeah, they did a great job on it.<\/p>\n Birgit Pauli-Haack: <\/em>I used it just for a little bit and I was so amazed how smooth it was. Yeah, I kind of. It was also much more intuitive. I never knew what to do with the Cropper when I was pinging it previously and said, so how do I do this now? Every. I had to think every time. And this one is very, very intuitive and very smooth also to use it and to see it. So I\u2019m really happy about that. I\u2019m hoping it makes it into 7.1. Yeah, so we have that.<\/p>\n Isabel Brison: <\/em>Yeah, it\u2019s, it\u2019s on track, I don\u2019t think. I mean, barring any major natural disaster, I don\u2019t think that there\u2019s any reason for that not to make 7.1. It\u2019s a great piece of work. It\u2019s really stable and now that it\u2019s not behind the experiment flag anymore, real users are using it. I\u2019m sure we\u2019re going to get tons of feedback if there\u2019s anything that\u2019s not 100% perfect and we still have time to iterate on it until beta one.<\/p>\n Birgit Pauli-Haack: <\/em>I really appreciate that Roman and Andrew went to the research portion and kind of looked at how other graphic programs actually are doing things and tried to get some of the experiences also into the blocked. So okay, yeah, so two calls for testing for those who want to dive in. It\u2019s a very good way to contribute to WordPress because it\u2019s so close to what you\u2019re doing with WordPress. And not only developers but also content creators can help testers even better and those who work at agencies or work with clients at agencies to kind of see how that all works. Which brings us to what\u2019s released. I mentioned it. <\/p>\n WordPress 7.0 Armstrong was released. We talked about it in previous episodes on this changelog with various people from the agency view, from the designer view, from the content creators views. We will share in the show notes in case you need to catch up. The Field Guide the link to the official field guide for WordPress 7.0 as well as to the source of truth on Gutenberg Times that has all the user facing stuff in there. Those are the best information on 7.0. I have not seen in the last two weeks any major boo boos that came in. Yeah, it was such a great testing cycle with a delay of six weeks. <\/p>\n Most of the bugs were actually caught quite early or in the loliso, I don\u2019t think. I\u2019m not sure when there will be a point release which normally happens within a few weeks of the major release, but I have not seen any planning for that. But it could be end of June after WorldCap Europe. <\/p>\n So let\u2019s dive into the Gutenberg releases. We start with Gutenberg 23.1. Oh, one question, Isabel, do you have a favorite feature that came into WordPress 7.0?<\/p>\n Isabel Brison: <\/em>Oh, I don\u2019t know. There\u2019s a bunch of interesting features and I worked on some of them. Of course I have sort of my personal favorites of the ones that I worked on of which one that is. It was very, very subtle or sort of low profile. We didn\u2019t talk about it much, but I worked on a little handy addition to the grid block or the grid layout type, I should say. That allows us to configure a responsive number of columns. So by setting column count and a minimum width you can say I want my block to always have at maximum three columns but on smaller screens it can go down to two and even one. So that\u2019s something we didn\u2019t have before and I\u2019m quite happy with it. I think it\u2019s a good improvement. But compared to. Oh, there was. There was loads of stuff. The pattern editing work I think is going to be really handy. And what else? There was the notes feature.<\/p>\n Birgit Pauli-Haack:<\/em> No, I was in 6.9 already. Yeah.<\/p>\n Isabel Brison:<\/em> Oh yeah. No, there was something about what? Oh God, I\u2019m confusing my releases.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, yeah, they\u2019re kind of. They melt together once it\u2019s released. They melt all together. It\u2019s kind of. Yeah. Was it there or there? Yeah, sometimes. <\/p>\n All right, let\u2019s dive into Gutenberg 23.1. It was released on May 7, had 212 closed PRs by 49 contributors. So we are really wrapping up the releases or the work on Gutenberg and the block editor. It\u2019s now not only the block editor, it\u2019s also the site editor. It\u2019s the data views, it\u2019s the. The design system, those all. So the Gutenberg repo has kind of exploded in other areas for the WordPress ecosystem. So. But yeah, the first one on the list and it\u2019s. It\u2019s really interesting how these change logs are actually automated and coming together is the upload media and it enabling concurrent sideload uploads. That\u2019s an interesting thing because it\u2019s so performance issue to have multiple streams on upload on images so you don\u2019t have to wait so long that the image shows up in your block canvas. And that\u2019s a really good improvement for that.<\/p>\n Isabel Brison: <\/em>Yeah, yeah. I\u2019d imagine when uploading, when bulk uploading particularly.<\/p>\n Birgit Pauli-Haack: <\/em>So when you copy paste content from another source it has this also a feature that you can download and upload the images that you connect there. And that also happens in this module stream uploads thing. So it\u2019s really cool. You only know this because it\u2019s faster but other than that there\u2019s no disruption of your work or any of that.<\/p>\n Isabel Brison: <\/em>Yeah, there\u2019s a lot of good work. This was also the client side. This is part, I believe, of the client side media processing work that did not make 7.0 but is now being aimed at 7.1. That\u2019s mostly Adam Silverstein\u2019s been working on that. I haven\u2019t kept a close eye on it, but it looks like, you know, very useful work and it\u2019ll be good once we manage to get it in for performance.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah, Adam Silverstein has worked on these image handling features quite a bit for 6.9 as well. <\/p>\n So yeah, there is an enhancement that I have flagged here, but I\u2019m not sure how useful that is. It\u2019s for the WordPress UI overlays and a global preview styles on the storybook. So the WordPress UI is the next level of components for WordPress.<\/p>\n Isabel Brison: <\/em>It\u2019s sort of the successor of the components package.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah. And at the moment both are used, but I have seen now efforts to migrate, merge things, I don\u2019t know how you call it, but to get it kind of in one thing. But the overlays, the preview styles is how you can show the preview in the storybook so you have a better inkling how it\u2019s going to look later on.<\/p>\n Isabel Brison: <\/em>Yeah, that should be good.<\/p>\n Birgit Pauli-Haack: <\/em>And then there are tons of changes for the components, the admin ui, the UI components, dialogues. This is mostly for developers that are working with WordPress and creating their own either building WordPress or creating plugins for WordPress to have a unified design system, unified component system that they don\u2019t have to kind of come up with their own interfaces. Those decisions are already made and you can kind of build on top of things before any of that, even the components, every plugin had to design their own interfaces and now this is really cool.<\/p>\n Isabel Brison: <\/em>Yeah, it\u2019s good to have a sort of a system that you can use when you\u2019re extending and you need to build a new screen or something for your plugin, you can just use these components and everything looks integrated with WordPress.<\/p>\n Birgit Pauli-Haack: <\/em>And it\u2019s also good for the users because they don\u2019t have to think about how do I use this tool now? Or how, how is. How do I filter now on this screen? Because it\u2019s all a unified system and it\u2019s all built out and stable. So the next thing is on the notes getting a few updates. So right now it\u2019s in 23.1. It\u2019s mostly refactors on the positions and the floating board. But we will see later in, in the other releases that there are some nice features coming in for the Blocked libraries. We have updates to the tabs block. I\u2019m really hoping that it comes into 7.1. It\u2019s still behind an experiment flag, but now it can handle duplicate tabs, meaning duplicate handles on the tabs. And it follows now WCAG tabs pattern for accessibility in the renaming of the blocks. So which is a. It\u2019s a major step towards accessibility and acceptance for that. I\u2019m really waiting for the tabs to come into Gutenberg or to.<\/p>\n Isabel Brison: <\/em>Mostly I think the renaming was about as I understand it, so that the blocks have names that match the accessibility standards or how these things are known as. There\u2019s a WCAG pattern it\u2019s linked to in the PR, and those sort of example patterns that the WCAG website has for people to know how to use ARIA attributes correctly, which is a whole science. And the idea is to have our tabs blocks match the names of that pattern so that it feels more standard and it\u2019ll be more familiar to people who might have implemented tabs in other places.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah. And those are the standards also where screen readers kind of tap into and people are. That use screen readers kind of have a common pattern for that. Yes. So that definitely elevates the tabs block in its accessibility. Yeah.<\/p>\n Isabel Brison: <\/em>So it\u2019s going to be pretty useful block once it\u2019s stabilized. So I hope it is.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah. Yeah. I know that quite a few block collections have tabs right from the beginning in the last eight years. And they\u2019re not going to go away because the first iteration of any of the core blocks will not be as feature rich as any of the block collections that have been developed for the last six or seven years. Yeah. The next one is tapping into the image cropper we talked about. So you can. And it was tapping into the keyboard actions with drag handles on the canvas. So you can use your mouse to do some of the actions that you want to do with the image cropper or the image tool. Yeah, if you say Image Cropper, it kind of reduces it to cropping, but yeah, it\u2019s also the handling to rotate<\/p>\n Isabel Brison: <\/em>And all that too.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah, yeah. There\u2019s a new API for the WordPress grid package, but that\u2019s a different grid that you are working on.<\/p>\n Isabel Brison: <\/em>Yeah, that\u2019s not the layout. The block layout grid. This is something else. This is a grid that you can use for dashboard UI.<\/p>\n Birgit Pauli-Haack:<\/em> Exactly.<\/p>\n Isabel Brison:<\/em> Sort of admin stuff.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah. That\u2019s the new API that powers the new experiments that in Gutenberg. That is the dashboard widgets. We kind of talked about it a little later. You as a plugin developer or extender of WordPress, you can use them now as well for any of your dashboards. If you are having a plugin that has some data vising kind of, you can put them into these grid package and display them on your plugin settings pages. The guidelines is also a new API and it has now a public API method and the REST API route to it. There have been iterations after 23.1, so I think that that would be really helpful to look at later. <\/p>\n The guidelines are actually a whole set of content types that are for AIs. Pretty much when your agents come to the WordPress site, you can tell them what to do with things. What\u2019s the purpose of the site? The editing guidelines? Yeah, how, how you want AIs to behave on your site if you let them in. And it\u2019s really important when you have other agents come in that you don\u2019t control. Yeah, that sounds scary. <\/p>\n But if you as a site owner connect your Claude to your website, you can have in the guidelines all the things that you want Claude to know about your site. So it\u2019s. You don\u2019t have to put it all in a prompt and it kind of finds all the things and it\u2019s also your memory. So if you use an agent to do your SEO, to do your. Some of the content updates like headlines or tags, your policies on how to do tags and categories, that\u2019s all things that you can solidify in your documentation in the guidelines for your AI. And it will remember that. But it\u2019s also interesting to see the discussions about it. I had a short discussion with Grzegorz, who was a former co-host here on the Changelog, a few, I would say a few hundred episodes before, but it wasn\u2019t that much. But he is now part of that team who thinks about AI and memory and all that. And it was really interesting to hear because if you are in an agency, you work on multiple different sites, but you have one Claude, so you don\u2019t want things to bleed over from one site to the next. And these guidelines help you kind of keep track of everything. So it\u2019s an interesting problem space that came out with AI.<\/p>\n Isabel Brison:<\/em> It\u2019s like providing the correct context and the correct amount of context so that the AI can be maximally productive on your website, whatever you want to do with it.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, right. Yeah, yeah. Most people are really not all that into. Site owners are not so into AI, but it helps a few things quite nicely. I find it with SEO and with yeah, accessibility and all that. It\u2019s really helpful to have a double check there. Yeah. All right, what\u2019s next in 23.1? Do we have something? <\/p>\n Oh yeah, there\u2019s these custom taxonomies experiment in 23.1 with the custom post types and taxonomy management that started out as out of. I don\u2019t know how that came about, but it probably is one of the radical speed month project as well that people say okay, we probably need to have content management when the APIs were in WordPress in 3.1. But there is no interface there and there were always plugins there to do this, be it custom UI, custom post UI or ACF or so. But there\u2019s no interface for. And that\u2019s where this experiment comes in to kind of push the envelope on that a bit. Have the REST controllers in there, have the interface in there. But it definitely is not the last word spoken there yet because that is a field where there have been a lot of extensions in the universe or in the WordPress ecosystem that might not fit in where this is going. So it\u2019s just a. It\u2019s a prototype kind of experimental way to do that. But check it out. You just have to enable the experiment in the Gutenberg plugin and then you can kind of try it out and work with it. It uses the common APIs. <\/p>\n The other experiment is the dashboard. We talked a little bit about it because that\u2019s the grid package was created for that. The dashboard to have administ page routes and sidebar menus as a shell to add additional grids on the dashboard. I\u2019m interested to see. I haven\u2019t played with it yet but I want to see if I can. So what are the dashboards? The dashboard right now is just a. The quick edit and the site health and the news that\u2019s on your dashboard right now and a few other things and plugin kind of tap into that as well. But I have never have not seen yet and I\u2019m still thinking about it to. Maybe Claude can help me with that. Having a quick edit that\u2019s a block editor actually. So when you log in into your WordPress site you don\u2019t want to kind of just do all the other admin stuff. You just want to create a new post. So why not have it on the dashboard and create a blog post right there from the quick edit. Quick Edit only gives you text based things but not block editor.<\/p>\n Isabel Brison:<\/em> So a block based quick edit, do you reckon all the blocks. I reckon it would need to be A very simplified version of the block editor.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah. Yeah.<\/p>\n Isabel Brison:<\/em> Maybe images, paragraphs, but yeah, that would be cool.<\/p>\n Birgit Pauli-Haack<\/em>: Yeah, yeah. Lists. Yeah. Like an outliner kind of. Yeah. Very fast kind of. Yeah. Maybe come back to the white space, but kind of instead of having a classic editor, just build blocks with it. Yeah. So kind of a distraction free, quick edit, full set, toolbar on top kind of thing. I don\u2019t know. When I\u2019m bored, I\u2019m gonna star B. Prototype it. Prototype it. Yeah. And get it in. Yeah. That. That was one of the things that a lot of writers said. I don\u2019t want to deal with all the stuff I\u2019m getting so distracted. Yeah. There\u2019s announcements and all that. So let me just start my blog post. But anyway, and then there is a list of Media editor modal call for testing. We talked about it. There\u2019s a whole in 23.1. There\u2019s a whole list of bigger and smaller PRs that went in. I think the call for testing gives you all the ins and outs of it that I think was. Was it. Did you find anything for 23.1 that you wanted to talk about further?<\/p>\n Isabel Brison:<\/em> Not. Not really. Apart from the things that you\u2019ve already highlighted. I just thought. I already mentioned that the media editor is also on the site logo block. So you can test it on both blocks and that\u2019s it.<\/p>\n Birgit Pauli-Haack:<\/em> So right into Gutenberg. 23.2 was released on May 21st and also with 204 PRs by 50 contributors and there were four first timers there. Congratulations. You got your first contribution to WordPress core. Yeah. And you got your badge. Well, you got your badge when 7.1 is released, I guess the first feature that is listed is the responsive global block styles with states. This is so cool. Yeah. What does it say? Can you walk us through it?<\/p>\n Isabel Brison:<\/em> Yeah. So this was the first part of the work towards enabling responsive styles for blocks. And it\u2019s with States because it leverages a style states API that was already built. So Maggie Cabrera was who did that initial work for the States API, and her part was just leveraging it for adding the ability to style pseudo states for very few blocks have pseudo states. Well, this might be extended, but it won\u2019t be super extended because not all blocks need to have pseudo by pseudo states, I mean hover focus and things like that. So usually only interactive blocks would need those. <\/p>\n And so States came about to cater to that pseudo element scenario. But it was always something that could potentially be extended further. And one of the use cases that had been thought out when this initial idea of having the states API was thought it was using it to be able to create responsive styles for blocks was one of the possibilities there. And I had been eyeballing all those issues that have been sitting in the Gutenberg repo for years about creating some mechanism that allows us to define responsive styles. And I finally had the opportunity to pick them up. And having that state\u2019s work already partially done was great because, you know, sometimes it\u2019s starting something is the hard part. And there were endless decisions in the repo about how should we build this and let\u2019s do this and let\u2019s do that and let\u2019s not do that. And it\u2019s like we should take this into account. You know, how you can talk and talk and talk and then it never actually starts because it seems like the problem is too big and too complicated. And the more that\u2019s added to the discussion, the bigger and the more complicated it gets. <\/p>\n But there was this little stepping stone. This states API had already been built. And so I thought, well, it\u2019s already in there for pseudo states, let\u2019s try building responsive. So we call them viewport states. I\u2019ve been working on this with my teammate Dan Richards. We\u2019ve both started working on this and thought, okay, let\u2019s do as sort of a baseline for global styles, but then as a stretch goal, let\u2019s try and do it for actual block instance too. So we managed to do both in the end, but for 23.2, it was only the global block styles that was ready. And this means when you go into the site editor and into the style section, where you have global styles, then you go into blocks. This only works for blocks. It doesn\u2019t work for top level global styles yet. We\u2019re not quite sure. Well, we\u2019re not quite sure if there\u2019s a need to add this to top level stars yet. It\u2019s still something that\u2019s being thought about because for a lot of them, so a lot of really sort of global basic elements like typography, you know, font sizes. Okay, we already have ways of defining them responsively even without using breakpoints. So we are using the clamp function. You can define a maximum and a minimum and you can pretty much, you know, manipulate it so that you get your different font sizes on mobile and tablet and desktop. So there is to some extent you already have that responsive functionality there. So that\u2019s something that might be looked at later on for enabling actual breakpoints for those global styles. But for now it only applies to blocks so for each block you can go into the block, into the block\u2019s global styles and you can pick a state. There\u2019s a new little states drop down at the top and so by default you\u2019ll be styling the default state that\u2019s you know, no media query. And then you have a tablet and a mobile state and the tablet state is only, so it\u2019s, it\u2019s only from you know, the top level. Like what\u2019s your maximum Breakpoint to the minimum, which is the maximum for mobile. So the tablet styles will only apply to tablet to that breakpoint and then the mobile styles will only apply to their own breakpoint. And that\u2019s. Yeah, essentially that\u2019s it. <\/p>\n You can do anything color typography and spacing wise. So for most blocks you know, you have the typography, you have the colors, you have dimensions like not for most blocks you don\u2019t have dimensions, you have, you know, margin, padding, block gap if the block has layout and you can define per break point what you want those values to be. And there are certain features that exist in global styles that do not yet work with, with that responsive logic and those. So when you enter that breakpoint you know, you get, you choose the tablet viewport and you\u2019ll see that some of the tools might be hidden. So for instance, Duotone is one. You can\u2019t set Duotone per breakpoint yet. This is something that will be worked on in the future but it feels like a bit like I\u2019m not sure how many people will need to change the colors per break point. That\u2019s not usually responsive styles are more about spacing dimensions, that sort of thing. So we focused more on those that felt like these are the ones that are really going to be used by most people and the more edge Casey ones if they don\u2019t work out of the box, we sort of. Okay that, you know, that\u2019s a problem for later. We\u2019ll, we\u2019ll figure it out later. And Duotone is one of those awesome.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah. Well a lot of people have been waiting for that a long time. So glad you, you finally started taking it.<\/p>\n Isabel Brison:<\/em> I hope it\u2019s useful. I just hope that folks can take this and like ok, okay, I can finally build the thing and yeah, and it works. And please, please, to anyone listening and wanting to try this out, if there\u2019s anything that\u2019s not working, if there\u2019s anything you don\u2019t like or you think, no, no, this should be different because it doesn\u2019t work. Just please give us feedback. We need feedback because this is in the plugin now it\u2019s aimed to go into 7.1. We still have those six weeks until beta one. Those six weeks will be iterating on the feature. The earlier we get feedback the better so that we know if there\u2019s anything that really isn\u2019t working for anyone then we can change it.<\/p>\n Birgit Pauli-Haack: Yeah. Yeah. Awesome. So that\u2019s a 23.2. There\u2019s also a WordPress components called WordPress Theme and that\u2019s actually the theme for the admin section. We have definitely confusion things going on because we use the same term for multiple things that are totally different and have nothing to do with each other except they are now motion design tokens for duration and easing in the WordPress theme component. So if you want to use those for your admin pages and plugins, go have at it. I am really because it kind of gets you a little bit more into a more interactive way to build websites and I think we really like those or I do. Yeah. Although I\u2019m not a motion or animation kind of person. But yeah, I like when it\u2019s nice.<\/p>\n Isabel Brison:<\/em> Yeah. Little bits of discreet smooth animation here and there can really make a web experience.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah. It\u2019s kind of a quality of life kind of thing. Yeah. Yeah. What else is in the 23? Yeah, the content types. It was an iteration on. We talked about it on the content types experiments with various improvements and post type and taxonomy management, duplicate view, quick edit actions. A ton of PRs have been added to that so it definitely is maturing and you can with 23.2 also the media editor modal had matured and there is now. I also will share in the show notes a link to an overview issue on the Dashboard experiment so you can go back and read up about it, what it\u2019s all about. Because there\u2019s a whole lot of work still being done with that. <\/p>\n There\u2019s also an experiment on the classic block migration notice. I\u2019m just pointing that out because you might see it that the classic block might get deprecated or might not be available in certain situations.<\/p>\n Isabel Brison:<\/em> Yeah. I believe the plan is to deprecate it and remove it at some point, but it\u2019s a whole process because I guess lots of folks are using it. So it needs to be slow, give people time to adjust, choose alternatives.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, well it has been in Gutenberg for eight years and all that and actually what I found is that some of the AI tools actually create blocks that need to be. That are looking like classic blocks and need to be migrated to blocks before they can be in the block editor canvas. So, yeah, those things also need to be kind of tested in that space.<\/p>\n Isabel Brison: <\/em>Yeah, that\u2019s a good point. With AI, with AI tools increasingly being used to build websites and create and. Or move content across from other places, it. You don\u2019t want AI sort of adding the classic block to its knowledge base and suddenly deciding that the easiest way to do anything is to just dump all the content into a classic block,<\/p>\n Birgit Pauli-Haack:<\/em> Which what they\u2019re doing right now. Yeah.<\/p>\n Isabel Brison:<\/em> So this is a good time to deprecate it so that. Okay, let\u2019s. Let\u2019s ensure that AI works properly, that it\u2019s easier for AI tools to work properly and do things as we expect them to.<\/p>\n Birgit Pauli-Haack:<\/em> It hasn\u2019t been merged yet, but there is also a documentation issue. It\u2019s a big. It was a big undertaking that Juan Margarito took on, was that it was found that an AI can\u2019t really find documentation on the block markup for each of the core blocks. And that was a documentation gap that was kind of found that none of the block library blocks had a readme so it wouldn\u2019t. So what Guan Ma did, he created automatically from the block JSON files a readme for each block on documentation site and then created some tokens where you can have on the readme additional manual content that\u2019s put in there and then have a parser go through that and put it into the block editor handbook. And that is a really. So it talks about the supports, it talks about the, the, the global styles design tool supports about the block markup and also the connection with other blocks. It\u2019s a comprehensive documentation about each block and that\u2019s in the block handbook. It will be merged. We had a hardware hangout on it. We had a proposal on MakeBlog, a core block about that. And I think it\u2019s finally going to be merged within I hope a week, but maybe days.<\/p>\n Isabel Brison:<\/em> Oh, cool.<\/p>\n Birgit Pauli-Haack: <\/em>That\u2019ll be super useful. So it will be in the, in the block edit handbook. It has an additional 80 pages, of course. Yeah. But they\u2019re all connected and categorized by blocks. And so now block developers and there were some comments from the community where people said, well, I wish I had that when I was starting out learning about block development and now it\u2019s finally coming. But it was a huge undertaking because it kind of created a ton of new code and that all needs to be reviewed. And it was so. But there were a lot of people kind of working on that. Guided or spearheaded by Guan Ma but it\u2019s now coming and it\u2019s really cool. I\u2019m so happy that it made it.<\/p>\n Isabel Brison:<\/em> I mean, you can never have too much documentation, but developers are crap at writing it. So, you know, nowadays we have tools to assist us in the creation of the documentation and we should leverage them.<\/p>\n Birgit Pauli-Haack: <\/em>Yeah. And the hybrid version, automatic documentation plus a way to have also manual content in that is actually a good combination because for some of the blocks, Joe Dawson from the Accessibility team has said, okay, maybe we also want to have some documentation about the accessibility of blocks. And anybody who has comments on that can add it to the, the readme file of that particular block to elaborate on that. And that is outside of any automation. You can just add it to the page. And it was really cool to see that process working. I post a link to the proposal into the show notes just as a side note here. <\/p>\n And now we\u2019re coming to 23.3. That was just released a day ago June 3rd with 270 closed PRs and 57 contributors. So we are ramping up to 7.1 kind of thing. And the first item on that is really cool that you can now that the notes section. And I think it was Adam Silverstein as well who worked on that.<\/p>\n Isabel Brison:<\/em> Oh yeah, the multiple notes per block. Yeah. Oh, that\u2019s cool. That\u2019s really useful.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, so you can have multiple threads or comments per block. That\u2019s also helpful when you work with AI that comes in and kind of reviews some of your post and posts notes in there. So yeah, it was really helpful. And it\u2019s also. And he found it to be necessary to have that. So what\u2019s missing in the notes in comparison to Google Docs is that you can highlight a section and then comment on that section. So yeah, like, okay, you probably can delete this half sentence or something like that. And that you couldn\u2019t do that up until now. And with the multi threads on the notes for a block you can highlight a section because if the paragraph is, I don\u2019t know, 10 lines or something like that, you might have multiple comments on the, on that block. And now you can have that. So it\u2019s really cool.<\/p>\n Isabel Brison:<\/em> Yeah. So the note is attached to a part of a block and not to the block itself.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, yeah. The next sections are a continuation on your quest for responsive styles.<\/p>\n Isabel Brison:<\/em> Yeah, that\u2019s part two, part two of the work which is enabling responsive styles for block instances. So again this, this was a part. So Maggie Cabrera had worked on the sudo style states for global styles and she had an open PR to add them to block instances. And Dan and I basically hijacked her PR with her approval of course. We asked Maggie first, can we just take this work that you. She was off doing something else. She wasn\u2019t actively working on the PR at the time. We thought ah, we could just take that over and finish it and then build the responsive styles on top of it. So we did and that obviously there was work already pre-existing so it sort of made it easier to build it step by step on top of it. And now we have in 23.3 the ability to add responsive styles to. So any block, open a post, pick a block, open the inspector controls and then at the top where you have the block name you have this little menu which has a drop down that has the states. <\/p>\n So again just like with global styles we have tablet and mobile. The default is what you get by default what you already had. And then you have a tablet breakpoint and a mobile breakpoint. And for those again as in global styles there were a few things that didn\u2019t really work out of the box, a few of the controls. So we decided to hide everything that doesn\u2019t work. So for now what\u2019s enabled is only the controls that you can actually create responsive styles with. Those are pretty much all the block supports, the standard block supports like color typography, dimensions, block gap. Now layout is also supported and we aside a sort of side effect of that was that we ended up moving the layout panel into the styles tab. And well that was sort of. I\u2019d been wanting to do that for ages I have to say because to me it didn\u2019t make any sense at all that layout was in at the same time. Settings tab and Dimensions, which has controls that are intimately related to layout such as block gap was in the styles tab. And so I felt the. The only thing that makes sense is to have them side by side. If it\u2019s not the same panel, which I still think we could maybe make it the same panel. But that\u2019s another different conversation. But at least they\u2019re side by side. So now layout is in the styles panel. That\u2019s the reason why it\u2019s in the styles panel. So when we have a responsive state enabled we\u2019re only showing the styles panel in the inspector and only the controls that work, which is most of them. There\u2019s a couple of things that we had to hide again, you know, duotonethings like that. <\/p>\n And for block instances there are some blocks have custom controls and some of those custom controls should probably become Block supports. Some are like aspect ratio is a block support, but there\u2019s only one block using it and there\u2019s a couple of blocks that have their own custom implementation of aspect ratio. This is something that should change. I have an open PR to try and enable aspect ratio to work responsively because I feel that that\u2019s one of the important ones that people will want to change aspect ratios for different breakpoints. So that\u2019s in progress and what our plan is basically to try to get as much as we can working until 7.1.<\/p>\n Birgit Pauli-Haack: <\/em>Awesome. So when I want to start testing this, I\u2019m going to add a paragraph to my block canvas and then I go to the block inspector and say, okay, this paragraph, I want a different background for a different viewport. So on the mobile I want it green and on tablet I want it yellow and on desktop I want it gray.<\/p>\n Isabel Brison:<\/em> Yep, you can do that.<\/p>\n Birgit Pauli-Haack: <\/em>Okay. Yeah, so that\u2019s how I will change it.<\/p>\n Isabel Brison:<\/em> You go into. So you give the default. The desktop is the default. I guess we\u2019re not mobile. We were never mobile first really. I mean Gutenberg has from the beginning being a dev stop first experience. And that\u2019s how it\u2019s sort of turned out to be. So you have default desktop and then you can go into the tablet state, you can select the tablet state and then whatever you add to the visible controls in the block inspector in that state is exclusive to that state. And you can go into the mobile and choose a different color for that and save everything and then you can go and do the good old resizing. Well, in the block editor we leveraging the responsive preview, the sort of device specific preview to show you a preview of what the styles are as you\u2019re editing them. And then once you go into the front end, you can resize your window to your heart\u2019s content and see all the changes happening.<\/p>\n Birgit Pauli-Haack:<\/em> All right, all right. So that is really cool and I\u2019m looking forward to kind of testing it out and trying it out and have opinions.<\/p>\n Isabel Brison:<\/em> Yeah, yeah, no, lots of opinions, I\u2019m sure. And one of the things that I feel like we haven\u2019t got 100% right is the previewing because you switch like you go enable mobile state for this block and it switches you to the mobile preview. But then you can select another block while still being in the mobile preview and then you\u2019re not in the mobile state for that blocking. So I feel like this is something that we\u2019re working on. We need to improve that experience and feedback. Again, very welcome. What are your opinions on this and how you think it would be the most intuitive to work with.<\/p>\n Birgit Pauli-Haack:<\/em> Well, awesome. Yeah. I\u2019m thinking maybe we should actually have a demo hallway hangout about that somewhere. Let me think about that. Well, I have a time issue because I\u2019m going on vacation.<\/p>\n Isabel Brison:<\/em> Okay. Yeah.<\/p>\n Birgit Pauli-Haack:<\/em> Coming back to the beginning of July, but yeah, definitely. Maybe find somebody to do a demo video or something like that. Well, the demos are all on the PR, so definitely check those out because they\u2019re the best way to learn how to use that and how what works or what doesn\u2019t work. Yeah. All right. What\u2019s else in 23.3?<\/p>\n Isabel Brison:<\/em> There was so much. Well, the media editor was stabilized, so now it\u2019s no longer an experiment. You get it by default whether you want it or not. Again, I mean, we hope to get feedback on that. I think it\u2019s a pretty good piece of work, honestly.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, it is. Yeah. Yeah, absolutely. Yeah. Just wanted to. You said it in the. You talked about it. But if you are looking for the layout panel after 23.3 Gutenberg plugin install, it\u2019s not hidden, it\u2019s not lost. It\u2019s in the Styles tab now.<\/p>\n Isabel Brison:<\/em> Yes.<\/p>\n Birgit Pauli-Haack:<\/em> Some content creators that are not interested in this, all that, they might have a little oops, where is it? Kind of thing. It\u2019s in the other tab now. Yeah.<\/p>\n Isabel Brison:<\/em> And that is. It might be weird for blocks that still have a Settings panel. So, for blocks, what happened with the group block? For instance, the group block only had layout and position in Settings, so we moved position into styles. Because it makes sense. Position is a style. And now the group block doesn\u2019t have a Settings tab. So you open the group. I think it\u2019s much easier because you don\u2019t have clicking, clicking, clicking. Everything\u2019s there, everything\u2019s visible. Layout, position, all the other controls in the same tab for other blocks. For instance, the navigation block still has a bunch of stuff in Settings. So if you put a navigation block on the page and suddenly you\u2019re, oh, where\u2019s the layout controls gone? Okay, they\u2019re in the Styles tab. They\u2019re no longer in the Settings tab.<\/p>\n Birgit Pauli-Haack:<\/em> I just wanted to point that out. People kind of miss that part because they\u2019re so excited about the responsiveness. <\/p>\n And then there\u2019s also. Oh, there was one thing that was fixed. It was a. I would say it was a bug, but it is an enhancement that the additional CSS. If there was an error in there, you wouldn\u2019t see that when you get back into the post again, until you interact with the additional CSS field, you wouldn\u2019t see the error message. So unless you interact with that, you wouldn\u2019t see that it\u2019s actually not working. That has changed. That now has a little notification that there is something in the additional CSS that\u2019s not valid CSS for those who muck about with that. Yeah. And here it is. The PR78653 has the modal media editor, image cropper modal being the default experience for the block editor. It\u2019s out of experiments in. Another thing for 23.3 is that Gutenberg upgraded to React 19. This is important for plugin developers and those who have a very tight handle on the dependencies for their work. React 19 is now the default and there might be dragons out there. Please, please, please, yeah. Give feedback on that. Create issues what works and what doesn\u2019t work. Especially what doesn\u2019t work. So those can be fixed PR 7.1 so you don\u2019t have any surprises later on. What else? I think those were the, the big items.<\/p>\n Isabel Brison:<\/em> Yeah, I mean I\u2019ve, I\u2019ve been sort of like under, under my responsive styles rock for these past few weeks just working on that. Very, very fixated on getting this thing right.<\/p>\n Birgit Pauli-Haack: <\/em>So I have to say nothing.<\/p>\n Isabel Brison:<\/em> I mean it\u2019s definitely got a huge amount of attention to. Yeah. What else is out there?<\/p>\n Birgit Pauli-Haack:<\/em> Definitely God\u2019s work.<\/p>\n Isabel Brison:<\/em> Hopefully it\u2019s worth it.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, absolutely. Yeah, absolutely. Yeah, I think that\u2019s it. As I said, there are 270 PRs. So. Yeah. And it just has been released for a while ago.<\/p>\n Isabel Brison:<\/em> There\u2019s a lot of enhancements and bug fixes and stuff in here.<\/p>\n Birgit Pauli-Haack:<\/em> Yeah, that\u2019s it. I think we are good. So, dear listeners, you will see on the Weekend Edition and the Gutenberg Changelog will pause during my vacation. I\u2019m going on vacation next week, which is June 15th and I\u2019m coming back in beginning of July. So in time for 7.1 beta, you\u2019ll hear us again and you will read us again. <\/p>\n I\u2019m so happy, Isabel, you are here on the show to walk us through all the good things that come with Gutenberg to 7.1, especially the responsive parts. The responsive parts. I like that. Responsive parts. Thank you so much for taking the time out of your busy work schedule and be on the show and walk us through that.<\/p>\n Isabel Brison: <\/em>No worries. You always enjoy this show.<\/p>\n\n
Special guest: Isabel Brison<\/h2>\n
\n
Calls for Testing<\/h2>\n
\n
What\u2019s released<\/h2>\n
\n
Gutenberg releases <\/h3>\n
\n
\n
Announcements<\/h3>\n
Calls for Testing \u2013 WordPress 7.1<\/h3>\n
What\u2019s Released \u2013 WordPress 7.0<\/h3>\n
Gutenberg 23.1<\/h3>\n
Enhancements<\/h3>\n
New APIs<\/h3>\n
Experiments<\/h3>\n
Gutenberg 23.2<\/h3>\n
Experiments<\/h3>\n
Documentation<\/h3>\n
Gutenberg 23.3<\/h3>\n
Enhancements<\/h3>\n