Birgit Pauli-Haack, and Mary Job talk with this week’s special guest Dave Smith about WordCamp Europe, WordPress 6.1 and Gutenberg 13.4. You also learn what in the works via the GitHub repo.
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Birgit Pauli-Haack
Show Notes
Special Guest: Dave Smith, JavaScript Engineer and full-time Core Contributor on the Gutenberg project, sponsored by Automattic as part of the Five for the Future program.
- Dave on WP YouTube Channel
- WP Profile: get_dave
WordCamp Europe
WordPress 6.0, WordCamp Europe and Roadmap for 6.1 –Weekend Edition 217
BlockMeister – Block Pattern Builder
WordPress 6.1
Roadmap to 6.1 for Gutenberg Phase 2
Video by Dave Smith: Gutenberg Roadmap for WordPress 6.1 – amazing new features planned!
Matias Ventura: Twitter Thread on WCEU and WordPress 6.1
Community Contributions
LottieFiles Releases Official WordPress Plugin
Gutenberg Times Live Q & A: Block First Approach at the Pew Research Center – Using a mixture of Core and Custom Blocks for a streamlined publishing process, and to create powerful charts and quizzes with Seth Rubenstein, lead developer and Michael Piccorossi, Director of Digital Strategy. (Register now)
Twitter Thread by Seth Rubenstein that inspired the Live Q & A
Gutenberg 13.4
Gutenberg 13.4 (Changelog on GitHub)
What’s new in Gutenberg 13.4? (8 June)
Migrating WordPress E2E tests to Playwright
What’s discussed or in the works
Nav block: Add design controls for interactive states (:hover, :focus .etc)
Create a Block Theme plugin
Stay in Touch
- Did you like this episode? Please write us a review
- Ping us on Twitter or send DMs with questions. @maryojob and @bph.
- If you have questions or suggestions, or news you want us to include, send them to changelog@gutenbergtimes.com.
- Please write us a review on iTunes! (Click here to learn how)
Transcript
Birgit Pauli-Haack: Hello, and welcome to our 68th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about WordCamp Europe. Gutenberg 13.4 and WordPress 6.1, and a lot of other things. I’m Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate. And I’m here with my co-host, Mary Job, WordPress advocate, support engineer at Paid Memberships Pro, and community organizer at wpafrica.org.
Good evening, Mary. How are you today?
Mary Job: Oh, I’m doing absolutely great, Birgit. Thank you for that. Yeah, I’m doing wonderful. I just recovered from malaria, but I’m doing great.
Birgit Pauli-Haack: Oh, wow. Yeah, glad you recovered. Yes.
Mary Job: Hi, everyone. I’m Mary and today I have the honor to present also our special guest tonight. Welcome to Dave Smith, JavaScript engineer, and full-time co contributor on the Gutenberg Project, sponsored by Automattic as part of the Five for the Future program. Thank you so much for joining us tonight, Dave. We’re happy to have you here, and I’m sure our listeners are looking forward to listening to you on this episode.
Dave Smith: Well, thank you. And hello Mary and hello Birgit. It’s a real pleasure to join you here today. I’m actually a long-time fan of the show. I had a look back at my podcast episodes and I think I’ve been listening since some of the very earliest, I think. So yeah, it’s a fantastic resource. In all the time I’ve been listening, it’s really helped me keep up-to-date with the latest happenings with the block editor and with WordPress beyond. So yeah, thank you from me for such a great resource, and it’s a pleasure to be here.
Birgit Pauli-Haack: Well, thank you for these kind words. And I told him to say that. You listeners, you know me.
Dave Smith: Not at all. Not at all.
Birgit Pauli-Haack: No, glad to have you, and it’s going to be a great show with you here.
Mary Job: Yes, it is.
Birgit Pauli-Haack: Yeah.
Mary Job: I can already feel it’s going to be a great show. So before we add into the changelog and the rest of the show, Dave, would you briefly tell us what your WordPress origin story is and what your focus is on the Gutenberg project?
Dave Smith: Yeah, absolutely. Well, I’ve been working on the web since I think about 2013, although I’ve started to lose count now. And back in those days, the company I worked for had a proprietary PHP based CMS system, but the thing is, I kept getting asked to do freelance work on the side and I didn’t have a way to provide my clients with a ability to administer their own sites. And so I found WordPress and that was it, I never looked back.
And so prior to joining Automattic, I was a technical lead at an agency that was based in Bristol, which is here in the south of the UK, where I live. And we use WordPress on everything, from small business websites to very large enterprise builds as well. In fact, at one point I think myself and a colleague, we even developed a sort of pseudo pattern system using advanced custom fields to allow our clients to sort of make their own pages. So we’ve really done everything, and it’s quite cool now to see some of this technology being available natively within the editor.
But I joined Automattic four years ago, and during that time I’ve been consistently involved in the Gutenberg Project. I’ve contributed to various features, probably the most well known would be the Navigation Block and the link creation user interface. So right now I’m part of a team that’s focused on improving the theme authoring and development experience. And as part of that, most recently I’ve started my own YouTube channel where I’m posting my firsthand insights into what’s coming next in the WordPress block editor project.
Birgit Pauli-Haack: Yeah, that’s awesome. It’s interesting that you also tried to build your own, to work on a CMS and that’s a proprietary, and I think that’s what a lot of developers did before they joined WordPress. Interesting. Yeah.
Dave Smith: Yeah, absolutely. Yeah.
Birgit Pauli-Haack: Yeah.
Dave Smith: It did work out well, that.
Birgit Pauli-Haack: Yeah.
Dave Smith: I think it was definitely a good move moving to WordPress.
Announcements
Birgit Pauli-Haack: Yeah, definitely. Well, thank you for being here, and that’s great. So the first part of the announcement was WordCamp Europe, it was absolutely the best. It has been three years, and I was meeting so many friends and made new ones, it’s a wonderful thing. And I’m so glad that I actually met you Dave in person for the first time. Did you get home all right? And I know it was your first WordCamp, so what are your takeaways?
Dave Smith: Yeah, absolutely. It was a real pleasure to meet you finally, Birgit, after so long that we’ve been unable to do that. But yeah, I had a fantastic time. It was, as you said, my first WordCamp of any kind actually, not just WordCamp Europe.
Birgit Pauli-Haack: Cool.
Dave Smith: Yeah. So for me, it was just really good to see the community in person, in evidence of what amazing community we have, and it was just fantastic to sort of meet all these people for the first time. Yes, I did have some travel disruption from the UK, there was a lot of problems in the UK with getting to Europe at this time. So I did, in fact, miss the contributor day, which I was hoping to go to, which was a shame. But on the other side, I did get there for the main conference and I saw lots of talks and I got to meet lots of contributors. So it was a really, really good experience. And how about you both? I mean, I’m guessing this wasn’t the first WordCamp for either of you, right?
Mary Job: Oh, for me, I wasn’t at this year’s WordCamp Europe. I’ve been trying to get to WordCamp here probably for how long now, but I wasn’t able to get to it, but definitely not my first WordCamp.
Birgit Pauli-Haack: So you must have felt quite some FOMO fear of missing out when you saw all the tweets coming through and all the pictures.
Mary Job: No, I intentionally didn’t follow the news because I didn’t want to cry this time.
Birgit Pauli-Haack: Mm-hmm. Oh, yeah and I would’ve loved to meet you.
Dave Smith: Another time.
Birgit Pauli-Haack: Yeah. We need to work on the WordCamp Africa there, definitely.
Mary Job: Oh, yes.
Dave Smith: Yeah.
Mary Job: Yes. I’ve been getting a lot of people asking about it, but we’re still working on it. We need to get to know each other in the community for us, that’s what I always say, and then we can have a WordCamp.
Birgit Pauli-Haack: Yeah, because you can’t do it alone. When I looked at the last pictures that I took for WordCamp Europe, there were about 200 organizers and volunteers, or 250, to make it all happen. And it’s a huge effort and they planned it all for a year almost. Yeah, Dave, you were right, I haven’t counted yet, but it was probably my 20th WordCamp also.
Dave Smith: Right.
Birgit Pauli-Haack: Or close to it. Yeah.
Mary Job: Oh, wow. I want to be like you.
Birgit Pauli-Haack: Oh, no, you don’t want to be like me. It’s hard being me. Yeah, and I was blown away by the community’s ability to show up. So at contributor today it was the biggest contributor day ever in the history of WordCamps, with over 800 people. And normally they’re between 200 and 400, but 800 people were really great.
Dave Smith: Wow.
Birgit Pauli-Haack: Yeah. And that was the first part, and the other part was that, it was a real hug fest with meeting all the friends we haven’t seen for three years. It was such a great atmosphere, there was a great energy, everybody was nice and excited. There were also quite a few block editor-related talks and dear listeners you will find links to the times spans of the livestream recording in our weekend edition, number 217.
And of course we link it in the show notes, but there were a great mix between code examples, high-level strategy and future exploration. And then the workshops were recorded, but not live streamed, so we don’t have links yet, but they will be uploaded soon to WordPress TV, and we’ll let you know in a future episode. So Dave, did you get to see any talks at the WordCamp Europe?
Dave Smith: Yeah, I certainly did. Yeah, I agree with you, there was a really good mix of talks and I thought that was great to see because there was probably something in there for everyone. And I enjoyed listening to a number of them, including one by someone you might know, your excellent ex co-host, Grezgorz, who’s obviously a colleague of mine at Automattic, but I really enjoyed his talk. But as someone who’s a full-time contributor to the project, for me, I was just mainly curious to see the sort of topics that folks were interested in having presentations about, and also to sort of listening to the Q&A, because that can often be very revealing as I’m sure you know.
Birgit Pauli-Haack: Yeah.
Dave Smith: But of all the talks that I saw, I think the one that really stood out to me was the block pattern revolution, which was by Sean Blakely, I think was his name. And in this talk, he covered how his, he works for a very large agency, and in the talk he sort of was just describing how the agency’s actually using Gutenberg patterns to improve the website creation process as a whole. So it just really resonated with me, because I don’t know if I said, but worked in agencies for about 10 years prior to joining Automattic, so it’s a really tough environment to create something, and as you would know, Birgit, of course.
And I was just really fascinated to learn how they were using the editor itself as a designer developer collaboration tool. And that was just fascinating to me, that actually using WordPress that as part of the design experience and before that. And one of the tools they did a shout out for was something called the BlockMeister plugin. And what it does is, it gives you a custom post type for patterns, or at least that’s what I understand. So you can sort of build the patterns themselves within the editor, and they do that sort of collaboratively, not only with the designers and the developers, but also with the client.
So the client’s kind of kept in the loop and they see the design evolving in the browser via WordPress, via patterns. And all of this work helps avoid, what we call in the industry, the big reveal, where the big reveal was always where someone went away and Photoshopped, designed the site and went, “Ta-da,” and the client said, “I hate it, I want the logo bigger,” that kind of thing. And by doing it in WordPress like that, they avoid that, and I just thought that was fascinating.
Birgit Pauli-Haack: Yeah. And doing it in WordPress also adds another layer of experience to it, because it’s clickable.
Dave Smith: Yeah.
Birgit Pauli-Haack: Kind of people, the client can see what happens when I click on it, and all that. So they also start thinking about that quite a bit.
Mary Job: Yeah.
Dave Smith: Yeah. And it’s super easy to prototype, change those layouts and change things around. So yeah, definitely.
Birgit Pauli-Haack: Yeah. It was a kind of a complimentary talk to Tammie Lister’s lightning talk. No, it wasn’t a lightning talk, it was a full talk on design systems in future WordPress and how to kind of use all the tools, all the units of the block editor to build a design system that can be reused. And I think that was a great example of that, what Sean lately showed.
Dave Smith: Yeah. And these are topics that have been going around in the web community for a long time, but it’s just really good that we’re now seeing the editor as a way to deliver some of these things that have been talked about for so long.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: So yeah, and I think it was really inspiring.
Birgit Pauli-Haack: Yeah. Excellent. Yeah.
Dave Smith: But I didn’t get to make it to any of the workshops, I’m afraid though. I heard there was a lot of good things about a number of them, but there was one about the block themes by Daisy Olsen, did either of you, well, of course, Birgit, you were there. So did you manage to attend that one?
Birgit Pauli-Haack: No. It was fully booked fast, early in the morning.
Dave Smith: Yeah.
Birgit Pauli-Haack: And I’m not an early riser, so I didn’t get in. But I heard great comments about it and it was recorded, and it will be published on the WordPress TV. And there was a lot of people there, I think it was full by 100 people also, it was a really great interest on block themes. And I had some conversations with people about propagating updates of block patterns, and that was kind of an interesting, near the reveal, but that’s a new word that I learned from you.
It was an interesting aspect of it, that there are quite a few entities like the block patterns, the theme when it was used, when it already was edited by a user and the blocks that are not dynamic blocks, when you change them, you only change them for a new, but never go back to propagate those changes to the former instances of patterns or blocks or even a theme. Because if a user touched it, the new design on the template part or template will not come into that install when you update the theme.
So for that part, I know you could always do an additional block part, a block pattern and make that an upgrade. But it’s interesting that some of the mechanisms that worked before are hard to come by now. So I’m sure that we will kind of see some updates there and discussions in the community even more, but that was kind of what came out there.
Dave Smith: I definitely hear the conversation around block patterns, particularly, and there’s a desire somewhere there, I think to be able to have a central source of truth for block patterns, and be able to put them into lots of different posts, but then come back and be able to say, “Oh, I want to change the border color and add this block,” and have that propagate to all the previous instances of patterns.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: But of course, as you know, patterns are supposed to be a one-time thing. Once they’re in the editor, that’s it, they’re not tied back to anything, they’re just blocks again. So it’s not something we can do now, but it seems to be something that people want. So whether this is a workflow thing that we just need to do better at describing to people how the different options they got, or whether this is a new sort of, a new desire for a whole new paradigm of something that’s sort of halfway between a reusable block and a pattern and a template part. It’s all a bit muddy at the moment.
Birgit Pauli-Haack: Yeah. And the reusable block actually does that. So if you change a reusable block, it propagates the other instances. So I think that, I don’t know if that can be duplicated or maybe the transformation API can help with that, but these are all conversations for GitHub. And later on, speaking of what’s next for WordPress Gutenberg Phase 2.
So for the keynote, there was the AMA town old style, interact with Matt Mullenweg at the end of WordCamp Europe. Matias Ventura was supposed to be on stage, he couldn’t make it, but he had prepared a few things. But what also happened was that day, he also published the roadmap for 6.1 for the Gutenberg Phase 2, which is the customization part.
And Ventura, he wrote the tune of the release will be to refine the experiences introduced, 5.9 and 6.0, weave the various flows into more coherent and fulfilling experiences for users, maintainers and extenders and close some gaps in functionality.
As we start to look towards Phase 3 of the Gutenberg roadmap, Phase 3, just as a note, that was the end of the quote. But Phase 3 for Gutenberg is collaborative editing, like Google style collaborative editing. So Dave, you created a short video introducing your top five features, you are excited about coming to WordPress 6.1, what were they?
Dave Smith: Yeah, I did. And it’s on my channel, which will be in the show notes. But I based my video largely around the GitHub tracking issue that Matias has been updating after WordPress 6.0 was launched. And obviously now he’s come out and subsequently posted the high-level overview on make blog. But the video just aims to be a really quick and easily digestible overview of everything that’s sort of planned for 6.1, for anyone who wants to get up to speed quickly and what’s coming next.
And it’s not really canonical, I think Matias has posted it as the place you want to look, that said, I mean, my video does seem to sync with what Matias said quite well, which is mainly there’s site editing and template changes. There’s going to be a lot of focus on patterns. There’s going to be upgrades to the whole styling, the way we deal with styling and editor, and then obviously upgrades to key blocks like nav block and comments block. And then we’ve also got theming improvements coming. And we can talk about those in a little bit more detail if you’d like.
Birgit Pauli-Haack: Yeah. Well, talking about the template editor, there are a few more additional stages there, like a browse stage or a view of that is to come. And then the unifying kind of, like you can zoom out of a template and see the full page, and then you can zoom in again to make those changes. And one goal is also to provide more clarity. And that’s definitely good news for the community and the theme developers, more clarity between the global elements like templates, template parts and styles.
Dave Smith: Yeah.
Birgit Pauli-Haack: And then the improvement of navigation block that had a few iterations and could do some more.
Mary Job: Yeah.
Dave Smith: Yeah, the navigation block is a really tough one, and that’s definitely due some work in this release. I mean, some of the key things for me having worked on it is the ability to carry menus when you’re switching themes.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: And also, there needs to be an improved integration with global styles. And then a lot of people have been asking for things like, “Can we use different menus on different screen sizes?” We may be able to look into that. But one of the interesting things that Matias highlighted in his post was the effort that’s currently actually underway. And we have a prototype already in the plugin, which you may have come across, but to have a way to show the navigation structure outside of the navigation block.
So at the moment in the Gutenberg editor, there’s a prototype of a sidebar that will come in and you can manage the structure, the data of your navigation, and that’s kind of separate from the block, which if you think about the block, it also ties together visual aspects as well, so that’s something that I’m definitely going to be focused on as part of my work.
Birgit Pauli-Haack: Yeah.
Dave Smith: And in terms of patterns, we’ve got the aerial view, which is, I don’t know if anyone’s seen this yet, but it’s like a zoomed out view of the editor canvas, and that’s going to be really exciting because it means we’ll be able to think about patterns more as sections of a website. And instead of having to deal with all the sort of low level, fine grain blocks and it can get a bit confusing and too many options, we might be able to give our clients a, “Go into this section editor view, and you’ll be able to just pick the block patterns and quickly build out a site.” And it sort of resonates quite well again with what we are discussing from the talk by Sean earlier, then you can imagine how those two things would play together very, very nicely.
Birgit Pauli-Haack: Mm-hmm. Yeah. And I see that Matias Ventura also mentioned that managing safe patterns would also be part of the roadmap or at least the goal is on it. So that kind of probably comes back to the discussion about safe patterns and kind of get back to it when you transform it and also kind of maybe even propagated through the updates through that. Mary, do you see anything in there that excites you for 6.1 that you want to talk about?
Mary Job: Oh, for me, I think it’ll be the patterns. I’m liking the fact that people can actually contribute patterns. Like you literally have, you don’t need to be a programmer to contribute to that.
Birgit Pauli-Haack: Yes.
Dave Smith: Yeah, that’s really, really important.
Birgit Pauli-Haack: Yeah. Pen and directory. Yeah, it’s open for submissions. Yes. Yeah, it’s awesome. And there are probably, I saw a number, like 10,000 patterns that are in the directory, but they are also translated in multiple languages. So it could be a thousand translated into 10 languages, so that made quite a few.
Mary Job: So-
Birgit Pauli-Haack: So… Yeah, go ahead.
Mary Job: No, I was going to say, it might seem like a small feature, but I think it’s going to make WordPress more accessible.
Birgit Pauli-Haack: For sure. Yeah.
Mary Job: More accessible to more people in far corners of the globe, because then literally it means that you don’t have to be actively into the ecosystem for you to be able to use WordPress.
Birgit Pauli-Haack: For sure. Yeah. Good point. So what else is in the 6.1? Yeah, we have this great discussion about responsive and intrinsic design, where I see some people in the community kind of missing the view points, kind of the break points for the tablet, mobile and desktop view. And I think there are some philosophy, or there’s the more modern way to do it is with intrinsic design, because all the break points are pretty arbitrary and you have different sizes even beyond those.
And it also has to do with the components because you can use a column or a cover block over the full website or width of the website, or you can put it into a column, in a two-column website, and it still needs to behave and be adapted to it. So I think the same with the fluid typography system and managing web fonts that is in the works. And so we’ll see quite a few things changing here.
Dave Smith: Definitely. I think we’ve seen with the way CSS works and it’s evolved towards things like using CSS grid for layout. I mean, that’s intrinsic by nature, we don’t have to give all the individual break points and say, “At this size, you should do this, at this size you should do that,” you just tell the algorithm how you want it to behave, and it just does the layout for you.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: And I think it’s been something that, as you say, people have been asking for media queries in Gutenberg for some time, but if we can avoid having to do that, for the majority of users it’s going to provide a much better experience, because whilst we are all intimately familiar with media queries and having to change break points, the majority of our users are not going to be, and nor would they want to be.
So we want it to be so it just works, I’ll be interested to see how far we can take that, I mean, whether at some point we’ll end up having a medic, a break point interface in Gutenberg is a bigger question that I’m not qualified to answer, but it certainly will be interesting. But you mentioned fluid typography, I mean, we’ve already got, I’ve seen a PR for that very recently, and so that is on the way, I mean, we’re going to have this system where the font size will adapt appropriately based on the size of your view port, and it’s a hot topic the in CSS world right now, and bringing it already into the editors is a big win.
Birgit Pauli-Haack: Mm-hmm. Yeah. And I think the page fillers that have been in business for five to seven years, there wasn’t anything about intrinsic design available, it was just the way to adapt to different screen sizes was through media queries. I think Jen Simmons, who kind of coined the word, intrinsic design, only talked about it since 2019 or something like that, or ’18, but it’s already four years old. I always think that the two years of COVID, it’s kind of half a year, but it has been two years. I’m kind of getting my history a little bit bogged down. Yeah. A sense of time is skewed.
Mary Job: It feels like it was for four years or five.
Dave Smith: Yeah.
Birgit Pauli-Haack: Yeah. At one point it’s just yesterday and then one point it’s five years. Yeah. Yeah, and the last part or sections that Matias Ventura mentioned was the theming improvements with a theme building plugin that’s in the works and will come to the repo pretty soon, to the WordPress plugins repo. So you could export it or you can create a new block theme, or you can have all the user settings that you put into the theme exported to have it in the theme. So it sounds like a really good plugin to come and then also have templates and parts put between themes. Yeah, that’s another paradigm shift a little bit, it kind of makes it interesting. Yeah, it’s not only the template parts of… Yeah.
Dave Smith: Yeah. Well, if you’re working on a template or a part, you’ve crafted that in one theme and there’s no reason why you wouldn’t expect that to be taken over to a new theme if you switch. And I think that’s really the goal is to make the content, not so tightly coupled to your theme, and we’ve already sort of broken the design away from the theme to some extent, and it’s just that doing the same with the content and templates and parts is definitely a goal that we should be looking to achieve.
Birgit Pauli-Haack: Yeah. And that’s where also it comes in, that blocks are separate from the theme. Yeah, because if you have a site title tag, it doesn’t matter what the header is, if the site title block is in it, it will show up right, and that’s really great. Yeah.
Dave Smith: Yeah, absolutely. I’m also looking forward to the comments form block coming, maybe in 6.1, because we’ve had the comments query loop land in 6.0. But I think the form is still using a Pitch P server side rendering, there’s like a legacy form of the block, an initial form of it.
Birgit Pauli-Haack: Yeah.
Dave Smith: But to have a fully block based comments form block is going to be quite something, I think. It’s my understanding of it, I’ve been speaking to some of the people working on it, is that it’s pretty complex to realize, but if we do realize it’s going to be a bit like the navigation block in that it will provide a lot of knock-on benefits to the wider block ecosystem. So I’m excited to see how that develops in this release cycle.
Birgit Pauli-Haack: Yeah, it also could be kind of a prototype on how forms handling can be done in block fashion. So yeah, it’s definitely something to look forward to. And one of the goals for the 6.1 is also to allow for gradual adoption of the full-site editing features and see if one or other features can be modified to be available for the classic themes. For instance, calling a full-site editing template part and headers and footers, but the rest of it is still a classic theme.
I saw a few PRs there, it was also the conversation that, so Matias was on the show after he published a roadmap for 6.0, and in that conversation, he also talked about that FSE or block themes, not necessarily need to replace classic themes, it just adds a few layers of user interactions that can be switched on and off with the block locking features and theme JSON, for the theme builder. But it enhances actually classic themes, and they can all be used side by side, and it’s just an evolving of the whole template, and then the interaction with the global styles.
And maybe we can get that to be a little bit more cohesive with the classic themes and not have that. Our language is like, there is a break, there’s going to be a break one time we do that, and then the next time we are doing something totally different, and the old one is not good anymore, which isn’t the case because it’s all WordPress and it’s all feasible. And why should a theme developer need to change if the market doesn’t really value that.
Dave Smith: Yeah, absolutely.
Birgit Pauli-Haack: So I think we need to really be conscious about that. We are not kind of before and after, and as well as kind of put it together with that.
Dave Smith: I like the way Matias thinks about these things, because I know that there’s been quite a few people exploring sort of hybrid or universal themes where I think my colleague, Ben Dwyer posted on ThemeShaper blog, which is a blog all about, surprisingly, about theming. And he had a couple of explorations where they were sort of, it was like a halfway house between a classic theme, but it was also consuming blocks in a different way, and I think that’s a really healthy way of thinking about things rather than this sort of hard dividing line. You either are on the classic theme or you’re on a block theme, it’s like there is a middle ground there somewhere for people to explore, and I think that’s really healthy.
Birgit Pauli-Haack: Yeah.
Dave Smith: I think it’s really good for the ecosystem.
Birgit Pauli-Haack: Well, and WordPress has the promise of the backwards compatibility, everything that the classic themes do is in rapid score and it will stay there.
Dave Smith: Indeed.
Birgit Pauli-Haack: I haven’t seen any talk or any effort at all yet to kind of make that obsolete or something like that.
Dave Smith: Right.
Birgit Pauli-Haack: It’s just, I know it’s a fear in the community, but I think there’s just, trust the system. You trusted it before the last 19 years there, now we go into the next 25 years or so. So yeah, all right, that’s all about the philosophies.
Community Contributions
So for community contributions, I only have two things in there. So Lottie has created an official plugin for the WordPress repository to bring animations to the block editor and the interface to control the settings for the animation.
And it’s a single block plugin, and this is really cool, if you are not a fan of gradients and if you’re not a fan of dual tone, you’re probably also not a fan of animations, but for those who play around with all of the things, it’s really cool that you have additional interfaces there and additional interaction pretty much. So WordPress Tavern has an article about it, and we also shared it of course, in the show notes, and there are other plugins who offer that, but this is the official LottieFiles plugin.
And so if you are into that and want this to offer some of your client site, check it out. All right. And the second thing that I wanted to let our users know, or our listeners know, we just scheduled the next Gutenberg Times live Q&A. We haven’t had one for quite a while, I think the last one was in October, and the title is, Blocked First Approach, at the Pew Research Center, using a mixture of core and custom blocks for a streamlined publishing process, and to create powerful charge and quizzes.
Guests will be Seth Rubenstein, the lead developer of Pew Research website and Michael Piccorossi, who’s the head of digital, it’s the content creators. And right now I only have save-the-date, it’s July 22nd 2022 at 11 Eastern Daylight 1500 UTC. And it was inspired by this Twitter thread that he started out with saying for all its naysayers, “Gutenberg is a game changer for digital news apps. It’s a force multiplier for your team, we’ve spent the last three years going all in on block development.” And then he followed up with a thread that we definitely will discuss in that show. So save-the-date, July 22nd 11:00 AM Eastern 1500 UTC.
What’s Released
Mary Job: Moving on to what’s released, this brings us to the latest Gutenberg plugin release, 13.4 246 contributors match PRs for this release and among them are five new contributors.
Birgit Pauli-Haack: Yay, five new contributors. Excellent. Congratulations. Yeah, so there are quite a few enhancements in this release.
Enhancements
We have, one is, the gallery block now has an opt-in axial block spacing control. So you can control separately the columns, gata, as well as the rogue gata. So you can have interesting layouts for your gallery.
That is really great, I saw some of the designs that are in the PR, it’s 41175. Yeah, it’s definitely great. Another enhancement is that the search block has now the ability to specify additional search query variables, so you can add additional parameters to the URL and share that, so that is like a post type product, or a post type book or any of the other variables there, it could be a date, it could be a category as well.
Dave Smith: Yeah, it’s really powerful that, especially if you’re using WooCommerce or another eCommerce system, like to be able to just say to the search block, “I want to search my products.” That’s definitely something that’s been missing for quite a while, so I was pleased to see that land.
Birgit Pauli-Haack: Mm-hmm. Yeah, definitely. Another one is that a color picker finally strips out the hash sign from the pasted hex values, when you come in from a color style guide or something like that, and you just want to add the color to a block entity and you didn’t know if you use the hash or not the hash, and it now strips out the hash and you don’t have to worry about it anymore. There were also some design updates to the published pop over time, daytime picker, so that’s definitely also a quality of life kind of change. It’s a bit better to navigate that.
Dave Smith: Yeah, we’ve seen a number of upgrades to that in recent times. It’s getting better and better. I definitely appreciate Rob’s work on this one, especially, he’s been looking really hard at sort of making it work in different scripts and different languages, which is obviously really important because we don’t all speak English.
Birgit Pauli-Haack: Yeah. Well actually the majority of installations are not in English, so definitely a good….
Dave Smith: Important work.
Birgit Pauli-Haack: Totally. Yeah. And all the people that use WordPress actually benefit from that quite a bit.
Dave Smith: Yeah, I was also interested in another one, another PR that came, landed in this release, which was the adding support for button elements to theme JSON. So this is something that’s part of a wider effort that’s really to allow themes to better target specific HTML elements within blocks, without requiring custom CSS. So currently you can kind of say, “Within the editor globally or within this block, I want to target all link elements or H3 elements, or whatever.
And I want to make them a certain color, or I want to add certain spacing.” But it’s fairly limited. And so there’s an effort underway to sort of expand that range of elements that you’ll be able to target. And the real key here is it’s going to be able to sort of reduce the amount of sort of specificity wars that we have with CSS, where we’re trying to overload core styles with custom CSS, if you’re looking to extend your block.
Birgit Pauli-Haack: Yeah.
Dave Smith: The best thing about this feature is I can see is that it’s actually going to allow these elements to be exposed by global styles, so if you’re going to the global styles UI as a normal user and be able to say, “I want all my links to be this color,” or “I want all my links within the paragraph block to be slightly another color,” or “I want to have an underline,” or whatever.
And that’s really powerful because it means we’re removing the need for our users to have to understand CSS, which has always been a problem, and we still hear that, “Please we need the custom CSS field back in the editor.” But by moving these things and inter-theme JSON, we do allow this to be exposed in a much more intuitive way via UI, so that’s an important thing to do.
And if we think about into the future, we’re going to have this rolled out towards all sorts of form elements. So imagine you can say, “Oh, I want all input type elements, including sort of text areas and things like that to have this color border,” and you can just do that in one go, without having to know all the relatively complex CSX CSS selectors that you’d need to know to target all form elements. And if you’ve ever tried to style a form using CSS, you know exactly what I’m talking about, it’s not the simplest of things after this many years of CSS, it’s still quite tricky.
Birgit Pauli-Haack: It’s still quite tricky, yes that’s true. And there are quite a few PRs that support those button elements in theme JSON, like also the fire blocks and the search blocks have a button that now is an element button, so it follow that design that you will have in theme JSON as well. And also in the post comments, the buttons there as well. So I think the buttons are moving forward with that and that informs on the designers and developers on how well it’s going.
APIs
And if there is some need for adjustments there, how to do that. And then we had a few, for developers there’s a new API available now that moves the visible block state into the block editor store, so that means that anybody who can tap into the store API can see if a block is visible or not, so you have some conditional handling in any of the, be it a plugin or in additional blocks. So that is definitely an improvement for extensibility.
Dave Smith: Yeah, absolutely. And as we move forward with patterns, I think that’s going to be important because we’re going to be able to detect whether the block is actually currently shown on the current screen, like it might be off the screen, it might be below the scroll fold, so that’s going to be an important thing, previously it was sort of hidden in the react context and you couldn’t get a hold of it, but now they’re exposing it, and I think it’s part of the work to do what we talked about earlier with this sort of aerial exploded view of the block patterns, the sort of blocks as sections that Matias has mentioned in this post, so this is work towards that roadmap already?
Birgit Pauli-Haack: Yeah. We also had some three PRs that are very influential on the performance of the websites or the block editor, and one is that the auto completer performance is improved. And then also the external library react spring was upgraded, actually two versions, two full versions from 2.4 to 4.5, and it’s a better handling of the downtime of the block editor. Before it was always something kind of pinging something in the background and it was slowing down the block editor, and now that has been fixed and react spring and now it comes to the block editor as well.
And the biggest part is that CSS is conditionally loaded per block, so if a block is not on canvas, it will not load the CSS, or on the front end, if it’s not used, it will also not load the CSS into the file when it’s rendered. So those are great improvements. We have not seen a make blog yet, I think it’s coming out tomorrow or later today where also the performance numbers are going to be published, but I think we’re going to see some improvements there. And I had one other thing, did I jump over some of it?
So for the developers who are using the create block script, there have been some improvements to the block templates. One is about the dynamic blocks and then also additional template variables in there to make sure that it fixes some of the issues that people run into. And it also remove the wrapping of the diff, so there are no usability issue anymore on, what was it? The edit JSS.
So what else? Create block always gets some nice additional features to improve the developer experience. We’re starting out with block development, so I love to highlight that in this changelog that’s kind of taken over from Grzegorz who is working on it. I really appreciate the work on that because I learned quite a bit through that.
Dave Smith: Yeah, that script is a big time saver. If you ever want to create a block and it’s gone through so many iterations in the past year, it’s come on leaps and bounds and anyone who creates a block today should be very thankful to the likes of Grzegorz and other people have been working on that consistently. It’s a great tool.
Birgit Pauli-Haack: Yeah. Ryan Welcher has also been working on that quite a bit because he uses it every time he does a live twitch stream, he starts out with a create block command line. And he also found, “Okay, if I want to do a dynamic block, I need a different template. If I want to do instead of a single block plugin, I want to do a multi block plugin, what does the template need to change?” And he was very instrumental to get those two templates into the grade block and then also talked about it on his twitch theme. So if you ever, I could share some of his videos also on YouTube, in the show notes. So if you wanted to get started, I think it’s a great way to see how that’s going to work.
Dave Smith: Yeah, that sounds really good. I was using it to extend a block recently. I wonder if there’s a template for that, that’d be interesting to see. So yeah, I’ll look out for those show notes.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: Another thing that went into this release was the navigation editor screen has been removed from the experiments page. As I did this PI I’ve had quite a few questions about it, So I just wanted to talk briefly.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: And just to clarify, it’s not necessarily a formal deprecation of the navigation editor screen or the project, but what we were finding is that with the run up to 6.0, and that there weren’t any contributors who were actively working on that screen, but we still kept getting quite a few bug reports saying it no longer works with the new navigation block entity system, and this thing is out-of-date.
And we took the decision, that rather than confusing contributors or people are coming to the Gutenberg plugin, we would just hide it for now, and therefore we wouldn’t have so many bug reports from people spending time in basing those when they didn’t need to. But it is something that we will, no doubt, utilize some of the technology for, to build things like exposing the navigation structure in the sidebar, which we talked about earlier on. So no doubt it will be harvested for all useful things that happened.
Birgit Pauli-Haack: Mary, is there anything that you wanted to point out from that changelog that we kind of skipped over it?
Mary Job: No.
Birgit Pauli-Haack: Okay. Yeah. Tell me, Dave, about the switch over from Puppeteer to Playwright in the testing suite. What’s the nature of that?
Dave Smith: Yeah, absolutely. Well, our fellow contributor, Kai Hai, and also Isabelle Brison, they’ve both been working quite a while now on migrating these tests to a new system called Playwright, away from the existing system called Puppeteer. For those who don’t know, what we’re talking about is that Gutenberg has a set of automated tests, which run in a real browser and run against a real WordPress install, but everything’s kind of thrown away, so it doesn’t necessarily start if the tests are run.
But it’s just asserting that the way the software behaves is correct, and it gives you confidence when you’re doing release that you haven’t broken everything. I mean, obviously it can’t catch every single bug, but it definitely helps to improve things. But what we’ve been finding is that the software that’s been underused is called Puppeteer, that controls these tests.
And we are finding there’s been a lot of what we call, flaky tests, and these are actually automatically flagged up now in the repo that if a test fails several times, it’s marked as flaky and then someone’s supposed to come and deal with it, but they’ve been building up and building up and there’s been more and more of them. And Kai actually looked into seeing if there’s other systems that could help us offer more stable tests.
And in fact, he concluded and he wrote on make blog at length about moving over to this new system called, Playwright. It’s much better maintained, there’s a lot more people working on it, it offers better debugging. But also I think most interestingly it encourages testing of the actual interface that our users experience rather than, there’s a temptation when you’re writing these tests to sort of say, “Get me this element by class name or a ID,” and then do something with it.
But of course, normal users can’t see class names or IDs, so you’re kind of circumventing, the tests aren’t testing the real software. So with Playwright, it makes it a lot easier, let’s say, to test in a way that is more akin to our users. And in the future, we may also be able to test on other browsers. Currently we can only test on Chromium, but we may also in the future be able to run these tests against the likes of Firefox and Safari.
And hopefully these tests will become faster, more stable and more reliable as a result of this. So I think it’s really good work and Kai and Isabelle are making good headway on it, and I’d encourage anyone who’s looking to contribute and who’s got experience of testing to come and help them with their effort, because they’ve got a lot of tests to migrate, but yes, it’s a very worthwhile project, in my opinion.
Birgit Pauli-Haack: Yeah. Yeah, no, it really sounds like it. Well, I’m always kind of thinking about who else can use that, is that recommended for plugin developers who built their own custom blocks to also kind of look into the testing suite, the Playwright and kind of reuse some of those tests for their own purpose?
Dave Smith: Yeah. Well, I can’t say that I personally have done that yet and explored that, but I know that the software itself is designed to be used in any context. I can’t see why there would be a reason why you couldn’t do that. I mean, again, it’s going to be the same process, which is you’re going to spin up a WordPress install. You’re going to activate your block plugin and then you are going to create a post, put your block into the post and then interact with it programmatically to determine if it works. So I would imagine that there’ll be things that we can do to reuse some of the technology we’ve got in Gutenberg when you’re building a custom block, so I’ll be interested to hear if anyone’s explored that already, and yeah, please do reach out to me or Kai, or Isabelle to discuss that, as I’m sure they’d be very interested.
Birgit Pauli-Haack: Awesome. Awesome. All right. I think that concludes our changelog of 13.4. It has a few quality of life things, great enhancements for some of the pieces and then also for developers. So yeah, test it out. It’s now available in the repo, and that brings us to the section of what’s an active development or discuss and needs some input.
What’s in Active Development or Discussed
If you had something that you wanted to talk about, like the ability to control interactivity states in the editor, that, that’s in the works, and I saw that, is that the java state or the visited state or what else, do you talk about that?
Dave Smith: Yeah, absolutely. Well, you’ve covered it pretty well there. I mean, there’s been a request for quite a while to be able to change the way that things look based on how you interact with an element. I think probably the classic example is if you’ve got a navigation menu, and sometimes when you hover over one of the items in that menu, it changes visually, doesn’t it, perhaps the color changes or there’s a background or there’s an underlying, and that isn’t possible currently in the editor, which is obviously quite a big failing at the moment and something we need to address.
So there’s work underway to allow the ability to target these things, and it’s actually a much more complex thing than you’d imagine to achieve in a robust manner, because we need to consider things like, it should be only limited to specific elements and specific properties because it’s not good to have, if you’re rolling over a heading, you don’t want that suddenly changing link color, I mean that would be a very bad thing for accessibility, for some people that will really throw them off.
So it should only be things like anchors and things that you can interact with or focus. So we’re going to be starting rolling this out. It’s going to be, starting with a technical implementation first, so it’ll land first in theme JSON, so developers will be able to take use of it. But ultimately, it will be rolled out to the global sales interface. So in the future one day, hopefully by 6.1, we will see, you might be able to go into your navigation block, set the color of the text to be blue, for example, but then say, “Oh, but when the text is hovered or your mouse rolls over it, I want it to go to yellow.
And if someone focuses it with a keyboard, I want to have a blue underline underneath it.” And you’ll be able to do that all through the editor. So again, another way that we’re removing the need for users to necessarily to understand the ins and outs of CSS, pseudo selectors and things like that. So yeah, a shout out to Andre Draganescu for his work on this feature. And if you want to follow up, it’s Gutenberg issue number 38277.
Birgit Pauli-Haack: Yes. And of course we will have the link to that issue in the show notes. Now does it also cover in the navigation bar when I am on the page, does it also trigger the active kind of state of… So I’m on my about page, does that about page, is there a possibility to give that a different color when I’m on the about page, so kind of help with the navigation and kind of… Yeah.
Dave Smith: Yeah. So there is an active pseudo selector in CSS that we could include in this and that might help a bit, but I think in terms of styling something based on what page you are on, if it’s the current page, for example, then I think there is a known bug again that, that is something that we’d need to add programmatically in CSS and in PHP to determine, are you on that page and which nav item represents that page and then add the appropriate class name.
So there’s kind of two ways that could be tackled. But I mean, ultimately it should be open to any CSS, pseudo selector, but just probably on a limited number of elements, and we’ve got to liaise with the community and especially the accessibility team to determine what is the most appropriate. So there’s some really, really good designs that are already out in the wild about this, on that issue.
And I definitely encourage people to check that out because it shows how the interactions will work, and if you think there should be certain things that it’s able to do or it’s not able to do then now is the time to input because it’s under active development right now and being designed as we speak, so it’d be great to hear from people if they’ve got thoughts on it.
Birgit Pauli-Haack: All right. And then I think I mentioned it briefly before. So in the Gutenberg Times weekend edition of 215, I listed three block theme JSON generator or theme generators. And now we have a fourth one to come that’s the great block theme plugin that will be… We have a link in the show notes to the getup repo, but it will be a community plugin. What do you know more about it?
Dave Smith: Yeah, this is a plugin that’s kind of spun out of work that my team would be doing. I mentioned earlier that we’ve been working on improving the developer and theme or theme authoring experience. And what we found is that there are some things we wanted to do that aren’t necessarily that appropriate to land in court, it could add additional complexity that everyday users don’t want to have.
For example, the much requested feature, which is when you are editing templates in the site editor people often say, “I want those changes to be persisted back to the file system as pattern files or template part files,” sorry, “Templates or template part files.” But for a normal user, that’s not something that you’d probably want to do, but if you’re creating a theme from scratch, it very much is. So what has been born out of this is this create block theme plugin, create block theme, being the operative word there, theme.
Birgit Pauli-Haack: Mm-hmm.
Dave Smith: And it used to be owned by Automattic, but we decided that it was something that would be beneficial to the wider community. So it’s now been open sourced and it’s now the property of the WordPress project. And it’s very much targeted at theme builders. So if you’re someone who wants to create a theme from scratch, then this plugin is likely to be something you want to at least take a look at.
And as I said, things like saving to file system and giving you extra export controls are there, it’s far from perfect at this point, and I mean, a lot of it has to be accessed from its own dedicated setting screen. It’s not fully integrated with the editor much as we would like, but it’s definitely showing promise, and we’re hoping that it’ll become the sort of, almost like a standard plugin for the WordPress ecosystem for crafting block themes from scratch.
Birgit Pauli-Haack: Yeah. And I like that it also offers a possibility to create a child theme of the current activity theme, and that you can also clone themes. So it’s quite powerful in the idea and has already quite a few options in there. And you install it on your site, right, if I understand that correctly.
Dave Smith: Yes.
Birgit Pauli-Haack: And then you have an additional menu item under appearance with a new page that’s called, create block theme, and then you have all the options that are in there, like set up, style, customization, templates and the save part. And of course you can always use the export theme from the site editor or from the plugin to download the theme. So it’s quite an interesting plugin and I know that the community has been waiting for that. All right.
Well, this is the end of the show. It’s marvelous. And thank you very much for your great contributions here, Dave, you’ve given us a lot of insights into the background of some of the features and some of the work. So I want to remind everyone again on save-the-date of July 22nd, 11:00 AM Eastern to 1500 UTC with a live Q&A, with the Pew Research Team who builds sites with a block editor, first approach. Also, Dave, when people want to connect with you, how can they find you, and what’s the URL of your YouTube channel?
Dave Smith: Yeah, absolutely. So I usually appear as, getdave or sometimes get_dave on various websites around the internet. And if you want to get in touch with me, you can find me on WordPress Slack. But also be sure to check out my YouTube channel and you can access that with a link that’s going to be published in the show notes.
Birgit Pauli-Haack: Fabulous. So, Mary, do you have anything that you didn’t get in before? So now is your chance.
Mary Job: No, I think we covered everything we wanted to.
Birgit Pauli-Haack: Yeah. How can people reach you?
Mary Job: Oh, me, I’m maryjob on Twitter. I like spending my time on the streets of Twitter.
Birgit Pauli-Haack: All right. And as always, the show notes will be published on gutenbergtimes.com for this podcast. This is episode 68, and if you have questions or suggestions or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. So thank you, Mary, for being with us. Thank you, Dave. And thank you everybody for listening. This is it for me, I say goodbye. And until the next time.
Dave Smith: Thank you for having me. See you next time. Bye.
Mary Job: Thank you, Dave.