In this episode, Maggie Cabrera and Birgit Pauli-Haack discuss Developer Hours, Playground, WordPress 6.6.2, Gutenberg 19.2, Data Views and Design Systems
Show Notes / Transcript
Show Notes
Special Guest: Maggie Cabrera
Announcements
Developer Hours
Developer Blog
WordPress 6.7 & 6.6.2
Community Contributions
Gutenberg 19.2
What’s discussed or in the works
Stay in Touch
Transcript
Birgit Pauli-Haack: Hello, and welcome to our 107th episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about Developer Hours, we will talk about Playground, and we will talk about Gutenberg 19.2, as well as some DataViews and design systems. 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.
It’s again a special pleasure to have Maggie Cabrera with me. She’s a theme and core contributor and also sponsored by Automatic. And you work in the community also with the themes, or have been. You’re always a good supporter for theme developers, so welcome.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Thank you so much for taking the time today. How are you?
Maggie Cabrera: I’m good, thank you. Thanks for inviting me again. And yeah, I mainly work in core, but themes are very special for me, and very dear to my heart. So, whenever there’s an opportunity to help out with the community or anything, I’m there. Yeah.
Birgit Pauli-Haack: Yeah. And I also see that there are quite a few themes coming from Automatic for the theme repository in all kinds of different shapes. So, I’m really happy that it inspires a lot of people to do very specific themes. Not this overall, everything looks the same block themes, but have some for WooCommerce, have some for a print, and have some for somebody who wants to do just public scripts, movie scripts, or something like that. It’s quite interesting what’s coming out like that.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Yeah. We’ve been working on submitting a lot of themes that the designers have been working throughout the year, and I’ve been impressed when reviewing them technically, the amount of talent that the designers have and how much they can actually express while working in the editor. And I see how both the designers and the editor have matured over the years, and it’s so lovely to see what you could do three years ago and what you can do now. It’s just so amazing, I just love it.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Can’t wait for the next 3, 4, 5 years.
Birgit Pauli-Haack: Yeah, yeah, and it’s also the speed with going from idea and the overall design, and then, all of a sudden, it’s a theme that you can publish on the WordPress repository.
Maggie Cabrera: Yeah. The designers don’t use Figma anymore, they just go jump on the site editor and they start the site editor, the edit in site editor, and then, with Playground, they generate a PR that we review for the technical stuff.
Birgit Pauli-Haack: Uh-huh.
Maggie Cabrera: So, the themes make it through the theme directory guidelines, because there’s like, you need to add the license for the images and the assets and all that stuff. But, in general, most of the work is done in the editor and there’s barely any code that needs to be touched.
Birgit Pauli-Haack: Yes, it’s it.
Maggie Cabrera: It’s amazing to see that.
Birgit Pauli-Haack: Yeah, yeah, it’s interesting. And Beatriz Fialho, she demonstrated that in a recent Hallway Hangout, how that connection works between the Create Block Theme plugin and then the Playground and then the GitHub PRs. Yeah, so, how these three tools actually work together, and that’s quite interesting, too, how streamlined the process is. Yeah.
Maggie Cabrera: And it’s only getting better.
Birgit Pauli-Haack: Yeah, yeah, getting better and better.
Announcements
Yeah, so, we have a few announcements, dear listeners, and well, I have a section here that says listener questions and we haven’t gotten any listener questions lately. So, if you have a question, just send them to Changelog@GutenbergTimes.com or ping me on the WordPress Slack or on Twitter if you have a question that you want the answer to, and we can answer them here at the podcast here.
Developer Hours
So, today I have a few announcements. The Developer Hours, a first look at a new API that will come with WordPress 6.7, and that is the Template Registration API for plugins.
Up until now, plugins had a really hard time getting templates into the block theme, the site editor, so they can be offered to the site owner or designers to use whatever comes in the plugin, also for the front end. And there was a developer ask last week about that and also a Developer Blog article about how to do this in various detail. Mind you, WordPress 6.7 hasn’t been out yet, but it was in Gutenberg 19.1, so that was the Developer Hours last week, or this week? This week, sorry, September 10th. Today is September 12th. I haven’t followed that example in the Developer Blog post yet completely, but I can see how that really makes it a difference when you, for instance, have a plugin with a custom post type as well as custom fields. You can also provide all that already in a template, both for the single post of your custom post type, as well as for the archive template. So, your plugin is pretty much ready to be used with any block theme, or also for classic themes, of course, if you want to do that.
And so, the next Developer Hour is on September 24th and, as always, on 1500 UTC, that’s 11:00 AM Eastern. It’s about the introduction to DataViews. And it’s not so much the introduction in what’s in the site editor now, but it’s more like how you can use the DataViews component as part of your own plugin for the settings page, or when you handle other data that’s coming in from a different source like from an API, say, on the internet. So, the Developer Hours will cover the fundamentals of DataViews component, how to add a React app to the WordPress admin page, and how to display a custom datasets using the DataView component. And, there will be a Q&A session, and there’s also already a post on the Developer Blog for the first part of it, like using DataViews to display and interact with data and plugins.
So, that’s September 24th, 1500 UTC. And I’ll share, of course, all the links in the show notes, not only the RSVP for the Developer Hour, but also the article for the Developer Blog. And I will also share the subscribe to the Developer Blog links, so we’ll never miss a post again. And also, I will share the link to the Developer Hours YouTube playlist, so you can go back and say, “Oh, which Developer Hours have I missed?” or, “Oh, there was a Developer Hour, I need to learn this.” So, it’s actually pretty cool to have those resources all available.
Speaking of Developer Blog, there’s the newest “What’s New For Developers” roundup post available since September 10th, and it has about 25 different changes for plugin developers as well as themes. Some of them about 6.6.2, other ones are coming from Gutenberg 19.0 or Gutenberg release 19.1 and they’re divided up between plugin and tools or theme developers. Some things are also good for both, but you’ll figure that out. But it’s just a rundown of developer relevant things that coming into WordPress before WordPress 6.7 comes out.
Well, that was a whole thing.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Thank you Maggie for being so patient. Any comments about things you want to do?
Maggie Cabrera: Yeah, I was just looking at the What’s New For Developers and I think those are so useful to keep up with all the changes in Gutenberg and core because so much happens in so little time and it’s kind of hard to follow everything and be able to know what you can benefit from in your themes or in your plugins or whatever implementations that you’re making. So, yeah, it’s so good to have that all condensed and easy to follow.
Birgit Pauli-Haack: Well, thank you. Yeah. Yeah, there’s a whole group of writers on the Developer Blog that are working on it and we are scouting all the things that come out of the teams being the releases or comments to core, but even then, we miss things. So, if you find something that we missed, don’t hesitate to let us know. We’ll just add it to it or bring it into the next one.
The Roundup post comes out always on the 10th of the month, so October 10th is the next one that will come out, and I think the designated writer, we are working on a team on this, but the designated writer will be Nick Diego, and he’s leaving right now for WordCamp US. But, yeah, he will be back and then start writing, but we are all contributing to that. We have a whole list of things where we just copy paste things from release or from track tickets and then we need to do some research and then have the little blurb there.
Roadmap 6.7
All right, well, speaking of 6.7, the roadmap 6.7 has been out and Anne has published it on September 3rd. That was pretty much a few days after Jessica Lyshek and I were wondering if there will be a roadmap post at all before Beta One, but there is, so we are going through it fast because it’s a long post anyway, so we might as go fast, but we also will cover it in the next episode after the next one. So, this is 107. We will cover it in 109 when we’re going to record it around October 10th, that’s when Beta Two was out for 6.7. Beta One is October 1st and then, October 8th will be Beta Two.
So, the roadmap, the first thing that comes up is of course the new default theme. Have you looked at it?
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: What they’re working on?
Maggie Cabrera: I’ve not been following it as much as I would’ve liked because I’ve been busy, but been looking at the design and a little bit at the repo and I am, as always, very impressed with the design work and how ambitious this thing looks like, even though I think Twenty Twenty Four was really ambitious, I think this one’s outdoing it because look at the amount of patterns there.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: There’s so many.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: I know for a fact how hard they are to build in such a short period of time to the standards that we expect the default team to have.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: It’s a great work being done there. So, for sure, if anyone’s listening is interested in theming, go and have a look at the repo and check the work being done there.
Birgit Pauli-Haack: Yeah. So, how many patterns are there? I can’t even count them. Wow.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Yeah, that’s really a lot. Yeah, so we probably need to do a review of all the patterns at some point.
Maggie Cabrera: Oh yeah. I’m looking at the repo and I’m scrolling through all the ones that are mentioned. It’s long.
Birgit Pauli-Haack: Yeah, and I like the…
Maggie Cabrera: I think it’s at least double what Twenty Twenty Four has, or close to that.
Birgit Pauli-Haack: Yeah. Oh yeah, at least. Yeah. What I see is also the name of the patterns are quite revealing, so you know pretty much what’s going to be in there, but I like the vertical header. We haven’t talked about vertical headers yet.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: And so, really, really excited about about trying that out, and then, it has a poster section and I can read a few patterns for a photo blog and then portfolio and newsletter, sign up. That’s kind of standard, so I’m tempted to install it and make it… Put it up on one of my technical blogs and try it out and see what’s coming out of it.
Maggie Cabrera: If you give it a couple weeks, you will have an odd version that’s decent enough to start doing your thing because it doesn’t have any functionality in it. What you will be missing, it’s probably going to be minor stuff like translation on patterns and, yeah, maybe you will be missing some accessibility fixes and stuff like that, but you will have most of the design on that version.
Birgit Pauli-Haack: Excellent, excellent. Yeah, so, well it’s going to be two weeks until I actually get to do some of that. Yeah. And then, what’s also going to be in 6.7 is definitely a refinement of the DataViews.
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: And some of them is the extensibility that you can extend or register and unregister some of the actions that are in there via plugins. I know that that’s already in there, because it was in Gutenberg and that’s going to be in 6.7 as well. Yeah, the grid layout in the DataViews to follow the aspect ratios and there are quite a few interesting developments there.
The next one is something that is definitely exciting, that’s the polishing of the query loop where there are additional features in there, like the offsets and all that. Putting it from the toolbar into the sidebar and all that. So, that is always good because some of the features actually confuse me and other people.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: So…
Maggie Cabrera: And if they confuse us who are quite used to interacting with it often enough, I can’t imagine for someone that encountered it for the first time. Yeah, I think that’s great.
Birgit Pauli-Haack: Yeah, I like that too, yeah. We have been talking about this podcast about some of the Zoom Out experience and that the team has been working on it. We will see if it makes it at whole or just in parts, and it’s an experience where, when you select a pattern, for instance, that your canvas zooms out and shows you more of your page than the normal editor would show you so you can add the pattern easily and see it in relation to other things. I think that’s a great feature. I just don’t know how it’s defined, that there are sections and what if I want to edit, then I have a different mode. And so, it’s all a little bit, yeah, we need to figure that out, and as long as I’m confused…
Maggie Cabrera: Yeah, I understand. We’re working on that and Zoom Out is already in core, it’s just that the way to access it is not as straightforward as anyone would think. Every time you go on global styles, you will trigger Zoom Out when you’re browsing the style book, I think it is. But the mode is there. The code is, it’s just, the thing is, how are we going to surface this to the users? That’s most of the main thing that we’re discussing is, how do we want the users to experience Zoom Out? So, depending on where we are when we’re closer to the release, we’ll figure out if it stays somewhat hidden.
So, right now, I think there’s a button that you can click in the preview. We’re iterating on that. I think, right now, it’s on the preview, but I think that’s going to move. It’s no longer in the patterns. I think we’ve moved out of that because we thought that you might want to not have it trigger if you have a theme that has patterns that are not full sections and you want to insert patterns inside patterns, which wasn’t really working with the Zoom Out view, but still, we also want to… We’re working on, there’s an open issue that we’re still iterating on and I think it’s going to move into an experiment, to add Zoom Out when you are creating a new page so that, instead of having this pop-up that shows you… Like, Twenty Twenty Four has four or five versions of a page. Instead of having that pop-up every time, you would actual go into pattern insertion mode and you would just build your page using the pattern. So, you have, or you can toggle that out and just write a new page with just text.
But yeah, we’re still… The mode is there and still needs polishing and all that, but mainly what we’re iterating is what we want the user experience to be. So, we cannot really predict what exactly is going to land, but some of it will.
Birgit Pauli-Haack: Yeah, there’s some great testing going around and if you want to test that out, I’m sure we can just install the Gutenberg plugin 19.2 and then play around with it and see what works for you and what doesn’t. And, if you pay attention, sometimes it’s hard to narrow down why you all feel trapped or confused or something like that, but it’s hard to describe that. But if you can, that would be really helpful for the designers and the developers to figure out where…
Maggie Cabrera: Yeah, feedback is more than welcome.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Absolutely, yeah, and if someone has an idea in mind as to how they would think they could benefit from this. They are a plugin author and they think they could use this for something, idea that they have, then that’s more than welcome, too, because we think we know the blows people will want to go through, but we are probably not thinking what everyone else has in mind. So, yeah.
Birgit Pauli-Haack: No, I understand. So, the 6.7 also will come with some media improvements. We talked about the HEIC images that are automatically converted to JPEGs. Then, auto size of lazy loading and some background attachments or fixed backgrounds that are on the block level as well, and, of course, need to be uploaded in the media library and all that kind of thing. Yeah, and then, the meta boxes in the iFrame post editor. There is a PR and Anne has shared the links to that, how meta box is going to be, because we talked about it here a bit that the post editor and the side editor become one.
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: But it’s a little bit tricky when the post editor has meta boxes on the bottom, then, it loads it not in the iFrame. The iFrame is the unified canvas or editor, but if it’s not in the iFrame, then some of the things are not working like they are in the editor. So, the interfaces are, all of a sudden, don’t match. So, they’re kind of trying to figure out that, and I think they found a good solution with two sections in the editor and the post editor where the block editor is on top, and underneath, they have an additional window there. It’s going to be interesting to see, but I think with the block bindings UI that’s coming in 19.2, some of it is offset because those are a better interface to connect with post meta data or other custom fields.
Yeah, what else is the design tools? Everybody… No, not everybody. Every block gets border controls now.
Maggie Cabrera: Yes.
Birgit Pauli-Haack: So, you can… Yeah, we ran through the list here quite often and those are all coming to the WordPress 6.7 and it also stabilizes some of the block supports because some of them, they were still in experimental status, especially topography supports features, and they will come out of experimental status, so more people can use them now in their own custom blocks or for block variations.
We talked about template registration API, that’s coming, and then, we will talk about the preview options and then updates to the interactivity API and the block bindings API. And another one is the HTML API. So, it’s a lot of… It’s definitely, again, with the last three of them, developer heavy, but there are great improvements for the interfaces and for the contact creators and the designers in the site editor. So, that is going to be WordPress 6.7 and we are going to dive into it in episode 109. That’s two episodes from now.
All right, back to our program here.
Maggie Cabrera: Mm-hmm.
What’s Released – WordPress 6.6.2
Birgit Pauli-Haack: First, what’s released? It was WordPress 6.6.2, and it had 26 fixes, 15 in core or in track, identified in track and 11 identified in the Gutenberg repo for the block editor, and some maintenance security release. But some of the fixes are bug fixes for things that were in 6.6 and dealt with the lower CSS specificity. That changed a few sites that looked a little bit different, and now, the bug fixes are in. There were quite a few in 6.6.1, and now 6.6.2, has caught up with the other ones. And then, there’s a bug fix for the derivative state in the interactivity API and, yeah, some are for the post editor rendering in the iFrame.
The release post has the whole list of things that’s in there and what’s new for developers. I’ve written a few sentences about the bug fixes that are relevant for our theme developers.
Gutenberg 19.2
That gets us to Gutenberg 19.2.
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: 193 PRs, 58 bug fixes, and 59 enhancements. 54 contributors contributed to them. Six of them are first-time contributors, so it’s always good to have first time contributors. I am so happy…
Maggie Cabrera: Oh, it’s… Yeah.
Birgit Pauli-Haack: … they are identified and in the release post so you can scroll down and learn more about them.
Maggie Cabrera: Yep.
Birgit Pauli-Haack: Yep. So, do you want to lead us for the first one?
Enhancements
Maggie Cabrera: Move bulk actions menu to the filter and consolidate with floating tool and total items display?
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Yeah, that’s part of the database, and it is…
Birgit Pauli-Haack: I think the biggest problem with the data views is that they want that on that real estate on the screen… Do everything.
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: And now, it’s all very top-lastic and now I need to give it a little bit more space, so they moved the bulk actions to the footer, and it’s really interesting to see how that comes about when you do it in incremental, and somebody should do a video, how it’s going to work from.
Maggie Cabrera: It’s hard, right?
Birgit Pauli-Haack: The first few to the next one, that’s probably going to be fun.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Cool. Yeah.
Maggie Cabrera: I think, in general, there’s also this constant concern in the editor in general. You want to give the users as many options as they can while keeping things simple. And then, do you want to hide things that are not something that you use all the time, but still users need to know they are there when they need them. So, it’s a constant… It’s a balancing act, to not overcrowd the UI while still giving the users a really powerful tool.
Birgit Pauli-Haack: Yeah. Definitely. And, with the admin pages, it comes that there’s a 20-year history, what these listings on the admin pages can do, so that needs…
Maggie Cabrera: You need to be able to do everything.
Birgit Pauli-Haack: Yeah. Yeah, and extend it.
Maggie Cabrera: Yep.
Birgit Pauli-Haack: … I think that’s something that’s going to be in mind for 6.8 or 6.9, that, once the DataView component is… But it’s also one single component that’s really hard to do. Yeah.
Maggie Cabrera: Yeah. That’s why it’s so important for people to start trying and adopting it early so they can influence the development early on, because, yeah, it needs to be very extendable. So, the best way to do it properly is giving feedback so that the core contributors actually have in mind the needs of plugin developers. So, yeah.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: That’s very important.
Birgit Pauli-Haack: Yeah, so, there is composite component that comes in, too, that had a few PRs in 19.2, but the bigger PR is going to be merged in 19.3 and it will come out in two weeks. So, you will find some of the references interesting because they say, “Don’t use the composite AI.” So, what is it?
So, there’s a new version. Sometimes, a component has run its course and needs to be refactored and one of those is the drop-down menu version 2.
Maggie Cabrera: Yeah. Yeah, I’ve been looking at that. It looks so good.
Birgit Pauli-Haack: Yeah. Sometimes you really need to learn from things, right?
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Yeah. I also have the feeling, especially in software development, when you do go new routes, that the first time you never get it really right, because it teaches you how it wants to be done, whatever you’re going to do. And then, the second time, you get it right and you learn from that and then you iterate.
Maggie Cabrera: You’re always iterating, right?
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Yeah, you cannot settle with the first version of the thing.
Birgit Pauli-Haack: Correct. Yeah. I will share a link to the drop-down menu version 2 tracking issue on Gutenberg, so you see what’s all in the works and where the vision goes. And I will also share the Storybook. It’s not Storyboard, it’s Storybook, right?
Maggie Cabrera: Storybook, yeah. Yeah, it’s Storybook.
Birgit Pauli-Haack: Storybook, yeah, yeah. I’m always getting Stylebook, Storyboard, Storybook…
Maggie Cabrera: Yeah
Birgit Pauli-Haack: … totally confused.
Maggie Cabrera: Actually, it’s Storyboard, you are right, it is Storyboard. I’m thinking of Storybook because it’s…
Birgit Pauli-Haack: Yeah, so it’s…
Maggie Cabrera: Okay.
Birgit Pauli-Haack: Is it confusing now?
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Well, you provide a link so people will know.
Birgit Pauli-Haack: Yeah. No matter what, just click on the link and then you get there, and I really have been discovering the storyboard. It’s been a while since I discovered it, but it was a component work. It’s so good to go there instead of reading the documentation.
Maggie Cabrera: Oh, yeah, I do it all…
Birgit Pauli-Haack: … in the block editor handbook.
Maggie Cabrera: I use it all the time. All the time. Yeah.
Birgit Pauli-Haack: Yeah. So, why do you do that?
Maggie Cabrera: Well, when we’re developing and we need to touch a component or there’s a component that I’ve never worked with, sometimes, I just don’t even know what attributes are available to me and it’s so much easier to just checking the Storybook because it’s just more visual than actually going into the remi and all that stuff. I will eventually do that too, but it feels easier for me to… I’m more of a visual person, I guess.
Birgit Pauli-Haack: Yeah. And me, too. Yeah, and seeing things in action and you can put in values in certain things and then see how the component behaves as a standalone component. You don’t see it acting in context and that’s sometimes really good because you can isolate how your interface is going to be. So, yeah, I really like that. Yeah, so, I’m going to share that in the show notes so you can look at that as well.
Maggie Cabrera: Okay.
Birgit Pauli-Haack: Yeah. The next one is the block bindings UI. So, there is a pull request to only allow admin for now, admin users to create and modify bindings by default. There is a discussion going on the track ticket to get it into core about, is it really necessary to go for the admin role or shouldn’t we go for capabilities? And when capabilities, which one is it? Is it just edit post or is it edit meta or…
Maggie Cabrera: Oh, yeah.
Birgit Pauli-Haack: It’s quite an interesting discussion because, all of a sudden, you get a bigger picture of what all needs to be happening to make this a good feature.
Maggie Cabrera: Yeah. And it feels like, if you’re trying to match what Carl was doing, the classic editor, sometimes it doesn’t really work. So, you have to rethink it in the context of the site editor these days. What do the users today need now, not what was implemented 10 years ago?
Birgit Pauli-Haack: Right, totally. And the other good news is, about the block bindings UI, it’s coming out of experiments. So, if you install the Gutenberg plugin, you will be able to see it right away. You don’t have to enable an experiment for that now and can interact and try it out and test it before it comes into 6.7.
It gives you a way to see all the block bindings for a block or for a section, and which fields are attributed. What it does not do yet is register the custom fields. You still need a developer to do that. That is not yet in the editor, and that’s the missing piece where I say, okay, block binding is all nice, but I still need to have a different plugin to register my custom post types… Yeah, custom post types, and with that, also the custom fields, but it’s one step at a time. Yeah. That’s the…
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Rome wasn’t built in one day either.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: So there was something in the site editor that has been removed now. That’s the shuffle button from the block toolbar that we want…
Maggie Cabrera: That button was added… Well, I might be wrong here. I think we want the shuffle button to be available mainly when we are on Zoom Out mode.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: Because you don’t want the users to be shuffling by mistake a block, a pattern that they have already changed because they’re just editing their site. But when they’re still composing the template, they still have not decided if the pattern that they have inserted is the one that they want. We still want them to have the ability to shuffle through other patterns in the same category.
Birgit Pauli-Haack: Yeah. It’s a quick browse through the patterns that we have per category. So, now it’s also to be limited to a category.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: So, you want to see which one of the call to action patterns are fitting nicely to that, so you don’t have to click and edit. You can just shuffle it and see how it flows. But yeah, it’s interesting how a confusion can happen when you’re actually editing, editing things. So, yeah, and that’s something to learn only from usage here.
The next one is… It’s a tiny change, however, you probably are going to look for it when you want to…
Maggie Cabrera: Oh, yeah.
Birgit Pauli-Haack: … extend your media from the cover block. It moved from the inspector controls or from the sidebar to the block toolbar into the block setting and in the… Yeah, so, you can do it from the block toolbar. You can clear the media and you don’t have to open up the sidebar and go there.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: But if you are accustomed to having it in a sidebar and clicking there, you can now say, “Where is it?” It’s in the toolbar. Yeah, sometimes, those changes kind of can frustrate-
Maggie Cabrera: It’s aligning it with other blocks, like the site logo, the feature image. They have it on the same place where it now is for the code blocks. So, now, it’s more consistent with all the blocks that behave the same way.
Birgit Pauli-Haack: Oh, yeah, good point. Yeah. And we love consistency, right?
Maggie Cabrera: Yes. Yeah, because with having so many contributors, it’s very easy to not think about those tiny things. So, it’s really nice when someone picks one up and it’s like, “Oh, this doesn’t feel right,” and then you notice that it’s inconsistent with other blocks and then you just bring them all in line. It’s very satisfying, I think.
Birgit Pauli-Haack: Yeah, yeah. And it actually removes confusion, and I think it’s a good time to do that now in that place where the editor is, to go through the design. And I know that we’re going to talk about it in our, later on after we get through the change here, about the design system and what’s going to happen there.
So, the next one, maybe you can help me out with that. The content only is… So, it says, “Content only, add support for block styles on top level content only lock blocks.”
Maggie Cabrera: Yeah. I think… I’m not so sure about the top level part. I think it means, when you have a pattern that is content-only and it has a group lock that is surrounding it, sometimes you will have block style variations that affect a group on whatever is inside. So, we’re enabling those style variations in content only. So, you can still change the styles in Cascade because the block styles in your JSON file will affect the group log and whatever’s inside. I want my group block to this background, but I want all the paragraphs inside this group block to have this other color. And you will not be able on content only to change the color of the paragraph, but because you will be able to change the block style, that Cascade still works.
Birgit Pauli-Haack: Oh, okay. Yeah. Now I get it. Yeah. Excellent. Yeah, that’s a very good feature.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: Wonderful. And then, we have two things that are already also on the Zoom Out mode. There’s an edit button on the Zoom Out mode toolbar, meaning that you can switch to an edit. Zoom Out means you’re just looking, yeah, but then, you also want… If you see something and then you want to edit it, then you need the edit button. Yeah?
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: And that’s how…
Maggie Cabrera: I think both of those PRs are adding two different ways to exit Zoom Out mode.
Birgit Pauli-Haack: Mm-hmm.
Maggie Cabrera: Because we’re still thinking about how you enter it and how you leave it. So, that’s it. If you feel like you want more granular control over the blocks inside the sections, like we were talking about, content only is very similar, then you would want to be able to exit. So, these are two ways, yeah.
Birgit Pauli-Haack: And the second one is, you double click on a block and then you exit Zoom Out mode and hopefully that block is then selected.
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: And so, that’s a good thing. And then, so, the Zoom Out mode is definitely something to explore quite a bit because it changes how you might think about site building and the order of things.
So, the next two items are part of the design tool block border, block support everywhere. Now, comment edit link and the comment reply link also get border support. So we have it everywhere now.
Maggie Cabrera: Yes.
Birgit Pauli-Haack: There might still be a few missing. I’m going to take a look for 6.7 on all the design tools because I have… For 6.6, I did the roster of the design tools and there were some empty spaces in there. Now, I’m going to fill up those empty spaces on the border controls.
Maggie Cabrera: Yes.
Birgit Pauli-Haack: The next one is the post publish upload media dialogue is now also handling the upload errors. So, the post publish upload media dialogue, that’s the dialogue that comes when you hit publish once, and then you get a suggestion that you have images that are referencing a third outside your site. So, might be Google or might be a different website.
Maggie Cabrera: It could also be the theme. It could also be the theme, because the theme adds… On the templates, it adds the URL and it points to your asset folder on the themes, but the images are not on your uploads folder.
Birgit Pauli-Haack: Oh, yeah.
Maggie Cabrera: And that’s the difference. So, those are lost if you change themes, but if you click that button, those get moved into your uploads folder. So, it’s in your media and your site.
Birgit Pauli-Haack: Oh, I didn’t know about that, but that’s cool.
Maggie Cabrera: Yeah. I think that’s the reason why this is there.
Birgit Pauli-Haack: Well, actually, I had early on with Ella, a dialogue that images coming from Google should automatically be uploaded. Yeah, yeah, and there were no block themes around when we had that discussion, so that was, what, five years ago?
Maggie Cabrera: Yeah, yeah. For sure.
Birgit Pauli-Haack: Yeah. And it started out with a button on the toolbar of the image block where you can say upload image to media library. But then, it was also…
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: … “Okay, if I had 15 in my post, yeah, I don’t want to do it one at a time. Give me a feature where I can do 10 at a time.” And that was in the publishing section where it says, “Hold, you have images that are pointing someplace else,” but you were able to click on them, but the errors wouldn’t bubble up. Yeah, so, and that has now been solved with this one. So, now you get the error messages when it doesn’t work. Before it just didn’t do anything. Yeah? You were clicking and clicking and you didn’t know why it wouldn’t work. So, the typography changes comment is that, now, you can individually override the presets through the interface, I would think.
Maggie Cabrera: No, I think it’s theme JSON.
Birgit Pauli-Haack: Oh, it was theme JSON.
Maggie Cabrera: Yeah, I think it is. There’s an example on the PR. You click, “Here is some test.” Theme JSON.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: There is a little arrow and you see how you can set fluid to through on a specific-
Birgit Pauli-Haack: Oh, right.
Maggie Cabrera: … for the whole site.
Birgit Pauli-Haack: Per the preset for fluid. Yes. Yeah. So, you can have a preset one that is fluid and the other one is not.
Maggie Cabrera: The global setting can be set to false, and that can be overridden by one specific concept.
Birgit Pauli-Haack: Oh, okay. Well, thank you for making that clear. And the next one is, there is now an experiment for client-side media processing in Gutenberg. That is by Pascal Birchler. He actually has his own plugin where he experiments with all kinds of different media processing, and this one is coming as an experiment to Gutenberg. So, I’m really looking forward to that. It’s for client side media processing, so you don’t need the server involved in it.
Maggie Cabrera: Oh, yeah.
Birgit Pauli-Haack: It’s all in a browser. It’s all in the browser.
Maggie Cabrera: Nice.
Birgit Pauli-Haack: It’s all in the browser. And then, the last one from the enhancements is the details block gets now a transform from any block type. From a paragraph, you can make a details block. You can… From a list block, you can make a details block. And so, it’s really cool. It’s a small quality of life change that changes a lot.
New API
And now, we come to the extensibility section and there is a new API for the preview options. So, there is, on the right-hand side, on the top, you have the preview and to do either mobile or desktop or preview in a new tab. That’s what’s there, and I think now, with this release or with this Gutenberg release or the one prior, there’s also the 50% one that is your zoomed out one, right, for the desktop.
Maggie Cabrera: That might go away.
Birgit Pauli-Haack: Yeah, yeah, it might go away. It’s a zoomed out, might go away thing. Yeah. But, right now, it’s they have with the menu.
Maggie Cabrera: No, I mean, it might go away because it will be moved somewhere else.
Birgit Pauli-Haack: Yes.
Maggie Cabrera: Not because it will go away fully.
Birgit Pauli-Haack: It won’t totally go away, but…
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: … it might be its own button. Yeah. But what this PR enables is that plugin developers can have separate preview options and register them with the Gutenberg so people can look at things in a different way.
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: So, one of the examples is that if you build your new newsletter with the block editor, you don’t want the preview to look how it’s on the website, but you want to how to look in an email.
Maggie Cabrera: That’s great.
Birgit Pauli-Haack: … that’s where this example is for. But there are other examples that I right now can’t come up with, but because that’s my lack of imagination right now. But if I think about it some more, I’ll find some that were… If you have an idea, what else could be in the preview?
Maggie Cabrera: I don’t know, maybe you could do a preview of dark mode, for example.
Birgit Pauli-Haack: Excellent.
Maggie Cabrera: I don’t know.
Birgit Pauli-Haack: Excellent. Yeah. Or a preview of the screen for your TV because it’s a special site…
Maggie Cabrera: Oh, yeah.
Birgit Pauli-Haack: … that it’s only for the TV, but you want to see it because it’s a whole different…
Maggie Cabrera: Or a tablet.
Birgit Pauli-Haack: … aspect ratio.
Maggie Cabrera: Yeah. Maybe you want the landscape tablet from your preview…
Birgit Pauli-Haack: Right.
Maggie Cabrera: … because your website is going to be used by… Yeah, it could be anything.
Birgit Pauli-Haack: Yeah. So, I think we have a little conversation here. We come up with a lot of examples, and plugin developers, these are your opportunities. I’m going through the other 100 ones, red line items, and I stopped by CSS and styling. And these are the two PRs that made it into 6.6.2 as bug fixes. One was the featured image block, getting the CSS specificity reduced.
Maggie Cabrera: Mm.
Birgit Pauli-Haack: And now is behaving nicely again with the sites. And then, the other one was the retain same specificity for non iFrame selectors. That was the piece that, if the editor wasn’t loaded into the iFrame…
Maggie Cabrera: Oh, I see.
Birgit Pauli-Haack: … some of the theme JSON things, spacing rules were overwritten by the editor. So, you wouldn’t have the same look from the editor like you have on the front page.
The front page wasn’t affected by that, but it was just the editor thing. Yeah. We are also accustomed that the front page looks like the editor or the editor looks like the front page, that we notice those changes and are, “Do we have to fix something?”
Maggie Cabrera: Yeah. I must say that the work that’s been done with the CSS specificity has been amazing. I think it’s a really, really hard change that landed on 6.6 that, of course, add some consequences that are now being patched, but it’s still, I see the work being done to not break people’s sites and fix them when, inevitably, sometimes we do. And it’s a very big change that it’s very useful and the people really need it, but it’s still complicated and complex and they’ve been painstakingly making sure we’re not really breaking people’s site, even if it’s just by patching 6.6.2.
Birgit Pauli-Haack: Yeah, the unification of CSS specificity was very important to make the style variations work, the extended block style variations, and to have a standard way of doing things. Yeah, well…
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: … what you said before, yeah, there were so many contributors and now, eight years of development, some people have different CSS or early blocks had a different CSS behavior than later blocks and, yeah, everybody learned from things and now we’re back and fixing it.
Maggie Cabrera: Yeah, and that’s more consistent for themers. They know what to expect from core blocks. Other CSS is going to behave. They know that it’s going to be consistent. So, yeah, in the long run, it’s going to be great, even though now it’s a little bit of a bumpy road. But yeah, keep reporting the bugs so we can fix them.
Birgit Pauli-Haack: Yeah, definitely. So, on that, we are pretty much almost through the changelog for the 19.2. One thing is that, if you are a plugin developer or developer who wants to explore the DataViews component, the documentation has been updated quite a bit and edit stories for combined fields and layout properties, and that also, you can explore all that for the data use component that is in this release.
All right, anything else that you…
Maggie Cabrera: No, I think we covered a lot.
What’s in Active Development or Discussed
Birgit Pauli-Haack: Yeah, we covered a lot. Yeah, yeah. But we are now arrived at the section, what’s in active development or what’s discussed? And I wanted to point out to a design blog post, not that because it was mine, but because it was very important to have it and a DataViews series on the design blog about what are the features that coming that the design team is working on? And there’s just an update number one, and there will be many, many to come on the Design Team Blog. That’s make.wordpress.org/design. More and more posts will come out and it also is an iteration of the design shares, and Joen Asmussen does every two weeks putting the whole work of the design team on display and what are they working on with the GitHub or track tickets where the discussion is happening.
Design Systems
And, speaking of Joen, he just published a very visionary post about advancing the WordPress design system, and that covers that with all the new development, and in the editor, there’s also coming… What they also built is actually a design system with the components that can be used by plugin developers as well as the site editor or Gutenberg, as well as outside of the WordPress system. So, it’s the design system out of the atomic blocks building coming from components and then sub-components and building larger components. And then, you can build the interfaces from that. And everything is also done in the Figma repository that is open and public for WordPress. And then, the Storybook that we mentioned before. So, these are the three pillars of the WordPress design system. And, if you haven’t noticed that, reading that particular article will help and bring it all together and contributors will work on it, but this is where the framework of the design system to bring it all together.
The next step is actually what we talked about as well is to focus on the specific updates on the Figma libraries and the Storybook site to set clear and actionable goals for the design system and also go through the current system and look for inconsistencies so they can be fixed. And then, also to elevate and connect the three pieces to a unified system.
There will be bi-weekly updates on the progress in Figma. You can have your comments on the draft. And, of course, in GitHub that’s a known place where you can leave your comments and your work if you wanted to. So, a good example of a Storybook design system references the design system from the auto manufacturer, Audi, how they deal with that for the website development. What’s your thoughts about that?
Maggie Cabrera: Yeah, I just love these kinds of posts. I love all the design work on it. I love the attention to detail. I love the consistency of that. I think it’s fantastic. If you go into the Figma file that Joen links, you see that attention to detail. You see all of those components. That’s how we keep everything consistent, when you’re implementing something new and you’re using a component and something like, this is not looking good.
I think we were seeing on the PR that we talked about where we’re adding the extensibility on the preview dropdown. If you’re looking at that PR, there’s comments saying, “Oh, it looks like, when you’re adding a new item, there’s a left padding or left margin that it’s in misalign with the rest of the things.” And you start picking those up and seeing, “Oh, there’s this back here.” And again, you go back and keep things consistent. So, it becomes easier and easier for new developers to come use a component and just basically use them out of the box and everything looks exactly right.
Birgit Pauli-Haack: Mm-hmm.
Maggie Cabrera: So, yeah.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: I think that’s pretty important.
Birgit Pauli-Haack: It also speeds up development because there are…
Maggie Cabrera: Mm-hmm.
Birgit Pauli-Haack: … certain discussions or decisions that were already made and you just need to pick them up and move with your idea forward, but you don’t have to build any… I mean, you still have to use them and know how to use them, but you don’t have to think about interfaces anymore, you’re just going to need to know-
Maggie Cabrera: Yeah, or accessibility.
Birgit Pauli-Haack: Or accessibility.
Maggie Cabrera: That’s already thought of.
Birgit Pauli-Haack: Exactly, yeah.
Maggie Cabrera: There’s so much work in these.
Birgit Pauli-Haack: That’s actually a…
Maggie Cabrera: There is so much discussion.
Birgit Pauli-Haack: It’s a big point of this as well. It’s kind of that. So, we have the three pillars, that’s the components, the Figma library, and the Storybook, but it’s also design, development, and accessibility that brings it all together. There are a few words in that article that I think I don’t understand. I need to talk with Joen about it, but when he uses the word “Pattern,” I don’t think he thinks WordPress patterns. It’s more design patterns. That’s a different pattern.
Maggie Cabrera: Yeah, I think so.
Birgit Pauli-Haack: Yeah, and he talks about design tokens. I don’t know exactly what that means. Yeah, so, it’s a little bit heavy on the technical terms.
Maggie Cabrera: Yeah, the design lingo. Yeah, I cannot help you there.
Birgit Pauli-Haack: You’re a developer, right?
Maggie Cabrera: Yeah. No, it’s not just that. I really enjoy working closely with design on designers. I think it’s one of my favorite things. I think there’s also a bit of the foreign language.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: I don’t know if it’s for you, too.
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: I think there’s a little bit of that because when language gets a little bit more, I don’t know, more technical or more specific…
Birgit Pauli-Haack: Yeah, yeah.
Maggie Cabrera: … if you’re not fully into that, we’re used to it as in the developer lingo, right?
Birgit Pauli-Haack: Yeah, yeah.
Maggie Cabrera: Because we do know what the difference is between, I don’t know, yeah. But, for designers, it’s even harder, and if you are not speaking the language, then it’s an extra…
Birgit Pauli-Haack: Yeah.
Maggie Cabrera: An extra hard skill.
Birgit Pauli-Haack: It has some things in there, like, what is a sticker sheet?
Maggie Cabrera: Yeah.
Birgit Pauli-Haack: I think we can clear that all up by asking, commenting on the post and figure that out. Yeah. So… But it’s a very interesting post. I learned a lot from it, and it also seems to have quite a few comments there that are worth reading. So, I will share a link to it in the show notes and also the link to the DataViews update that just has a visual representation of a new feature that comes to the DataViews. So, it’s all in one place.
All right, that was it. So, Maggie, if somebody wanted to get a hold of you, where would that be?
Maggie Cabrera: Yeah, I’m on Slack. My Slack, I’m… Let me check, because I’m not sure what my username is. I think I’m OneMaggie. Yeah, OneMaggie, and on Twitter, it’s One_Maggie.
Birgit Pauli-Haack: All right. Okay, and I’ll share those links also in the show notes.
So, this is it. As always, the show notes will be published on the Gutenbergtimes.com/podcast. This is number 107, and if you have any questions, suggestions, or news you want us to include, send them to Changelog@Gutenbergtimes.com. That’s Changelog@Gutenbergtimes.com.
Thank you so much for listening, and I welcome all the new listeners that I’ve seen that joined us in the last month. And, if you are on Shopify listening to this, please leave a comment or review or, on iTunes, review or on Pocket Cast or on your favorite podcast app because it helps with other people discovering this. Especially if it’s useful for you, it might be useful for others.
Thank you so much for listening and I’ll talk to you in two weeks. Thank you, Maggie.
Maggie Cabrera: Thank you for having me. Bye.