Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with their guest Matias Ventura restricting customization in a full-site editing world, Gutenberg 12.5 and Gutenberg changes coming with WordPress 6.0.
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Pauli Systems
Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed
Show Notes
Twitch Stream session with Ryan Welcher
How to disable theme features and Lock Block Templates for Full-Site Editing in WordPress
- Dev Note: Locking Blocks in WordPress 5.9
- Tracking issue: On Locking and TemplateLocking (#29864) March 2021
- Add template lock attribute to column and group (#26128) October 2020
- Proposal: robust permissions system for FSE theme templates (27597)
- Exploration around multi-entity permission management (#37489)
Preliminary Roadmap for 6.0 (Gutenberg Phase 2) by Matias Ventura
Gutenberg 12.5
What’s new in Gutenberg 12.5? (February 2nd) by Fabian Kägy
Consider a standardized way to modify hover/focus/active states for blocks (Issue 27075)
Gutenberg Developer Hours Feb 22 at 11am ET / 16:00 UTC
Transcript
Birgit Pauli-Haack: Hello and welcome to our 60th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about Restricting Customization in our full-site editing world. Gutenberg 12.5 and what’s on the plate for Gutenberg’s Phase 2, coming to WordPress 6.0. I am Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate. And I’m here with my co-host Grzegorz Ziolkowski, JavaScript developer at Automattic and WordPress core contributor. Howdy Grzegorz, how are you today?
Grzegorz Ziolkowski: Hello! I’m good. Thank you. So last week we celebrated WordPress 5.9 release. That’s a huge one, yeah, we did it. So it took five years to bring blocks everywhere on the WordPress site. And everyone now can switch themes and play with the new kit on the block, which is a block theme concept. So I’m really excited about that and I see also a lot of excitement in social media and people are trying that out and yeah, it’s mind blowing how everything changed.
Birgit Pauli-Haack: Yeah. And I’m so thrilled to welcome our guest today, Matias Ventura sometimes called the spark of Gutenberg, well he is its principal architect. So last time we had Matias on the Gutenberg Times Show was November 30th, 2018. Just before we all headed out to Nashville for WordCamp US, and just before the release of 5.0, so thank you for joining us today at this one, after this wonderful release for full-site editing in core.
Matias Ventura: Hello, hello. Thank you for having me back. Like before 5.0, that’s a while back. It feels both like yesterday and forever ago.
Birgit Pauli-Haack: Yeah. I feel the same way, so many years and then we had a pandemic in between which kind of made the years even longer. So it’s a great pleasure to have you and the project has grown and matured so much. So it’s really mind-boggling how far it has come. And so the first version, minimal viable product MVP, the beta version or whatever you call it, of the full-site editing experience has been released. How are you feeling about it and what are the first insights from users?
Matias Ventura: Yeah, I feel really relieved that we got to this point, is being one of the main promises of the project to, like Greg said, like to bring blocks everywhere essentially. And this is the release that marks, I think will mark like a historical milestone where we finally were able to bring everything out to people. So, it’s a huge celebratory milestone for me, the work from so many people over so many years is finally, in a way it also just the beginning, because once you put things out there is when you really start seeing how people interact with it, the feedback, the things to change. So in a way it’s just the first step, but it’s also the culmination of a lot of work. So it has that both elements to it, I guess.
Birgit Pauli-Haack: Yeah. I feel that too. And I’m delighted, there’s so much chat around full-site editing. And listeners, long time listeners here on the Changelog know that we have been talking about it for at least two years. So, but people care greatly about it and they definitely see the potential and also, the theme developers are excited. So, but before we talk what comes to WordPress 6.0, and I just realized we have the 60th episode and we’re talking about WordPress 6.0 so that’s a coincidence. So shall we briefly go over the locking mechanism for block themes, the site editor and the blocks. It was part of a question on Twitter Matias and you had some great examples of what a developer already can use to lock down the parts.
Matias Ventura: I think it also speaks to both the ambition and expanse of the project, that we’re just celebrating all these new tools, all these extensibility tools, all these design elements that people have to play with our site. And now we’re focusing on locking them down, but there’s a reason to that. It’s like the WordPress project is really about all of these use cases. And while it’s been important to bring a lot of these tools to end users, people that are just starting their site on their own and be able to modify things that before were really locked down to them. That’s really important to really democratize access to all of these stuff. But at the same time, WordPress is used for very different kinds of sites and people that maintain sites for others like site builders, or agencies or freelancers are also users of WordPress, and these release also has tools for them.
And some of those tools are precisely about restricting and locking down and controlling what these tools are, when and how these tools are exposed to users. There’s many, I think it’s like from my perspective, this is the first time that WordPress has so much control and granular control over this when it comes to themes. So I’m quite excited, but I think we haven’t done a proper job at bringing that into focus, because we have something like the theme.json tool that was introduced in 5.8 and improve a lot for 5.9, that really allows a site maintainer, a theme developer to have a lot of control over what appearance tools are exposed in the interface, not just in terms of registering color palettes and the presets that people are used to, but also in really saying, “Okay, I don’t want the paragraph block to have any of these typography tools.”
You cannot control the line height, you cannot control the font size, you can only change the color and pick them on this presets. You can do all sorts of combinations there, and I think that, that really gives a lot of power to the site maintainer to really control that experience. But the cool thing is that since all the blocks are using these same APIs, it just works with every block, not just core blocks, but also third-party blocks that use these APIs. So that’s a way to really scale the ability to control essentially how all blocks work, without the developer needing to do anything specific for like a third-party block from, I don’t know, WooCommerce or anything, it should just work. And that’s just one part of it, we also have the other API that you mentioned locking, which works at a block level.
You can really restrict when a block can be moved, removed, or inserted in any area of the… like in a block theme essentially anywhere you can have a side bar that’s entirely locked down to editors, and you can imagine all the combinations that you can have with that. And these lock in mechanisms essentially turn the editor instead of being like blocks that you can move all around, the blocks are sort of set in there and you’re just editing the text or manipulating some of the attributes, essentially what is exposed. And if you combine this with a theme.json, you can say, okay, now you’re just modifying the attributes that the theme allowed to modify, like only choosing presets for a heading for example, or stuff like that. And I think it’s a really cool set of features that work really well together. And I don’t think we’ve done a lot of outreach around how they can be combined. We talk a bit about theme.json, and I think there’s some content out there about locking, but the combination of the two with specific use cases I think can be pretty powerful.
Grzegorz Ziolkowski: Yeah. This is also a year that needs further research because I can envision some use cases. People would like to put some parts of the site in their read only mode, so you can’t even change attributes like you could right now. And all of those features are hidden for now because it’s not something that for the default use case on the site are necessarily like individual block locking could be, if you would block that during designing your template, how would you change it inside? So it’s something that needs further thinking, but it’s there, it’s just, you need to know how to get to it. And we will talk about that today. That’s why we also introduce some features to look at the codes so people can just be more familiar and change like they do surgery of the HTML, just to ensure that you can add also today.
Matias Ventura: Yeah, exactly. Right now that works essentially with a code editor, you need to modify the attribute in the code editor. Eventually there will be a UI for this and this UI can also be, the idea is that this will be controlled by user roles. So maybe if you’re a site administrator, you can just using the UI itself, you can go and lock the different things that you unlocked, and you will have direct UI to do that. But an editor or an author, when they get there, they wouldn’t see the UI itself. They would just get the… whatever is locked, is locked and they cannot change it.
Birgit Pauli-Haack: Yeah. There also had been a, from the beginning actually, or very early in the project, the concept of a block template where you can say, “Okay, for a custom post type, I have only a certain amount of blocks that come into the page for it.” And you only can use certain blocks and you only can change the content for instance, that locking API has been in the site already, or in the product already, but it was not exposed to non-developers. Yeah. And I think getting that a little bit higher on the user interface, instead of having to write code about it, I think that’s a great development for later. I’m not sure actually we’ll make it in 6.0, but because that’s a huge undertaking by itself I would think, because you need to go through all those concepts.
Matias Ventura: Yeah. I think it can be like, it’s very close because it’s also how the whole project evolves. Some of these tools are added just through code initially, you mentioned, the templates have had locking mechanisms since 5.0, this new tool really expands it to block so, and since blocks can be edited in the code editor, now this becomes available for more people. And the next step is really just to expose it in the UI. There’s really, there needs to be some work there to really finalize the design, but in terms of effort is not too much to just have it there. We also want to have it on the list view, the panel on the side where you can see all the list of locks, and there it would be very easy for a site administrator to just click on a lock icon and just determine exactly what needs to be locked.
Birgit Pauli-Haack: Yeah, that sounds excellent. So I just want to also know dear listeners that Ryan Welcher actually walked through some of the demos of that in his Twitch Stream on February 3rd. And he also shared the code for his demo on a GitHub repository. So we’ll show the link in the show notes. That is definitely for developers of course, but we also will share some of the links and documentation for the things that Matias and Grzegorz just mentioned.
Matias Ventura: And I just want to add that also, since this works at the block level, patterns themselves can be locked down in different ways, so you can create patterns where certain elements are locked. So it really expands that initial set of locking that we had for templates to essentially anything, like anything can be manipulated that way now.
Birgit Pauli-Haack: All right. Yeah.
Grzegorz Ziolkowski: That is to summarize the options then that you will see in the show notes in the links. So it’s possible to lock in usual block, but also the template of inner block. So if you, when you have a group, so you can lock down what’s inside the group and there is also some work to bring some more robust permission systems for all of that. So, when you have navigation block, which is in some entity, reusable block and all those concepts, so they can have different permission levels. And in general, it needs to be laid out in a nice way so we have a coherent system.
Matias Ventura: It’s cool that you mentioned reusable blocks, because there’s been some feedback, I think ever since 5.8, that it’s too easy to modify reusable blocks in a way. And for some people that’s great, that’s what the experience they want, for many others that’s not. And the ability to lock things down, like you can just lock a reusable block down and the UI would honor that experience. So it’s also something that addresses those issues because everything is blocks ultimately.
Birgit Pauli-Haack: Yes. And I think it’s really important to emphasize that you need to first have it all wide open before you actually know what you need to lock down. And if the features are not in the system yet, it’s hard to make those locks work. So it’s kind of the chicken and egg thing, and we know what the chicken is and we know what the egg is, but yeah, what comes first is actually it needs to be open before we can lock it down.
Phase 2 for WordPress 6.0
And now I’m really happy to go to the preliminary roadmap of Gutenberg phase 2 for 6.0. But just because we were on the topic of Adoption and all that, can we take that section first for those who want to see if I want, do I want to really adopt it yet? And what are the possibilities? So one thing was that the theme.json file is actually not only for block themes, it’s really also a great feature to use for non-block themes or as we sometimes call them plastic themes. And that’s already in 5.8, but I really found it a much easier way to switch off gradients, disable custom colors, orphans, disable Duotones with just a few lines of codes. What do you see here for 6.0 for the classic themes?
Matias Ventura: Yeah. Well, there’s a lot of refinements still to be done on theme.json, it’s an ongoing process, more things to control, more things to configure like we discussed. There’s some work going on Duotone, that still needs to be done like theme.json works, but the UI doesn’t necessarily work. There’s still the chance of making some of the… exposing some of the theme.json interface in, like the Customizer for classic themes or some other view, that’s something that would need to be explored because right now the UI for theme.json is global styles, which you get in the site editor, so there’s some work there to be done.
I think the thing that I’m most interested about for gradual adoption is, we managed to learn like this, we’ve been calling it the focus template part on the… sort of to refer to it somehow, which is essentially a view in the site editor that allows you to focus on a single template part, like a header part, or a side bar, or a footer or anything really that you can create. This view works with like the… it has responsive handles and so on. And it’s a nice experience just to deal with a specific part of the site, and there’s no reason why this cannot be open. In fact, we actually shipped some functions, some PHP functions to call one of the header template part or the footer, or some other template part in PHP. So you can use them in your PHP template files just fine. But what we don’t have yet is that if you do that, but you don’t get access to the site editor, there’s really no way for the user to edit the content of the template part.
So that’s something that would be nice to open up in 6.0. So essentially, if you have a normal PHP theme, you can use these functions and then somewhere in the UI, the user can go and just get this focus template part mode. So they wouldn’t go into the full-site editor, because that’s not how these things work. They would go into this focus areas to just handle blocks there. So it’s essentially a different kind of widget area where it’s visually rich and it’s visually more like what you see is what you get essentially.
Birgit Pauli-Haack: Yeah. It’s yeah, I understand that. So another item on your roadmap are the explorations on dynamic templates for blocks. That’s sounds really interesting. So what do you envision there?
Matias Ventura: Yeah, so this is like the other part is if say a theme wants to start adding some block templates, I don’t know. Do you want to turn your archive into something that’s editable or even vice versa? You have a block theme and you’re using it for a site, but you say you have like a, I don’t know, you’re running the New York Times and you have a specific page that is really dynamic and you don’t want it to be editing the site editors, so you end up using a PHP template for that, that sort of combinations. Because I think we’ve talked a lot about block themes and classic themes, that’s not really, it’s a very primitive split, like in reality, things are just very flexible and they will be more flexible. And that’s part of this gradual adoption sort of bucket, is that you can have some templates that are entirely dynamic like PHP driven, others that are configurable in the site editor and any mix in between.
It’s interesting to see some of the work that the WooCommerce team is doing, but I think there are some plugins as well that they, when these plugins that have a lot of templates that historically they were added as PHP templates that you could customize in a theme, but otherwise the plugin also ship some of them, that what they are doing is that they are wrapping some of the dynamic parts of these templates in essentially server render blocks. So you get like, you can edit the product template of a WooCommerce site, but maybe the templates, the part that displays products, that’s just driven by PHP. So you get a place called the render site editor, but you can customize around it. And once WooCommerce has the necessary blocks to represent that template just with blocks, maybe they update that. But it’s like, it shows sort of the flexibility of you don’t need to turn everything into blocks.
In some cases you might say, “Oh, like here, this is going to render a chart based on, I don’t know, the weather forecast or whatever it is, I don’t care about users interacting with this in any way in the site editor.” And that’s where you can let just regular PHP templates handle that part, but maybe the user can customize around that or the text above and below using the editor. All of those combinations I think are really going to become more prominent, because I think that cases where you just have a purely one theme in one site or the other are going to be, for some sites are going to be rare because you have different kinds of combinations.
Birgit Pauli-Haack: Well, that’s good to hear that there’s still a place for classic PHP themes, especially when you have complex sites because you, well, WordPress runs on PHP, but there are the hooks in to get the block part of it, and part of the template. That’s really interesting. Thank you.
Grzegorz Ziolkowski: Can you say that, like working in a similar way, how block patterns work? So, for the block themes, like the other way around, you can want, to port some of the functionality and then you would just wrap that into a pattern or whatever new we add. And then just take this snippet that’s generated on the fly with whatever you need and just get embedded into the template.
Matias Ventura: Yeah, exactly. It’s sort of like PHP Mbits in a way. And it’s like that the only traders is that you don’t get editing capabilities, which will be totally fine for many use cases. So it’s sort of like exactly the opposite of patterns in a way, it’s like a PHP Mbit that you don’t get the block interface for it because it doesn’t need to. It’s just like a single block that you can move around because it’s part of the block system, but you cannot introspect or edit its specific details. And I think that’s going to be like, again it’s very easy to create one of these PHP Mbits because that’s how WordPress works. So it’s just going to be there, it can be previewed, or you can show a placeholder, like that’s going to be, the options there are really wide open I think.
Birgit Pauli-Haack: So to bring it a little bit to the point of the controversy out there, or fear out there, the block themes actually are not getting rid of PHP developers. They actually give the PHP developers now so much more tools at the hand for flexibility, so they can really mix and match all the block parts into their theme. So I really love that idea and I’m glad that you’re here in the show to, going to set me straight and all my ideas and that, it goes really further. So then a lot of new features and enhancement in your preliminary roadmap, what are the highlights for site editor, layouts and blocks? And are there features you are particularly excited about the tiers?
Matias Ventura: Yeah. So in a way this release, I think I mentioned it, to me it’s more like the culmination of the phase 2. This is where we get to do at least the things that we set out to do. It doesn’t mean that it will be finished by any means or like that, we will continue to work on this for many years, but what I’m particularly interested about is going back to patterns and the things we can do around patterns, which we haven’t paid a lot of attention to in the… Like there’s been some work in the last couple releases, but since we introduced patterns there haven’t been like big major iterations on them.
And one of the key things for me is bringing patterns more into the template creation flow because blocks are sometimes a bit too granular for that experience. Like if you’re laying out a page or a template, you want to say, “Okay, I want to first define this header section, then this main section. Maybe with a sidebar, like this footer section or whatever is in the middle and so on when you’re creating a homepage.
So you’re really dealing with patterns first. And then maybe you’re tweaking the pattern with its blocks and so on. But you’re not creating from scratch like, “Oh, this is a group. And then this other group. And then this cover, and then this…” Like, that’s a bit too granular. Which can be fine for a theme developer, but for a user it’s really more about the patterns. Maybe even the patterns that the theme registers so you can very quickly piece together this sort of page.
And we don’t have… Right now, like patterns are there in Inserter, but the discovery is not super sophisticated. And from the canvas itself, you need to search for a pattern and so on. So it’d be nice if… And some of the proposals are that, if you’re in the root of a template, what opens when you click on the Inserter are just patterns. Like the quick Inserter that you get in between the pages, but focus on patterns and on sections that are… If you’re starting blank, the first thing is probably going to be a header. So we can connect that with a sort of semantic template parts, there are already headers and you can choose among these headers.
And if this is connected with a patterns directory, you can see among all the headers that are available in the directory as a starting point. And this could even expand to, you might be able to say, “Oh, I really like the header from this theme. And I want to use that.” And since everything is compatible, everything is just blocks, you’ll be able to say, “To explore and only see the headers from all the themes in the directory.” So you can pick one of those and then sort of assemble your site through those pieces.
So that experience is really what I’m interested about in exploring more. This sort of like section based building of site. And patterns are a key ingredient to that.
Birgit Pauli-Haack: Indeed, yes. There wasn’t a discussion of… That sounds really fabulous. There was also a discussion out there, is there ever going to be a way to actually save block patterns from the editor? So you design a certain way… Like you do with reusable blocks, that you can just highlight it, make reusable block, and then it’s available for every other editor. Can you also do this for block patterns? Is that on the roadmap?
Matias Ventura: Yeah, we actually had it in one of the plugin releases. I don’t know if you remember, but I think Ryad had done it, I think, right around the time of 5.0. You were able to both save reusable blocks and save patterns. You used the same mechanism, it was just, when you inserted them it would just do different things. Because it’s essentially the same, like you can insert a reusable blog and detach it from that sort of reusable instance and you get the pattern. So that was just the shortcut for that.
I think the tricky thing was that it was not clear when were you saving one thing or the other. And so it was more of a UX problem than a technical one. And I think that’s still the case. Now, that we have a proper… Because I think at the time we didn’t have patterns as a dedicated UI. So now that we have a dedicated UI for patterns, those concepts can make more sense. So it’s something to explore.
But I think we still need to do some work on this. Again, what does a pattern represent for sections? If you can say that a pattern has sort of like a semantic value, that it belongs to a header or a footer and so on. How does the directory react to that? Because we don’t have that layer of categorization in the directory right now that represents areas of the site. I think we need to do some work there to surface exactly what are the needs, what are the details? But yeah, it’s definitely on the table.
I think another sort of connected piece to this is that patterns can also be super useful for creating pages. So that’s something, like an additional… Like pages can sit between the regular post editor and the site editor, in the sense that sometimes when you’re building a page, especially like a landing page or something, patterns can be better than just blocks. In some other cases you might want just like, I don’t know, a blank page, I just want to write. But it’s an interesting… Pages, I think, provide an interesting place to sort of connect the two experiences. Like an experience more focused on pattern or an experience more focused on blocks.
Birgit Pauli-Haack: Yeah. And there has been almost immediately since the block editor came out, some of the plugins already provide kind of full page layouts that they have into it. So there’s quite a few things that will make it into core in a different way, probably. But… Yeah.
But I also see on the roadmap, there’s one thing, that is to use patterns also for transformations. So right now, when you add a pattern to a post, well, a page and it’s detached from it’s being a pattern. Yeah, kind of all the blocks are… Yeah. But if you want to replace a block pattern, you need to have it be together so you can replace the content immediately and all kind of things. Yeah.
Matias Ventura: Yeah. And this is also crucial for this. Like when we’re talking about the header area, that’s a very clear case where it should be possible to say, “Oh, I like this theme, but I want to choose a different pattern for the header.” And that pattern might come from the theme itself, or it might from the directory, or it might be something that a user created. But that experience needs to be possible.
For headers, it’s somewhat easier because the blocks, even the inner blocks are semantics. You might have a site title, navigation block, tagline, and so on, site logo. And these blocks are transferable between any… Like they just deal with data outside a content.
For generic patterns that are just like a combination of blocks, we had some explorations and we need to continue around like how can you map certain… Like, say you have a pattern with an image and you have… You could have multiple patterns that combine text and images, so you can transfer some of the content and see how it looks on different places. But the fact that you don’t have necessarily a container for the pattern makes it, in some cases, more difficult. You need patterns that are either already by default used in a group or stuff like that, so that you can manipulate them that way.
But I think it’d be interesting to consider this addition of like sections. So that you can treat the section and say, “Okay, transform all these blocks on this section to this other pattern.” And sometimes it might not be a one-to-one mapping. Like maybe there are more blocks in one pattern than another. And those things need to be accounted for. But at the very least we should… We have some stuff there that already works for headers and footers, but we need to really expand these and connect it with the directory and then see how that can of work on… Because eventually it’d be nice if you can just lay a couple paragraph, add an image, and then you say, “Oh, I really want to display this in a more interesting way.” That you can just multi-select the paragraphs and the image, and you will get options of patterns that use, at the very least, these amount of elements. Like these different part of an image but laid out in a different way. And that is where patterns can also be a transform utility.
Birgit Pauli-Haack: Yeah. It could also open up a lot of possibilities for plugins and themes, to actually offer all these different variations of things. At the fly, a user doesn’t have to know what they want.
Matias Ventura: Yeah, exactly.
Birgit Pauli-Haack: … before they scroll the patterns. Yeah, exactly. Yeah.
Matias Ventura: Which is really the limitation. If you think about it, that’s the limitation right now with pattern, is that you need to think about before you added your content. You need to say, “Okay, I want to try this layout.” And then you write your content. Which is fine in some cases, but in others you would be like, “Oh, I just want to get this content out, this image out. And now I want this to be a pattern.” So that should also be a possibility.
Birgit Pauli-Haack: Yeah. That’s how I produce my pages, that… So this is my content, how can I make it snazzy and all that? Yeah. Excellent.
Grzegorz Ziolkowski: It’s interesting that we are talking all those ideas. Like they are crazy comparing to classic themes, wherein you go to the theme directory and you check some tags. Like I want to have one sidebar, like one column, and the content inside and maybe some other characteristic, but that’s it.
And basically you just get a huge list of themes and you need to go one-by-one and like activate, check how it works. And here, it’s there. And on every template you can have like parts of different themes combined which have… Because of style variations, you can have unified look and feel. It’s like there are so many possibilities that that opens, which is like the work I think for the next 10 years, at least, just to explore all that.
Birgit Pauli-Haack: Yeah.
Matias Ventura: Yeah. I think, in…
Birgit Pauli-Haack: Oh, sorry. Go ahead.
Matias Ventura: No. Go ahead. Go ahead.
Birgit Pauli-Haack: Yeah. So if your listeners kind of… The mind is blown. Let’s hear what Matias has to say about the decoupling of templates from specific themes. That opens it up really wide.
Matias Ventura: Yeah. I think it’s really the, sort of in a way, I think the topic of 6.0 is going to be to unleash some of these restrictions that for now are like self-imposed. Right now when you switch a block themes, your template parts and all of those things don’t carry over, your global styles don’t carry over. This is just like an artificial restriction. Like there’s no… Like it’s completely viable. And it’s part of the goal that those things do transfer, if you want them to. Like if you want to switch things but retain your header, like switch things but keep your global styles, or like try different layouts but keep your styles, or just change your styles. Like there’s many combinations there that should be possible.
So it’s really about unrestricting these things and decoupling the templates from the theme. Like you can combine from different themes. You can create your own and transfer. Maybe you really like how the block archives from a theme look and you want to just install that and keep everything the same. All of those possibilities are really there. Like right there.
We need to formalize the user experience around it and remove these restrictions that are really, right now, are keeping things more familiar to how things used to work. But part of the cool thing is that, now… The way I see it is that, all of these themes, all of these types of themes are compatible with each other. Like the theme JSON, just works in any of these themes. The templates are just blocks, they can be combined, they can be composed. So that part of compatibility is really what I think is going to be the biggest area of exploration that we have ahead.
Birgit Pauli-Haack: And always keep in mind, don’t get scared that all will be locked down again after it’s all over.
Yeah. So you had also quite a few things that you envision for the editor in 6.0. What stands out for you? Some of them are really pushing the experience further, but are there any, I say, new things? Or what stands out for you?
Matias Ventura: Well, I think like for the… There’s a lot of work that needs to be done to improve the template browsing experience. Even there, there are some restrictions that we impose that are artificial. Like when you create a new template, you can choose from an archive, single page. You have a few options. But you don’t have all of the options that WordPress should allow. You should be able to create, I don’t know, a specific category page for a specific category that you publish, like your travel category.
All of those things are, again, at the tip, it’s right there to do, we just are not exposing it properly. And we need to work on that to make that more viable, because that’s also something that unleashes a lot of that kind of power. Like maybe, you just install a theme and you say, “I want to modify a bit like my category page for this specific category.” You can do that right in the interface, or for a specific post type or for whatever it is. That’s something that needs to happen at the editor UI level.
There’s also some work around the three main ingredients of the site editor, like the global styles, the templates and the navigation. Those three elements, there’s some design explorations about how to better communicate this sort of hierarchy. That these are important and you can access these in this way.
For the navigation it’s important because you might have like a collapse navigation behind like a hamburger menu or whatever. And you shouldn’t need all these clicks to get to your navigation. There should be a way to just see the site structure without having to interact with a template that has a visible site structure. You might even have a site that has a hidden site structure. Like it doesn’t render a menu, but it has subpages and permalinks and so on. So you still need access to those kind of things. So that’s part of the editor work that needs to happen.
There’s also some that didn’t quite make it to 5.9, but it’s already in the plugin now, the style variations. Being able to switch style variations on the fly, that’s going to be really powerful. Especially right now, again, we’re restricting what you see to what is bundled with a theme. But there’s no need to do that. You could just go there and open like a style directory, where you see styles from all of the themes and you pick whatever you like. And it doesn’t have to be bundled with the theme, you can just access that from the directories.
So a lot of that work on the editor itself is essentially like managing how we open up some of these options and how we manage the access to them.
Birgit Pauli-Haack: Excellent. Excellent. Now, in your roadmap document, there are also a few things that are… Regarding for blocks. Blocks were, it’s kind of the first phase of things, but they always have been evolving. Are there anything that you like to point out and where you want to talk about?
Matias Ventura: Yeah. Yeah. I think in a way, I think we got to a point… The cool thing about, also, the 5.9 release is that now blocks are everywhere. So any improvements we do to blocks are just improving things everywhere. So any improvements we do to the UI, to the interactions, to all the things that… Some of them are still not quite there, we need better interactions across the board, but those benefits just compound because they just affect everything now. The investment we do on blocks it really scales really well, I think to the…
So I’m interested in the… Obviously, we need to continue to improve the navigation block, which is one of the most complex in terms of interactions. And we’re going to get a lot of feedback now that it’s out there, on the things that are confusing or too hard or tricky to do. We need to improve how plugins interact and extend this.
Again, to use the example of WooCommerce, if you want to add a cart, how does that interact with the block? How do you show it there? Like WooCommerce is already doing stuff, but it’s a bit idiosyncratic. We don’t have proper APIs really exposed for people. Like we have the APIs, but they might not be the most ergonomic. So we need to think about those things. How can a plugin target a specific area of a template to add a specific block?
And then what happens if the user moves it elsewhere? Which is part of the interesting thing, like now users are not constrained to where a plugin decided to show. Like sharing buttons. Maybe the user wants to move sharing buttons to the top, or to the bottom, or below the comment stream or wherever it is, they are able to do that. But the plugin also needs to be able to give like default specific location. All of those things are related to the blocks and the block’s APIs that we need to explore.
And then I’m also interested in like some basics. Like we have some restrictions on quotes, on lists where you cannot nest like more than paragraph blocks inside. But it would be nice to just get rid of those, like improve them. We have the signs for the table block also that are really nice that we need to get through. We have a bunch of blocks being developed for handling comments, as well like in themes, like how to lay out the comment stream and so on.
So it’s really continuing to improve everything around blocks. I think, maybe one really important highlight is probably allowing the feature image to be used in like covers.
Birgit Pauli-Haack: Yes.
Matias Ventura: That’s one that we really need to get to. Like we wanted to do it in a way that was very… That allow not just the cover block, but essentially like media and text or groups or anything else that you could deal with. And also third-party blocks. If a third-party block wants to say, “I want the user to be able to use the feature image here.”
But trying to solve that in a very generic way, I think is also blocking. Not having it on covers, which is really, like it would be really powerful today. So maybe we should just need to make it available on covers while we figure out how to make it available everywhere.
Birgit Pauli-Haack: Yeah. The hero image kind of design for a post and pages is certainly something that had a great majority of themes and that is still not available. Yeah, I also like the media and text for post query loops, yeah, where you have the featured image on the left side and then the text, the headline or something on the right side. I know that, for instance, the New York Times actually has that pattern. Yeah.
Matias Ventura: Yeah. I think yeah. I think that one in a way is a little less pressing, because you can achieve essentially a similar layout to media and text with columns, so you can just use the feature image block there. But it’d be nice if it just worked with, it’s simpler to get the media and text.
You can also replicate media and text with patterns. So there can be a lot of like post query loop patterns that are just about that, so it’s a bit more flexible. But the cover is really like, you cannot replicate it without….
Birgit Pauli-Haack: That’s right.
Matias Ventura: So that’s probably like the biggest quality of life improvement if we can do that.
Birgit Pauli-Haack: Yeah. What’s still missing in 5.9 is… And there were some attempts to get it in, but then taking out as the typography for blocks and selections. Was that kind of stifled when the release team kind of decided to take the webphone’s API out from getting into core?
Matias Ventura: Yeah. So there are a few pieces. Like the typography tools did make it into 5.9. The typography tools are all there and they’re connected within JSON and so on.
We don’t have the Webphone’s API. So to add like new phone, families and local files and so on, that’s going to be a big part of 6.0. And also the other thing that we didn’t quite get to is, like better handling for responsive phones, essentially. Being able to pick a size, but allow it to be modified properly in the different context. A theme can do that with functions and so on, but the end user cannot. So integrating that better into the interface is part of the exploration.
The tricky thing there is to not be overwhelming again. They can be really… A lot of these concepts can really be difficult to process, to interpret them, to understand them. So the more we can just make it work by default. And then if you really know what you’re doing, you can dive into more specific options. But otherwise, just trying to make it work.
This is also super important for patterns because patterns can be inserted in different context. Maybe you insert a pattern in a narrow column. Like what happens there? We have some allowances there to say, what is the desired width of a pattern, so that we can filter them out. But still, a pattern might be the sign… It needs to be the sign in a flexible context because that’s the nature of the web. And a pattern cannot supply custom CSS, so it cannot supply media queries or anything to handle that.
Also, media queries wouldn’t work there because it doesn’t depend on the view. It going to depend on the container. Maybe content queries could work, but what we’re trying to do is to embrace more of these intrinsic web design principles, where you just define the properties of the container, how it should cascade, how it should be modified by the… And that also applies to phones. And now CSS has those tools so we just need to find ways to incorporate them in ways that make sense, like good defaults. All of that is going to be very important.
Birgit Pauli-Haack: Yeah. Responsiveness is still something that’s kind of missing throughout the whole blog editor universe. But I see that that is definitely a focus also for 6.0.
Matias Ventura: Yeah. I wouldn’t say it’s missing. I would say that we have like the very early steps towards it.
Birgit Pauli-Haack: Sorry.
Matias Ventura: … we do have like… No, because the column block does handle. Like when you collapse it, it collapses like the… I saw there was a video that a designer shared with like, just building a theme from scratch. And what they build just work by default on mobile.
What you don’t have is like really granular control over things. And that’s what we, it would be nice to expand. But at the very least, things flow generally well, if you’re using the row container. All of those flex containers just generally work. The same with the navigation and collapsing into the hamburger menu or giving you those kinds of options. I think there’s going to be a in part, little work of exploring when some of these tools need to exist on a specific block, like the navigation. And when it’s a property of the containers and more broadly that, those kind of cases. Yeah, and I think always, eventually you always have the route of just adding your own CSS and media queries. That’s also important to highlight. That’s not locked away. A thing can always add extra CSS if they need to.
Birgit Pauli-Haack: Yeah, definitely. Definitely.
Matias Ventura: It’s always an option.
Birgit Pauli-Haack: Yeah. But you have that not only the separation between users and developers now, you also have the separation between a user and a designer who wants to use the site editor without touching code. So there is that granular … So responsiveness needs to happen everywhere for the user, but when they change something, it needs to happen also. So there was one bug that exchanged or illustrates that, is the featured image and the query block is all responsive, but when you change the size of the feature image, it goes outside the narrow container. Yeah. So, but I can see a user just change the size of it. But it’s not, it needs to be caught, so it still is responsive when it’s even smaller.
Matias Ventura: Yeah, I think that’s a great example of how we need to make blocks really resilient to these changes and then sometimes wanting control over how these things flow, is because the blocks have bugs. And if we fix those bugs, the need goes away. So that’s a good way to say, “Okay, we don’t overwhelm people with options. We just fix the bugs.” And most of the time things should work. But it’s a great point that also, again, the audiences are really expanding. Now there’s this new … Designers can now design a full theme using the site editor. That’s a new use case for WordPress that we need to … And again, these are users, just as an end user that is just using a theme is a user. There are different levels of users and builders.
And I think that’s the beauty of WordPress as well, is that maybe you start as a user, but you start using the tool and you have a good eye and you develop and you have some design background. And then you start doing that for others. And so you become a designer of block themes because the tools allow you to ramp up slowly. I think there’s a lot of gaps there, because you can go from just a user that likes to write on their site, to someone that’s creating blocks. There’s a lot of things in between and a lot of ramps up that people can take. I think that was a cool thing about the query block, which is an advanced block into like … You need to understand again, what is a query, what is being queried, what are these objects and posts and so on? But it can also be a ramping point to understanding how the software works, which is also part of the mission of WordPress which is given not just the tools, but the access to the software, people.
And that means that understanding how things work, being exposed to some of these internals, sometimes just in the UI, like the query block, you don’t need to dive into code to start understanding that. But if you play with a query block and then you see a PHP query, there is going to be a degree of familiarity with how things work, what it does, that is going to connect some dots to people. And it can become a ramping point for someone that wants to become a developer or wants to become a designer and so on. So I’m really excited about those sort of gaps in between. I think we need to do a better job at providing, ensuring that there’s no … That there are actually ramps and not cliffs. So if you start, want to go from creating patterns in the UI to creating a block, right now, that gap is too big. You need to go from using an intuitive tool, just with a graphic UI, to now opening developer tools and installing packages and stuff that you don’t really … The gap is too big.
But I think we can think about ways that, “Okay, what happens if you start using the HTML editor first as a way to define how a block works? What happens if you can export that code that you’re editing into a bundle of files. And then you can see your JavaScript files for the first time from what you did, and you start connecting some of the dots?” I think there’s a lot of possibilities there even for education and learning and teaching.
Birgit Pauli-Haack: Yeah. Same thing applies to theme JSON. How easy can you change just one thing? And you see it immediately. There is no build, there’s a build step, nothing. But you just add the text point in the text editor of the theme, JSON, and you see it immediately, if you change your color or an underline or a font. Yeah. So I really like that as well. All right.
Grzegorz Ziolkowski: So in fact, there is a build step, but it’s invisible for the end user, because it happens on the server. But that’s the goal. This is what Matias is talking about. So, that’s the thing that needs to happen. It’s still there, but it’s hidden and you can unwrap it as soon as you progress with your learning of programming concepts.
Matias Ventura: Yeah. And that’s also why the exporting is also so important. You should be able to export your global style settings and see that theme, JSON. Maybe it feels a bit alien or you don’t understand what’s going on, but it’s there. You can do that. You can introspect the internals of how the software is working. And I think that’s important to give that visibility. So ore ways to export and also to import, transfer things to other sites and so on. All of that I think is important.
Birgit Pauli-Haack: Yeah. And some of the things are already exportable and some of them will come in 6.0. And I think that’s one. So yeah, I’m really excited about the next version, which I see is scheduled for something like end of May?
Matias Ventura: I think so. Yeah.
Birgit Pauli-Haack: Yeah. Two months before is beta. So it’s going to be in April pretty much. Yeah. Beginning of April, we probably know what’s going to come in 6.0, and I’m really excited about that. I know that quite a few pieces have already been finished or are not finished by any … Nothing is ever finished. But it will be, the first version is already in the latest plugin. So if there’s anything else you want to add to 6.0 topic or you, Grzegorz, I would want to move to the plugin release so we can go through the change log. Do you have any … Yeah. Okay, so let’s get started.
Matias Ventura: Yeah. I think the only thing that I would add is that this now it’s an interesting part where we need to listen to a lot of the feedback. And that kind of feedback would come in many different ways like from hosts, from agencies. All of that needs to be … We’ve been developing this for a while, but the reach again, the Gutenberg plugin I think is around 300,000 installations, which pales in comparison to how many times was 5.9 downloaded, I don’t know, five minutes after the release. So now we should be getting a lot of feedback that we need to process and incorporate into 6.0. So I think that’s the other understated thing from the preliminary roadmap, is that it is going to be influenced a lot by this feedback.
Birgit Pauli-Haack: Yeah. Is just looking at the stats? It looked like it.
Grzegorz Ziolkowski: Oh, yeah.
Birgit Pauli-Haack: First of all encounters.
Yes, 5.9 has been downloaded now 16 million times. Yeah. So it’s in a lot of people’s hands, if they want to explore it. Of course, nothing happens when they don’t have a block theme. Enable it right now. All right.
Grzegorz Ziolkowski: For WordPress, just to give the reference for WordPress 5.8, it was over 100 million downloads.
Birgit Pauli-Haack: Yes.
Grzegorz Ziolkowski: And it’s only for the use case, when someone goes to the website and clicks the download button, because you can also get installation from the host or whatever else, which isn’t counted.
Matias Ventura: I think it should count how to install. I think how to update.
Birgit Pauli-Haack: Well, it counts to downloads. So if you have a client, if you have an update button on your website, 6.0 is out, click here to update, that’s the download. That’s also the WPCLI downloads that happen and updates, or when you have a manager like Main WP or Managed WP or Google, GoDaddy’s managed tools, they download it all to your site and those downloads are counted. Yeah. I don’t know what the hosts do if they just deploy it from their own sites, from their local CDNs. But yeah, we can find out.
Matias Ventura: I think it depends.
Birgit Pauli-Haack: 108 million downloads was really big. Yeah.
What’s Released – Gutenberg 12.5
All right, so this week’s release was organized by Fabian Kagy and who was in our last episode as a guest. And he also prepared the release notes on the make blog. So Grzegorz, do you want to lead us into what’s new in Gutenberg 12.5?
Grzegorz Ziolkowski: 12.5. Yeah, so we already mentioned some of those things like Mattias talked about, switching global style variation. So that’s the new feature. So maybe Mattias, you could just explain was why it’s so huge.
Matias Ventura: I think it’s a pretty packed release in terms of features, going back into the pace of especially after a couple releases, being more about stabilizing things for 5.9. The style switcher is probably the most exciting, the ability to just on the fly, change theme, JSON. And again, if you think about all the things that theme JSON can do, because it’s not just colors and fonts, it’s also each aspect of how a blog is displayed. You can change how quotes look, how different blocks look and package that into these theme JSONs. So changing theme JSON can be as drastic is changing a full theme, but it’s just a quick click away. You don’t need to install or download anything. It’s just a theme JSON file. And this is just the initial UI. I think it’s important to get it there, but it’s going to be more exciting when we start sharing things between themes, because it will also force to establish some more, either conventions or good practices for how we name some presets or colors, which have been ongoing conversations. I think we need to start establishing some of those.
Birgit Pauli-Haack: So how would a theme developer enable his theme to switch out variations?
Matias Ventura: I think right now, you add a folder called Styles and you put your theme, JSON files inside that folder.
Birgit Pauli-Haack: So you have one theme, JSON, the main one in the root directory and then you have Styles folder and have multiple theme JSONs that you name differently, so they’re not already … Okay.
Grzegorz Ziolkowski: Yeah, everything magically happens behind the scenes. The user goes to the editor site, editor page and then just goes to where the global stars are in the sidebar. And next to the currently selective variation, you will have link saying other variations. You could select that and you can just preview all other variations and pick with the one that fits better for you.
Birgit Pauli-Haack: Yeah. Kael had this in some of his videos, he that, how 2022 changes dramatically when it just changed the style out.
Matias Ventura: Yeah. We have it in the main video for 5.9. It’s a tease towards the next … The variations exist. I think they are available somewhere, but you cannot switch between them with the UI right now. If you install the plugin, you will be able to do that. I think the aim is to have the bundle with 2022, these variations, so that you can … And in 6.0 just with the same theme, you can get these very different looks of it. And it’d be nice if as a community in general, we need to start thinking about how to bring this into the theme showcase and directory experience, because you should be able to browse the directory and say like, “Oh, this theme, but with these other styles”, or be able to browse that and get that dynamic impression of how everything can change. We need to really think about the experience around that.
Grzegorz Ziolkowski: Yeah. You use, preview the theme inside the directory and just applies everything on the fly. So you see how this site looks with this theme active. That would be great.
Birgit Pauli-Haack: Yeah.
Matias Ventura: It’s also cool, even the other way, because you can imagine sending your theme JSON, so that you can preview patterns with your styles. You can browse the pattern directory using your own site styles so that you already know how it’s going to look, because the theme JSON is really easy to transport. You’re not installing or executing any code.
Birgit Pauli-Haack: Yeah. The theme directory, Munir Kumal actually, has a few different ways to showcase the theme directory on his Gutenberg hub. And I think there’s a lot more discussion to be happening to actually enable that what you had just said, about the styles to the changing. So yeah, what’s also now in 12.5 is that the code editor is now also available for the site editor. So if you want to tweak something on the code or some attribute or something like that, you could now use the code editor in the site editor as well. That also is in the … We also mentioned the featured image in the query loop, but the vision that we had with the cover block, it’s not yet there, but it’s now, at least the size, the actual, so the controls are now the same for the placeholder, as well as the featured image. And there’s also now a size selector in the sidebar that was missing before.
Matias Ventura: Yeah. I think that exposes a lot of the generated thumbnails that you might have for a feature image, which was again, another feature gap that is being overcome. And this is really the spirit of the focus on blocks, is that again, we can improve shows the feature image, and it’s going to improve all the themes, that are using this block. And so that’s really when you start seeing these compound effects, of just improving these block, just improves all the themes.
Birgit Pauli-Haack: Yeah, also has the danger that it also breaks themes.
Matias Ventura: Oh yeah.
Birgit Pauli-Haack: But yeah, so I don’t want to belabor that right now.
Grzegorz Ziolkowski: In general media, it was very tricky in context of the query loop, also how there’s authors, because there also could be something missing, so we need to have a fault for that. So I’m great that this is worked on, and finally there is a workaround when there’s no data. Yeah. I guess for features that’s basically that, and we also have a list of 14 enhancements.
Enhancements
Birgit Pauli-Haack: Well, there are more. They’re only block library.
Grzegorz Ziolkowski: Only block library as usual. For the query loop, there were multiple other changes. So now this is really exciting that you have better filtering options. So before we could also pick one author, now we can select a few of them, which gives you more options. And the other thing is you can use taxonomy. So that’s even powerful because taxonomy is that everyone has a lot of them on their site, and they just can narrow down the results to some of them and combination of them now.
Birgit Pauli-Haack: Yeah. You can have multiple sections on your website and just show particular categories, and then style those images. Yeah. We mentioned that two weeks ago that it’s in the works. So I’m thrilled that these enhancements now are in the plugin and there were also some transform … Now you can transform the core site logo and the core site title, transform it. So if you have in a header, you use either one of them and then you can just transform the other one. You don’t have to delete them.
Grzegorz Ziolkowski: This one is a bit controversial because it’s not a real transfer, because there are separate blocks and they have different data inside. However, the use case is pretty valid, because it helps you much quicker to craft your header.
Birgit Pauli-Haack: Yeah, it’s easier because there’s only one click away. If you want to do it just with blocks, you have to remove the older block and then you need to add another block. So it’s a lot more steps. So that’s why I think it’s a good thing. And now you also can have text labels on your hamburger menu or as the techies call it, the overlay menu. So you can point people to the hamburger menu and say, “Here is my menu”, because it seems to be still after, I don’t know, 15 years of mobile website, still a handicap, that people don’t know how to find the navigation of a site on a phone. All right, then the next thing that I see is the and selected states for the palette editor. And I tried to test this, but I think there is a need that the themes actually need to switch in, as opt into that, and also offer the switch between the two and the colors for that. Well, how does that work?
Matias Ventura: I think this is just about the UI elements. They didn’t show you when you were hovering, more focusing. It’s not about changing the hover and focus.
Birgit Pauli-Haack: Okay.
Matias Ventura: I think it can be a bit misleading if you read the entry.
Grzegorz Ziolkowski: Yeah. So the use case, when you have a blog that has not only text color balance, or background color, lean color, and there is … Can be now even more of them. And when you hover over it and there is this model or overlay popover maybe, and which allows you to change the color, in the past you have an indicator, which one you are editing, so you could get lost easily. And now it’s fixed and you have this hover effect and you know what you are doing.
Birgit Pauli-Haack: All right. Yeah. I totally got it mixed up with the other feature that a lot of designers actually need hover space for the buttons and that’s not working it.
Matias Ventura: Yeah.
Birgit Pauli-Haack: All right. But that’s coming. Yeah. I saw a PR for that, I think. Yeah. All right. Well, I’m glad that this was changed. So we have the post block modal for the site on the post editor?
Matias Ventura: Yeah. I think this is just improving a bit the display of the … When you open the editor and someone else is editing there and you get this, the takeover screen, it can now show you who is actually with the Gravatar and so on. It’s a nicer design of that.
Birgit Pauli-Haack: Yeah and the message also has changed. It actually tells you, “You’re not kicking them out and all their work is destroyed. Now telling you, “Yes, their content will be saved when you kick them out.”
Grzegorz Ziolkowski: Yeah. That’s a temporary measure until we go to the phase three of modern work, which is collaborate everything.
Matias Ventura: Yes.
Birgit Pauli-Haack: That a bit of way though. So I’m glad for the current fix or …
Matias Ventura: We’re all looking forward to that, like you said.
Birgit Pauli-Haack: Yeah.
Matias Ventura: It’d be nice to wrap up the phase two and start getting into those.
Birgit Pauli-Haack: Yeah. But you’re not done. Nothing is ever done. So there were some changes to the buttons block? It preserves the styling of the adjacent button when you add a new one. This is actually a nice interface to….
Matias Ventura: Yeah that’s really nice. Before, if you had these, I don’t know, a list of buttons and you had customized them all with gradients and border raise or whatever it is, and you would insert, wanted to add a new item, it would just look like the default, so you need to do that work all over again. Now it just inherits from the neighbor. So it really speeds up. And it’s a nice again, quality of life improvement there. It’d be nice I think, if it also points out that we need better tools for modifying how all the buttons look at the same time, in a group of buttons. You can, maybe it’s through multi selection or by selecting the wrapper, or even by selecting a single button and having an apply to all thing. We need to explore some options there too.
Birgit Pauli-Haack: Yeah. Good thinking. Yes, and what I consider a quality of life change as well is the identifying the side, front page, in the link UI search results for the navigation block. So you see which one is the homepage because not all the pages are … Yeah, from general settings, we can switch to a page as a front page, but in the list, they might have a different name. You don’t recognize that. So this is really nice to have.
Matias Ventura: Yeah, and the cool thing is that it just works on all the link UI. So it should work on buttons, on inline links, on the navigation block and so on.
Grzegorz Ziolkowski: Yeah. And there’s also, in addition to the site editor… Actually, this feature existed before, for the post editor, which is copy all content, which is added to the menu that can be opened in the header on the top right side. It just takes all the content and you can apply, paste it to another… Tap, just copy to other site or whatever. You can also save it to HTML file and just start creating your own template and theme-based on templates. Some of those features that we discussed, they are possible. You just need to use low-level tools that are out there. In fact, you could do that, also by using select all keyboard shortcut and selecting all blocks and just using copy shortcut, which is common-c. That would also work. It’s just more convenient way of doing that.
Birgit Pauli-Haack: Yeah. But for that, what you said with the control + a, and control + c and b, wouldn’t you be in the code editor to actually do this?
Grzegorz Ziolkowski: No, not necessarily. No, yeah. But you just need to have one of the blocks selected, so the selection can be expanded on that.
Matias Ventura: The first common-a selects the whole block. And multiple common-as expand the selection.
Grzegorz Ziolkowski: Yeah, good point.
Matias Ventura: But it’s a good point that the discoverability of these things is not always great. So I think there’s, it would be nice if the first time you press control + a, there was a snack bar notification or something at the bottom that says, you can select all, even an actual link that allows you to select all by clicking the UI, or that tells you if you press more common-a it will select all. The same with copy, we have the… If you just have the cursor on a block and you press control + c, it will show up, the entire block has been copied, but there could be also an action there in that notification that says, I want to copy all. Because that’s, it can be a more contextual way to surface that copy all tool that otherwise people might not ever discover in the ellipsis menu.
Birgit Pauli-Haack: Good point.
Grzegorz Ziolkowski: We need some sort of gamification system. Once you unlock all of those features, you just get some badges or something like that. So you know that there are some hidden gems you still need to discover.
Birgit Pauli-Haack: Absolutely. If I don’t know that there was a copy all content, I think there are a few people out there who also didn’t know that, but I can… That’s a good point with… Gamification sounds a little buzzword-y, but it’s have context sensitive additional ideas presented. I think having a standardized way to do this before anything happens in that way would be really helpful because as soon as is extensible, some other plugin developer might get some idea to put some notes in there and they definitely need to be…
Matias Ventura: It’s also related to the tips system that we have. We had this rotating set of tips that used to show in the inserter. Now I think we have the… Because the site editor now has a loading stage and it takes a bit of time. It’s a good place to show some of these tips, while you’re waiting for it to load it can tell you, did you know that you can copy all content on this? Because you’re forced to be staring at that screen in a way, and it can be a good place to rotate some of these tips.
Grzegorz Ziolkowski: And I’m also convinced that it’s a good moment to teach people how to use software because they’re frustrated, right?
Matias Ventura: That’s what games do. And it seems to be working pretty well.
Birgit Pauli-Haack: But that’s also some software does. When there’s something going on, it’s like, do this, do this, so you can do this.
Matias Ventura: We have the tip for the slash inserter, because otherwise it’s very, also, hard to discover, but that’s also a good one. And there were many more like that you can press space to indent, a list if you have the cursor at the beginning, those kind of things that are not necessarily obvious.
Birgit Pauli-Haack: I get a lot of… I do this on Twitter, I think every two months or something like that, somebody tweets, oh, I hate it that I can’t do control + h2 or something like that to get a header in. It’s that, and recently there was one person who has a process where they have to change, coming over from Google Docs, they have to change all the headers, 60 of them into h + 3s. And he was going in there and doing that with the toolbar, and I showed him that it just put the cursor on the front of the line and hit three pound signs and space, and then it’s already a… So he doesn’t have to select anything, so these are really cool tools. Yeah, Greg, you could have used some of that teaching moments for the create block scripts when they were waiting to download the node modules, but you took it away because now it’s only one minute and 30 seconds to get your block created without downloading all the scripts and files. It’s really cool. Just pointing that out. All right. What’s next?
Grzegorz Ziolkowski: So there is one interesting feature, for the color and the panel that has it. Now when you pick a color, you can also apply, it’s very technical name, alpha channel, which translates to that you can make parts of your blocks transparent. Which is pretty exciting because in the past, every block you would have to apply separate feature, like the cover block, for instance, you could make the background transparent, but now it’s just next to the color we are picking. So this one is really cool.
Birgit Pauli-Haack: Yeah, that’s exciting. Especially when you have something on top of the cover block and you want it a different color, but just to let it stand out a bit, with borders. That is really cool, I like that. There is also something for REST API? Grzegorz, can you explain that a bit?
Grzegorz Ziolkowski: Yeah. There’s an API that runs behind the scenes for the new style variation features. So it’s nothing fast. It’s just something to make it work.
Birgit Pauli-Haack: But that would also be something that a plugin could tap into later on if they wanted to change, here I have a plugin where you can make everything that you have in yellow, change all the variations. Okay. And the next one is that you now can tell the local environment wp-env the installed path, on the command line. That’s cool, otherwise, before, you had to navigate to that directory where you wanted to do that. I find that it’s really important that there is now the classic menus into the menu switcher, because that should probably be put back to 5.9 because that’s a missing piece for the navigation block in 5.9. And also they always allow accessing the post type for the navigation page, so they can actually change some of the navigation.
Grzegorz Ziolkowski: But I guess you need to know the URL for the post type to get there, right? Because it’s not something that is exposed by default. I mean, you can do it yourself with a plugin.
Birgit Pauli-Haack: Right. This wasn’t so much about the post type getting to the page. It was more like when you are an administrator, it would show you are not allowed to access that page. So it didn’t consider the administrator’s high privilege. Overlord position. So, even if you wanted to go there, you couldn’t do anything there.
Bug Fixes
Grzegorz Ziolkowski: I just wanted to mention that we are now in the bug fixes section. The last two items.
Birgit Pauli-Haack: Right. I skipped over that. But, yes?
Matias Ventura: These are part of that gradual adoption, as well, is how does… Which, we still have work to do. How does a classic theme get some of these new benefits from the navigation editor, UI, and screens and so on. And this one is one of those, I think it’s related to accessing this page from a classic theme as well. Again, these are going fast in 5.9.1, but otherwise, bigger improvements are going to be landing on the plugin.
Birgit Pauli-Haack: Of course. But because it’s a bug fixing section, those are things that were surfaced very early last… Between the release and now, and the fixed merge, so this is definitely going to be in 5.9.
Grzegorz Ziolkowski: And, speaking of classic themes, there is also fixed dual-tone feature. So it works properly in those scenarios like we discussed when you just embed, for instance, header and footer, which is blog based. And then you can use those features and now everything should be correct.
Birgit Pauli-Haack: Now that works again in classic theme. These were the bug fixes that stood out to me. Anything else you wanted to discuss there that needs to go into 5.9 or something else?
Grzegorz Ziolkowski: No.
Birgit Pauli-Haack: If you’re interested in all the bug fixes, definitely go to the release notes and the changelog and look through, if you find yours. There is also a project board and a Gutenberg repo on GitHub about what goes into WordPress 5.9. So you can see what is actually slated for the next release. Then we go and skip over the performance section and land at the documentation section.
Documentation
And there have been quite a few updates especially to the glossary. Now there are a few new terms come with FSE. So we definitely need to update that. There’s also a new documentation page for the use look edit context hook. What is that about?
Grzegorz Ziolkowski: I would have to check because there are so many hooks that are in a very similar way.
Birgit Pauli-Haack: But if I look at that, it only adds a short description of what that hook actually does. So it’s in the documentation a little bit clearer.
Grzegorz Ziolkowski: Yes. It wasn’t documented before. But it’s something that, you can use this hook when you are writing, edit implementation of your block. So you are a block developer, then you might want to use that hook when you have a nested component and you want to use the same properties that I exposed to the added function. So it’s basically nice shortcut.
Birgit Pauli-Haack: Excellent. Thank you. And there’s also documentation now for the version 1 versus version 2 theme JSON documentation. There were multiple questions, the people that use the theme JSON version one after 5.8. What has changed for version 2? And now we have an answer to that. There is a document that experimental selector requires server side block registration.
Grzegorz Ziolkowski: This one is tricky because, like everything that is prefaced by __experimental in general, shouldn’t be used or is discouraged for usage with third-party plugins. However, we know that people are doing that, so this is just clarification so people know what they’re doing. I know that people use very nice patterns that they just guard those features so they’re prepared for the case when this is renamed in the future, which is fine. And if someone wants to use it this way, it’s okay. But it is very important that many features for global size need to be required for the block to be registered on the server, because the processing requires many of those characteristics of the block. And for the theme.JSON, I want to just make it clear that it’s not that you necessarily need to be on version 2 already. It’s just, this documentation helps you to move if you or were adopting very early and you have version 1, it’s just all the names that you need to change to be on the latest one and to also take advantage of new features that are there.
Birgit Pauli-Haack: Thank you. Yes. Just a little caveat that __experimental means no documentation, no backwards compatibility, use at your own risk. And it might break.
Grzegorz Ziolkowski: And here we are, it’s documented.
Birgit Pauli-Haack: Well, it’s only that if you use it, but yeah. It can change any moment now.
Matias Ventura: It’s an interesting dynamic because we also want to get feedback on this, so it’s a dynamic of not encouraged to use, but also, the feedback is needed, otherwise it would never become a stable API.
Birgit Pauli-Haack: Exactly. But I think we need to be much better in documenting things like that if you want it to be used. You get really into the trouble when you are not making them backwards compatible, but that is also, it’s a new feature, or a new thing. You don’t want the technical legacy of backwards compatibility attached to it before it’s even released to the user. So, it’s a conundrum. Yes. I agree with that. What’s next on our list is code quality.
Code Quality
Grzegorz Ziolkowski: Yes. There were a couple of changes that… Escape, some of the properties it’s just for, more the hygiene, than there rather is something that was wrong. Some of them led to unexpected bugs. Some things were double escaped because of that. We always take care of this type of work and making sure that there’s, sometimes you prefer to be more secure than you need to be, just to ensure that we don’t have to patch that later.
Birgit Pauli-Haack: Yeah, but one I want to point out was allow for HTML in the title, I think. That is from the beginning of WordPress. Some people put additional HTML wire plugin into the title and that was temporarily removed. So it’s coming back. So don’t fret, but I need to see if that’s going back into 5.9. 5.9.1, sorry.
All right. I don’t have anything else that I see there. We seem to be on the end of going through the changelog.
What’s in Active Development or Discussed
In the section of what’s in active development, or discussed, I only have one thing that I want to point out, that is, I heard from a few designers that they’re missing the hover, focus, active states. And we talked about it. I have in the show notes, then the issue that Kjell Reigstad who is the designer on 2022 has created an issue where the discussion happens. So if you are really interested in that and you have some time go and chime in on the discussion, because that’s the next stage, how that is going to be handled. All right? Yeah.
So I think with that, we all have a wonderful show today with new things, back things, old things, new things. It’s really cool. And thank you so much for joining us Matias. I had a wonderful time with you discussing all the things. Is there anything that you wanted to say, a last word that you didn’t get in because we were all talking?
Matias Ventura: No, not really. Just thank you very much for having me back after all these years, it’s fun to discuss these things, to both celebrate the work done so far and to look into the future, what’s coming. Just really happy that 5.9 shipped and that the work continues with 6.0.
Birgit Pauli-Haack: Wonderful. And if people want to get in contact with you, what is the best way to do that?
Matias Ventura: I’m usually hanging around slack. You could also find me on Twitter. I think it’s matias_ventura.
Birgit Pauli-Haack: That’s right. That’s correct. Yeah. All right. Okay.
Matias Ventura: Oh, and my website is just matiasventura.com.
Grzegorz Ziolkowski: That’s a good one.
Birgit Pauli-Haack: That’s a good one.
Matias Ventura: Highly recommend it.
Birgit Pauli-Haack: Yes. And if you always wondered, what is this Gutenberg thingy? There’s a wonderful post there. What’s the title of it? The Ship of Theseus?
Grzegorz Ziolkowski: The Ship of Theseus.
Matias Ventura: Oh, yeah. Yeah. The Ship of Theseus. Gutenberg or the Ship of Theseus, yeah.
Birgit Pauli-Haack: Exactly. If you want to start there, you get a lot of ideas about the vision of it. All right. Before the end of the show, I wanted to point out that there is on Tuesday, the first Gutenberg developer hours on Meetup. And we have an expert panel that will answer all your development questions or know where to find them. So Fabian Kägy is going to be there. Nick Diego’s there as well as Tammie Lister to meet with the participants, we had to close it down a bit with 66 people are registered. We are not getting to all the questions, but we will. So there is a waiting list if you want to be registered there, but I also want to point out there’s a next one coming February 22nd. Also Tuesday 11:00 AM Eastern 1600 UTC. Put that on your calendar if you didn’t get in the Tuesday event.
As always, the show notes will be published on gutenbergtimes.com/podcast. And this is episode 60, six 0. If you have questions or suggestions or news you want us to include send them to changelog@gutenbergtimes.com. That’s changelog@guttenbergtimes.com. Thank you, Greg. Thank you, Matias. It was a great pleasure. Again, I’m so thrilled.
Matias Ventura: Likewise.
Birgit Pauli-Haack: It’s goodbye for me, dear listeners. And I’ll see you in two weeks, or I’ll hear with you, talk to you in two weeks.
Grzegorz Ziolkowski: Thank you very much. That was a great show.
Birgit Pauli-Haack: Thank you. Bye bye.
Matias Ventura: Bye bye.