Gutenberg Changelog #96 – Gutenberg plugins versions 17.6 and 17.7, Mega Menus, Interactivity API and WordPress 6.5

In this episode, Tammie Lister and Birgit Pauli-Haack discuss Gutenberg Changelog #96 – Gutenberg plugins versions 17.6 and 17.7, Mega Menus, Interactivity API and WordPress 6.5

Show Notes / Transcript

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Birgit Pauli-Haack

Show Notes

Special Guest: Tammie Lister

• @karmatosed on Twitter, WordPress, GitHub
• WP Product Talk podcast, Designing for the Future of WordPress
• Editor Tips

Community Contributions

• Proposal for Core Blocks in the Directory
• Overlapping problems by Anne McCarthy
•  Hallway Hangout: Let’s chat about overlapping problems in the Site Editor

What’s Released:

• WordPress 6.5 Beta 1
• WordPress 6.5 Beta 2
• What’s new in Gutenberg 17.6? (31 January)
• What’s new in Gutenberg 17.7? (14th February)
• Episode 73: Inside the Interactivity API
• Experimenting with block-based mega menus

What’s in active development or discussed

Section Styling, Colorways, and Typesets for WP 6.6

Meetup: How to build modern web layouts with WordPress blocks

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello and welcome to our 96th episode of the Gutenberg Changelog podcast. Today, we’ll talk about Gutenberg plugins version 17.6, 17.7, WordPress 6.5 and some more and it’s exciting times in the WordPress space. I’m your host, Birgit Pauli-Haack, curator at the Gutenberg Times and a full-time core contributor for the WordPress Open Source Project sponsored by Automattic, Five for the Future Program. So happy to have Tammie Lister again with me here on the show, and thank you for taking the time again. And so, Tammie, how are you today and what are you working on these days?

Tammie Lister: Hi, I’m really pleased to be here. So I’ve been working on some many fun projects. I’ve been working on classic themes. I’ve been also working on some custom projects with new products and sites, and I’ve been also working on supporting products through a project called Guildenberg. Yeah, I’ve been just working on some really fun stuff lately and enjoying and embracing that.

Birgit Pauli-Haack: Wonderful. Yes, so what’s Guildenberg?

Tammie Lister: Guildenberg is a guild of products. So it’s an app store and it’s also supporting members who are just dealing with partnerships and also a collective together of people who are creating products and looking at different ways that we can support each other and support through. There’s going to be more on that as it goes. Initially, it’s an app store. It started with a Black Friday deal and it’s going on from there.

Birgit Pauli-Haack: Awesome. Awesome. Speaking of product, you also were recently on the podcast, WP Product Talk and talked with Zack Katz and Amber Hynes about designing for the future of WordPress, which started with a question, “What is the future of WordPress?” But it was a really good insight into how the feedback loop needs to be closed between product builders and those who built the software on top, on which they built the products.

I think it’s a very good shout out to say, “Okay, just don’t take it all, like the weather, it’s never going to change. You have to adapt.” It’s also something that I think the Gutenberg developers are open to a lot of feedback when it comes to extensibility. It might not be the right time when it comes, but it will be definitely open. And thank you for making that shout out there as well. There was a lot of other good stuff in the talk.

Tammie Lister: Yeah, it was really good to talk. And also I think sometimes people on both sides, you need to hear it. I know when I was creating both Guildenberg, I really just needed to hear and sometimes I didn’t. You don’t know what you don’t know.

Birgit Pauli-Haack: Right.

Tammie Lister: But also as I kind of said in the podcast, it’s really easy to think, “Oh, well if I log it’s never going to do it.” I did it the other day. I logged something about short codes. Will it get in? Probably not, but it’s probably going to start a conversation about that because really, it’s actually really important for classic to support in some way, something around that because it’s a problem from classic themes. So it’s more of saying, “Hey, this thing is going to prevent whatever, or this thing is blocking me. Is it blocking anyone else?” It’s more of those kinds of conversations to have, and I really think it’s about moving forward.

It’s really interesting when you start talking to people how complicated their stacks are and how you can think of in simple terms, the middle when you’re creating the product, but their stacks are complicated and in that podcast it was really curious to say when they’re creating, they’re creating the WordPress ecosystem, but they’re creating an ecosystems in the ecosystem. That’s the best way to put it, all these different frameworks and product spaces as well. Yeah, it kind of opens your mind a little bit of beyond just core and what core is used for. Yeah.

Birgit Pauli-Haack: Yeah. We just started the second iteration of the FSE Outreach Program that Anne started three and a half years ago and was actually focused just on the site editor for three and a half years, but now we broaden that up because phase 3 is coming. We need to have adoption of phase 2. And so if you, dear listeners, are interested in what future features will look like, to have a discussion on a higher level, not just on a bug report or something like that. Come to the Outreach channel on the WordPress Slack, now it’s shortened, it’s not FSE Outreach experiments. No, it’s just the outreach part and there are a lot of good people in there and we definitely value any thoughts on future products or features from there?

So we started out talking about you Tammie, and now it’s again about the community, but I also want our listeners to know about your new site that you have been feeding tips and tricks about the editor on a constant basis for the last four weeks, and there are probably about 25 or 30 tips already there. So how did you come about that? Why?

Tammie Lister: Yeah, really it was people, I was sharing the same information the same time. So a good example is, people just didn’t know how to do the list view or people didn’t know how to do things that we presumed that everybody knows how to do in the Site Editor or the block editor. And you can really change someone’s life when you show them how to use the list view or you show them how to do something, it suddenly changes their workflow and you can presume that someone knows that or you can presume that someone finds it in a handbook and you can presume that there’s no need for it. So I was, “What could I do to help it?” And I just kind of thought, “Hey, maybe there could be a Twitter site.” It was kind of my original thing. I think it’s going to end up with literally a search form.

It’s going to be the best format for it at the moment. It’s a post that goes out and then the search form is down the bottom. I think the final form, if you’re talking Pokemon, of this site is probably a search box and some tags because I’m kind of enjoying queuing up each weekend and then just having them post. That feels good. It’s really interesting. I want to mix up some of the up and coming stuff as well, because I think that’s useful because it gets a bit confusing whether someone’s using the plugin or not. An example is the post page and the post lists could be different for you, might be different, so tagging some things of up and coming as well.

But yeah, it was really just, I’m not training, but I’ve been going through a lot of helping people with dev and sharing my knowledge because that’s a beautiful thing to do. And in it just saying, “Hey, this is my workflow.” And people go, “How did you do that?” And it’s like, “Okay, people don’t actually know how to do this.” And we have a lot of presumptions, particularly because the editors are a little bit more established or we feel they’re more established and spoiler, they’re not for many people.

Birgit Pauli-Haack: Yeah, no, it’s a good service and I really like those little tips and tricks that you published there. Thank you for going through that.

Tammie Lister: And I would love to know more, so if anyone’s got any, I want to find a way that I get people’s tips. I’m trying to work out how that happens because there’s got to be ones that I’m missing as well.

Birgit Pauli-Haack: Yeah.

Tammie Lister: I don’t know.

Birgit Pauli-Haack: I remember at the beginning when the block editor came out, there was also kind of, “What’s the slash command?” “Oh, you don’t have to use it.”

Tammie Lister: Yeah. And so many people when they… I love that. Because I remember when it was created and it’s like, “This really levels up your workflow.” And it does to this day.

Birgit Pauli-Haack: Absolutely.

Tammie Lister: … this view is the same. Yeah, there’s so many things that unlock powerful commands, copying, discovering the preferences setting for the first time. You’re like, “Oh, where was that all my life?”

Birgit Pauli-Haack: Yeah, no, and I didn’t realize that we actually had in the preferences a switch on custom fields or not. The meta boxes on the bottom.

Tammie Lister: Yeah. How to turn on and off blocks as well, but people really don’t discover that for a while.

Birgit Pauli-Haack: Yeah. Even the blocks that came in with your block collections. Yeah, it’s a long list. Yeah. 

Community Contributions

So speaking about community contributions, there’s a proposal on GitHub on discussing through going forward, do we need additional blocks that are maintained by the Gutenberg developers? Should they be in the editor itself or should they just be discoverable through the single block plugin, but they’re maintained by contributors? So what comes to mind is the time to share block or an accordion block or a card block or a tabs. Are these all things that everybody needs to have or should they just be in a separate plugin and then be installed when they are needed? And it’s an interesting discussion. Of course we share the links in the show notes. What do you think about that?

Tammie Lister: It’s interesting you say cards because for me, I think the biggest thing this raises is, “What is a pattern and what is a block?” And the big question I find a lot of people when they’re first exploring it, there’s not necessarily a right or wrong answer, or what I come to generally, dynamic is where I come down to but then again, that’s not always a straight answer. But I think a lot of the times when people are making a block, it’s a pattern. So really thinking about, should these be blocks, should these be patterns? Is something to think about. So when we’re talking about the cards, maybe if it has options, maybe if it has different settings, yes, it’s a block, but if it’s just a pattern of cards, to me, that’s a card. If it’s got a loop and it has content, then, yes. So yeah, I love the idea of more.

So accordion is such a good example because I think pretty much every agency has had to make their own accordion block or everyone has had to. So yes, please, let’s support one. Again, I think Slider, whether we want to or not, but as accessible as we can. I’m using those words because accessibility in Slider is not necessarily great, but there’s an opportunity here that we can set some best practices for some awkward blocks and some awkward experiences, that if we don’t set some best practices, they can be quite wooly and wild. So I think that’s also something that’s maybe not getting set here. Setting some of those in would be really nice.

So you learn from core blocks, how to make them, so being able to learn. Having an accordion block you can extend, would be really, really powerful. I again, wonder whether some of these are extending the query block would be some of them or whether they’re formats. So yeah, I love them, but also I think we have to think of what do we have already? What can be used and do they apply to that more? So yes, but it would be my consideration because hundreds of blocks is really difficult to find what you really want. So as long as we have them documented and have the useful ones, then yeah, but accordion block is such a good example that you said.

Birgit Pauli-Haack: Yeah, there’s some concerns about maintainability. If it’s in the Gutenberg repo, it might get more attention by maintainers, but I’m not quite sure whether that’s so valid because some of the core blocks haven’t had any attention in three years and still have valid blocks.

Tammie Lister: I think the presumption of maintainability is, I think some of these will get maintained just because they’re going to be popular and just because they’re going to be used. So accordion, okay, do we like it or not. Tabs is another one, which is also a companion to an accordion one, right? Tab block, whether we want it or not, products is going to be a really common pattern that people have, tab content. So really having those hidden area blocks, which is one of those ones, is this going to be something that probably?

Again, I think making sure that they’re documented, making sure that they have clear paths of contribution. There may even just be people that just contribute to them, which could be a way that agencies contribute. And I kind of am curious if this is an onboard way that just some agencies just see contribution and that could be really awesome, that they just do contribution through these blocks.

Birgit Pauli-Haack: Yeah, right.

Tammie Lister: There got to be some of these blocks already existing out there that could be pivoted in, rather than reinventing the wheel because everybody has these blocks already as well. So I think we’re going to move on to Anne. Anne in her post, she wrote a post called Overlapping Problems. This addresses a complexity that arises when multiple issues coexist. It’s really good and it kind of builds on from this Twitter thread by Brian, and there’s also going to be a Hallway Hangout and it’s called, Let’s Chat about the overlapping problems in the Site Editor, on the 27th of February at 17:00 UTC.

All of it kind of is the effects of those, I’m calling them paper cut problems, those little problems that stack up and those need for adaptive problem solving, Anne gives some great examples. There is a giant Twitter X, whatever you want to call it. I’m really curious what you think about this? My own personal feelings are that I think we’ve just got to do a lot of listening and move into that space and I’m really excited to hear the Hallway Hangout, but what do you think?

Birgit Pauli-Haack: Yeah, I think there are some interesting problems to solve that are once you use it, that might come a little bit more obvious and then they run into it, especially when you work with agencies. It’s hard to decide if you change something for the entire site or just for the block. So do we put it in theme.json or do we let the user handle whatever color it is, that’s one thing. But it does not really, I have sometimes the decision-making paralysis, so where do I tackle that? And also I don’t like it, where did I set this so I can fix it later on? It’s kind of a lot of places where I can get lost, and I think that’s one of the things that a lot of users have. Also, what hasn’t been yet solved for an enlightened experience is the navigation. There’s a lot of experimentation going on.

There’s a lot of, oh, there was in the last two years, and I think we’re getting there and it has been great work being done, but it’s also something to think about, lean back and say, “Okay, we have a new user, how do they perceive it and all that.” I think also one of the biggest problems that I see is, and I had this discussion again two or three weeks ago, was the difference between template editing and page editing and people getting lost and creating their own site with new templates instead of new pages, which then bring some other problems with it. So I think listening is definitely something that is a good skill set here when we talk with agencies, also to really hear the underlying problem.

One I had just on a call on Hallway Hangout on the intrinsic design was that, although there are no view ports or simple breakpoints tools there, but there are hard coded view ports in Gutenberg that you can change as an agency developer, you need to walk around that quite extensively. And that is certainly something I wasn’t really aware of, but knowing that that’s happening, hard coded things are not really good for flexibility, what’s the next step forward to kind of get this out?

So yeah. Certainly, I set out to collect some of the things and find the strategic places to tackle them. We also worked on the extensibility, triage issues, triaging kind of thing. So there are a lot of activities and initiatives going on and I love those, they are now happening, when really the vision has been materialized of the Site Editor and the block editor. Many people come around and say, “Wow, I didn’t know how that kind of shook out.” But now tackling those overlapping problems is definitely something to set out for 6.6. Yeah.

Tammie Lister: I think people are also learning that they don’t have to or what they can turn on, and I think that that’s the message, it’s on or off is, you don’t have to do that and learning where you can turn on but it’s still really tricky, with that and those controls. And you just made a really good point about, you have to know so well the experience, the variables and the components to be able to make some of those stress cases, edge cases because they cause you stress, decisions that there’s a certain level you are going to make because you’ve had to use it already. So there’s almost like, it’s really difficult to get the space to do that whilst you’re trying to also keep up with clients and you’re trying to do stuff.

So it really is about just the experiments we’re seeing, the explorations we’re seeing, and just having these conversations on both sides with listening and open and just on the implementation side, which agency freelancers, people building from products, from everything, all perspectives are really, really key here is, “Hey, I’m trying to do this thing. I can’t do this thing. I can’t do it because of.” And sharing that, quite simply is incredibly powerful. It’s just being able to have those real cases of how does that person do that and okay, 10, 20 other people want to do that, as you’re saying with extensibility. So yeah, it’s one of those just collecting how many are trying to do it and it’s not by numbers because it might just be like it’s one really, really critical thing that we can fix, but it’s important.

Birgit Pauli-Haack: So just want to reiterate, the Hallway Hangout, it’s an informal discussion among contributors, is taking place February 27th at 17:00 UTC. Yeah, they’re going to share the Zoom link in the core editor channel just so you know where to go. Of course, also share the invitation and Anne’s blog post in the show notes. 

What’s Released – WordPress 6.5 Beta 1 and 2

Next up is what’s released and that we are in hot, hot release cycle for WordPress 6.5, Beta 1 was released last week, Beta 2 was released this week and it’s really, really timed, dear listeners, to test your plugins themes sites to see if they’re compatible or if there are any issues before they happen and do bug reports. Whatever can be fixed in the release cycle does not get rolled out to millions of people.

So there’s a big, big call for testing and the test team has a list of things how to do this and what to test. But I also have some numbers, so the highest average number of enhancement per Gutenberg release is 68 and the second highest average total PRs per Gutenberg release is 198, so similar to 6.4 with 67 and 192. But, however, 6.4 only included 6 Gutenberg versions, while 6.5 now includes 10 Gutenberg versions. So even those that are end of year releases were really big. So it’s really interesting, huge numbers. The amount of total PRs in the cycle was 1,892.

Yeah, that’s just some numbers, some people like numbers. And they were on the Gutenberg side for the edit for WordPress 6.5, there were 25 new contributors who submitted PRs to the cycle. So that’s also really cool. Well, there is a source of truth coming out. The field guide is coming out with Release Candidate 1 that is scheduled for March 4th, so Beta 3 is next week and then in two weeks is Release Candidate, that’s where also the dev notes come out. 

Gutenberg 17.6

And we are going to talk about Gutenberg 17.6 now and 17.7 because those were the big, big push to get all the great features in, especially those that offered developers to extend things. So yeah, first up 17.6.

Tammie Lister: So the first one we have in the future is the interactivity API. I’m going to kind of list a couple of things, but they’re, I’m going to get onto the examples because those are two very big words. That I always feel with the interactivity API, it’s good to have examples because it feels quite abstract, if that makes sense. So there’s been adding things and just a maturing of it, that’s the best way that you can see it.

Birgit Pauli-Haack: Right.

Tammie Lister: So it exists and it’s there, is the best way to put it. But there’s also been, so Mario, Ryan and Josepha discussed it on the 73rd episode. Wow, 73rd of the WP Briefing podcast, and there will be a link in show links. But also really exciting is Nick has just done a working example, he’s going to document mega menus, very excited about that. Using the interactivity API and why I’m excited about that is it’s opening up possibilities of things to be able to do and the whole point that we’ve been having this discussion, there’s a theme, of people needing open and tools and things, and this is just that to me. I’d love your input, but it just shows examples of things that you’d be like, “Oh, well I can’t do that so therefore, I can’t use the Site Editor or therefore, I can’t use these aspects of the new things.” But now we are starting to be able to see working examples of where maybe you can’t use it in production, but you could start to be able to use it.

Birgit Pauli-Haack: And what this example from Nick Diego is doing, is using two features that are coming with WordPress 6.51. One is to actually add your custom block to a navigation block. And the second one is the interactivity API becoming a public API, for developers to use. So we will have in the show notes a small blog post and also the link to the GitHub repo where you can look at the code of the custom block that enables a mega menu. But I think what I also read was that a lot of people are waiting for the mega menu, but it’s such an individual site-related need that I think it’s going to be really hard to make it a 80%, 20% kind of thing, to have it in core.

But I think one of the purposes of the interactivity API coming into core is to open it up for developers to bring their site needs to WordPress and solve them with their own code. But what the interactivity API also brings, and that was very clear in the briefing, is also that now interactivity, every developer solved it themselves in an agency or for a block plugin, but there is no standard and the interactivity API brings the standards. So now something that was done by an agency that works together with a plugin, actually the blocks can talk to each other.

Tammie Lister: Cool.

Birgit Pauli-Haack: … yeah. So in that area, and that I think is really opening up the whole ecosystem quite a bit.

Tammie Lister: I’m really excited. It’s interesting you mentioned, I don’t think there’s one way to solve for the mega menus either. I know templates have been talked about, yes. We’ve also even got the tiny blocks, we’ve got all these options, but again, it comes down to having this functionality in these tools, which is super exciting.

Birgit Pauli-Haack: Totally, totally. And so I bring us a little bit down because the next thing I wanted to, it’s not a big thing, it’s a small thing, but we add default font sizes option to the theme.json files. So themes can now create default font sizes and make them available to their users for that and add them to their spectrum there.

Tammie Lister: And that brings in the font library as well because the font library is coming in. So that kind of ties in and I will say, the font defaults that you now have in theme.json available, any defaults make it so much easier to create from. There’s a number of times you had to set defaults and not that you will use the defaults all the time, but having things like default font sizes, having things like default spacings and spacing settings to give you shadows, give you a good or maybe, that you could use and also allow you to have some sketch places. So moving on from that, we have custom fields and block editor. So again, add effects for box shadow tools to block inspector. And then we move on to enhancements, which I’ll let you kind of take.

Birgit Pauli-Haack: Yeah, and I wanted to say the box shadow tools were available for a while already in the Gutenberg plugin, but then now come in also to WordPress 6.5, so users can actually apply drop shadows to certain blocks. It’s only available to four blocks, the button, the image and the columns block, just to see if there’s other needs that need to be built into it. But I really like it already because the little tool that shows you not only the default block shadows that core comes with, it also if a theme decided to add some presets for that, they’ll also show up in this little box where you can select those, those shadows.

Tammie Lister: It’s really fun to make the shadows and even you can really do presets and your own presets pretty easily, in theme.json. I’ve been playing with that.

Birgit Pauli-Haack: Yeah, Justin Tadlock did a great article on that a while ago actually, on the developer blog and we’ll reference that in the show notes. And I’m actually working on an update on that just for the user interface of that and how that all works together. In the enhancements, there’s a lot of things happening and with, I don’t know, 160 or 170 PRs, we are not going to read all of them. And yeah, you definitely want to look through the Changelog on the what’s new posts, but I like that the theme now has a color on wrapper. I wanted to point that out for the theme developers. So there is a foreground color for the theme component, so you can set that. And interactivity API has received a ton of PRs and I think we need to wait for the dev notes to really talk about that, otherwise it’s going to be a two-hour podcast today. Is there anything that you are looking for?

Tammie Lister: So on the block library, there’s some interesting stuff. Footnotes support for other custom post types, word quote block has padding and margin support, which again, this is part of when something’s put out, you do a best guess when a core block is put out, a lot of these are best guess, and we also talked earlier about, there’s so many blocks already getting back around to them. So the word quote block, I don’t think it has had some work for a while, but really adding some padding and margin, that’s probably something that, I know it’s going to be something that a lot of people have been putting in their theme.json or have been putting in custom siding quite a while.

So now being able to have that is really, really important. And aspect ratio remove support on the group block for now, so that’s obviously something that maybe wasn’t working as well. So there were all these kind of things that are put out there and iterated on, which I think is part of this, is looking at each core block as still a work in progress, which I think is really, really important as we maintain them, still really having those as well.

Birgit Pauli-Haack: Yeah, the aspect ratio is actually available for the color block, but for the group block because all the additional blocks in there that kind of didn’t work out.

Tammie Lister: Yeah, it’s really messy.

Birgit Pauli-Haack: Yeah. And just to call that out, that if you have tried working with it, it’s also not working, so they pulled it out from that.

Tammie Lister: And we use group block, so grid is coming or grid is there in experimental, and I think group block is a stop gap block, that’s one of the ways that I see it. And other times where we will be using other tools at some point and because of that, some of the tools that it will have eventually or should have eventually, don’t work. We shouldn’t to use it for stop gap. There’s many a time I use group block, probably wouldn’t in the future.

Birgit Pauli-Haack: So yeah. Yeah, probably. Yeah, unless it’s a pattern, then you’re probably good with putting it in a group block so it has…

Tammie Lister: Yeah, but who knows? They may have a pattern wrap, I don’t know.

Birgit Pauli-Haack: … pattern wrap?

Tammie Lister: Yeah, we may to, right, because group block is kind of like our default, put it in a group block, right? Which that may also be… We are deviating, but that also is something that if you have a block with certain functionality that doesn’t necessarily always work for it because it’s on its own. It’s a really useful block, but it’s not necessarily adaptable in those senses. It kind of works, but it kind of doesn’t. Color block had that problem for a very long time. We used to even use, I remember trying to use color block as a background for my whole entire page because that was the only way that you could get background images, back in the day.

Birgit Pauli-Haack: But now you can get it in a group block.

Tammie Lister: You can, and I was so glad when you could get that, but it literally was the only way you get forward. So all these changes are coming over time and that also shows how things have adapted as well.

Birgit Pauli-Haack: Yeah, and what is now in 17.6 as well as in 17.7 are the final touches on the data views, which enable the grid layout for templates and parts, as well as adding the bulk actions to the page views. Bulk actions are edit or delete. Yeah, I think that those are the two. But the data views, they’re coming to WordPress 6.5, but only in the Site Editor except for, well they’re coming in the Site Editor also for pages but not for posts. So that’s kind of the only place where you have to get out of the editor and come through that. So it’s really interesting and I like them. Some interfaces are a little bit overlapping, that kind of confused me, but yeah, I’m easily confused. So it’s like you move into a new neighborhood and all of a sudden, all the sounds are kind of in your face and by the time you get settled in two weeks, you don’t hear the trauma anymore, you don’t hear the…

Tammie Lister: But it’s existing UI patterns, so it’s not based on patterns that we have, like in uncommon applications, so it has its roots in familiarity at least.

Birgit Pauli-Haack: … yeah, absolutely. Yeah.

Tammie Lister: So moving on, we have site editor, we have group templates and a sidebar list, anytime that you have the ability to group things. I’m very excited because we have giant lists in our sidebar, so this is kind of awesome I think.

Birgit Pauli-Haack: … exactly, exactly. Yeah, there are quite a few other things as well that the global site changes, yeah, it’s added to the safe flow. And then what I overlooked was that there is now a live preview on the theme that has been in there since 6.4 and in the plugin, but there is now you can also activate it in the modal, so there’s an activation place in there, so it streamlines that process. 

On the patterns, we have a few items that are, in terms of the pattern overrides, I don’t think we talk about the pattern overrides here at the podcast. So that’s a new way to work with sync patterns. It’s an added feature that you can create a pattern and then with maybe a heading and a paragraph and an image, and then you can style it, you save it and then you can go to each one of those content blocks and say, “Allow overrides.” In the advanced section in the sidebar.

And then when somebody or your editor uses that pattern, they can change the picture, they can change the headline or the paragraph. But when you decide for each instance and when you decide as a site owner or a theme developer or agency developer to say, “Okay, I want to change the design of that pattern.” Then you can change the original and there’s an interface for that and then those changes propagate overall those instances where it was used. So if you change the background, the background has changed for all of them. So that’s the pattern overrides idea. And they are available to four blocks, and that’s the image block, the heading block, a paragraph and button block. That’s where you can decide on pattern overrides as a user for your patterns. So now you can use the site editor to build patterns, pattern overrides and sync patterns, content lock patterns, they all have the same words, patterns.

Tammie Lister: So I guess the big one to move on to is a font library and there’s a lot listed here. I’m going to list out some stuff and then I’d love for you to maybe describe a bit about the workflow because you’re really good at stuff like that. And I’d love to kind of hear in your own words that. There’s update, update, update is what we have listed here and refactor because it’s ready and it’s there. So we have the modal, we have the ability to disable if you want, using a PHP filter, which is super important because if something exists, having the ability to turn it off is also important. Improving the font collection, rest controller, making notices more consistent, update the font families. But I’d love for you to maybe describe some of the workflow and features and what you think of this?

Birgit Pauli-Haack: So the font library. Oh yeah, I get the hard part. All right. Okay. So the font library is, think of it as similar to the media library. So it has the function that you can upload fonts and then you can enable the fonts and you can use the fonts in your further design of the site. But you as a site owner are not dependent on the theme developer to make decisions on your font. You can do it yourself and there are font foundries out there. Well, the biggest one is the Google fonts, but there are also Adobe fonts there.

And you as a designer probably know more. It’s a little bit hard to find how to get to the font management space. And that is in the style sidebar, on the right hand side, above the fonts section, there’s a little icon that has two dots and a few lines. It’s not a cog for work tools, but it still shows some management features there. And then it opens up a modal where you can see which fonts are installed already and then you get an upload button and then you can upload your fonts with all the fonts collection or how do you call it, the different styles of the fonts. So it’s the semi-bold or bold or these kinds of variations.

Tammie Lister: Variations, yeah.

Birgit Pauli-Haack: Yeah. And then you have options to turn them off. So if you have a font that has 16 variations, you only use three of them, you can switch off all the other ones. So this is really good, it’s pretty comprehensive as a feature already. So yeah, test it out and find the break it because it has been really in development for what, four major releases?

Tammie Lister: A while, yeah.

Birgit Pauli-Haack: A while, yeah.

Tammie Lister: You mentioned the positioning. I think if you are using the create block theme, always get that wrong, plugin, you’re kind of trained a certain place to go to, theme font management. So yes, it is in a different place. So your furniture has moved, but your furniture is still there. It is a feature that is the missing feature of styling. We have color management, we have media management, so font management is, and you did beautifully with that description, I knew you would. So it is the missing one. Yeah, it is going to be really exciting what people have. And back to your point about good ways to do things in standardization, I think this is also, it’s one of those ways that it’s easy to add fonts the wrong way when you don’t know how to do it the right way. And when you know how to do it the right way, you don’t have a problem.

Absolutely, so this tool maybe isn’t for someone that has that in their workflow, that absolutely has pre-packaging fonts, who uses whatever they use in their workflows. This is quite often probably for people that don’t know how to do that and want that flexibility. And it’s a great way to be able to have control on your site without having to have yet another bit of custom code from a random site and trusting and all those kinds of things. So yeah, it is a really easy way to just do things right, from the right start and know that you’re being performant as well.

Birgit Pauli-Haack: Yeah. And I think lots of freedom sometimes is not always a good thing, but for many people, they want the freedom to kind of figure out what they actually want. Sometimes you don’t know what you want until you see…

Tammie Lister: A lot of people aren’t going to turn this on because papyrus and…

Birgit Pauli-Haack: … yeah, for many agencies, the piece that we have highlighted is the most important part is, the disabled fonts library UI, using a PHP filter, that’s going to be in your theme functions code for some of them.

Tammie Lister: That’s really good that we’ve got that from the start because quite often, that shows from the start having these features to turn off. When we first had some features because it was harder to do or these features wouldn’t always turn off a bulb so easily. So definitely from the start making sure, particularly these really styling opinionated features, they are from the start having these PHP filters that’s recognizing this work flow that you are going to have a PHP, you now can turn it off. So I think that’s great, that couldn’t be better having that. So yeah.

Birgit Pauli-Haack: No, the font library is opening up in the site editor for theme developers or theme designers who are not developers because they get all the tools in one place.

Tammie Lister: And I use it, sorry, I always go back to the Dreamweaver analogy because that’s what I do. I pretty much a couple of hours a day, I’ll be sketching in the Site Editor on a vocal site and that’s how I come up with new designs now. It’s like, maybe do some styling, but it is as Dreamweaver, that’s when I use it as my sketchbook because that’s how you come up with the ideas and how you explore things now.

Birgit Pauli-Haack: Yeah, I know you have a lot of work to do and you have a lot of irons in fires, but I think what would be really cool would be a live stream where you just kind of sketch out a theme and design a theme for a few minutes.

Tammie Lister: I use Dreamweaver, it’s super fun.

Birgit Pauli-Haack: Using Dreamweaver and the Site Editor of WordPress or something like that.

Tammie Lister: Because also you make decisions there and there. And sometimes I’ll be doing it for a couple of hours and you make decisions there and then with the blocks, and I mean you make some really bad code spaghetti, you really do, but then you unpick the code in your Visual Studio is my editor. Because the export button, the best thing in the world, you hit export and then you have your mess, like your sketchbook, and then you can refine it. That’s the best way I can describe my workflow for creating the theme. It’s not everybody’s, but that’s mine.

Birgit Pauli-Haack: But it would be interesting to see it from…

Tammie Lister: Yeah, I will. I should do that. Thank you.

Birgit Pauli-Haack: … absolutely, yeah. So the next thing is extensibility part, and we talked about it briefly when we talked about Nick’s mega menu that is now an update for the navigation block that can render hooked inner blocks. So you can have your custom block go in there or other blocks to go into the navigation block. That opens us up for not only the allowed ones, which was, I think the search block was one of them, and page list block was one of them, but now you can just have anyone in there, any block in there. And there was another, in 17.7, there was a bug fix that also does the lineups in the order list. Yeah, it’s all the same styling there and have it all in an order list. Right, yeah.

Tammie Lister: So we have new APIs, we have two which are block API, and they are block bindings, API ad block bindings, PHP, registration mechanisms and post MetaSource and the experimental flag. Say that fast. And the block bindings API refactor logic into block binding’s class and singleton pattern. Oh, that’s the term, singleton pattern.

Birgit Pauli-Haack: That’s a different pattern, I’m telling you.

Tammie Lister: I know.

Birgit Pauli-Haack: And singleton? Is there something like a simpleton?

Tammie Lister: I don’t know.

Birgit Pauli-Haack: I don’t know but something’s that really hard.

Tammie Lister: To me, this just shows refinement of it. I’m curious what you think as well?

Birgit Pauli-Haack: Yeah. Well the block bindings API is really exciting. API coming and in 17.6 it was under the experimental flag, but 17.7 it was open up for public consumption. So it will come to WordPress 6.5 and that is, that you can connect a block to a, for instance, post meta custom field. So you can have a paragraph that uses the custom field of weather and every day when you do an entry, you say in the custom field, “Okay, the weather is rainy and windy and under 25 degrees.” And then you have a place on the template where you can output that particular custom field with a block. And of course right now, the block binder is the first iteration in WordPress, but it’s mostly for developers.

Justin Tadlock already published on the developer blog an introduction to the block bindings API to connect it to custom fields. And he has the example of having an image and an old tag for the image stored in a custom field. I just published a rather, almost no code example, using the good old meta boxes to edit custom fields because this iteration doesn’t have a use of interface yet, to add or edit custom fields. So because that’s a little bit tricky, not so much for the text fields, but when you go into select boxes, when you go into radio buttons or checkboxes or these kinds of things, you need some underlying developer registration there. But yeah, I share both articles in the show notes because it kind of helps you with the 6.5, what is it doing? And even if you are a developer, it’s really interesting to see how you can. Because it actually will take care of some of the little blocks that we used to create to just get the content out of a post meta field, and that is streamlining the whole thing.

So I think that was it for 17.6. I’m just scrolling fast through and I’m getting a little motion sickness here going on. Yeah, I highlighted two more overrides thing, but it’s just what we already talked about. Oh, and 17.6 also brings a great drag and drop feature. The drag and drop was actually a big push to make that easier to do, and now you can create rows and galleries with just dragging and dropping things. So if you have a picture on your canvas in the block editor and then you drag another picture next to that image, it will create automatically a gallery. So that’s really-

Tammie Lister: I have seen people try to do that with the editor.

Birgit Pauli-Haack: … now they can actually.

Tammie Lister: Yeah. But it’s why would they not try and do that? Of course.

Birgit Pauli-Haack: … yeah. Right, right, right. Yeah. And that’s certainly something for your editor tips maybe, when 6.5 is out. For documentation, there is now a video demonstration for the quick starter guide. So the quick start guide for block development was revamped and has a nice example and walks us through all the steps. But it now also supports a video that it’s like, if somebody explains it to you and shows it to you, it’s easier to grasp than just reading a wall of text and that’s kind of in there. So we are definitely looking out for that. It was actually 17.6 where the block binding experimental flag was removed so people could show and run. That was it, that was good works, 17.6.

Gutenberg 17.7

Tammie Lister: Okay, we on 17.7 now, I feel like?

Birgit Pauli-Haack: Yes, we’re going right into it.

Tammie Lister: Yeah, attacking everything.

Birgit Pauli-Haack: Attacking everything. Yeah.

Tammie Lister: So I’m going to go through, there’s some enhancements there. So we have in data views, diving straight into, and of course in the show notes, it’s going to be a kind of link to this as well, in 17.7. I assume we’re going to go through this quite lightly because it’s just that included in 16.5, but it’s worth remembering that we have delete bulk action to patterns, really useful deleting bulk. And selection and bulk action to grid view, again super useful. And add primary filter, API, I’ve forgotten how to use words apparently. Again, it’s all these ads and removes, it’s that refinement, which I think is really important to say. And showing the sync status filter by default, again, it’s these little things you’re like, “Whoa, they would be useful.” The tips, right? Yeah, over to you.

Birgit Pauli-Haack: Yeah, definitely. But the database is really, there was a major push for the block library. I’m just pointing out two things. Social icons now have the updated Patreon icon, so if your website uses that, you now get the new icon for that. And in 17.7 there was the block shadow support added to the columns and image block, which we talked about a bit. And 17.7 was actually the major push for the drag and drop, also to dragging from the inserter, all from the desktop to template parts and allowing moving things within the template parts. And so that is really cool. Yeah.

Tammie Lister: Yeah. And we’ve got in the block editor, we’ve got add block UI for nav, block link UI and imprinting new UX invoking which text link UI. Again, links are really, navigation thorny problem, linking in navigation, thorny problem, the interface. I worked on that for a while myself, I know how complicated linking really is to get right and feel okay. And then open a new tab from link, remove and open a new tab from link preview, is also there. So obviously the feedback was, should be removed as well. So it’s iterating and really improving those areas.

Birgit Pauli-Haack: Definitely. Yeah. What I really like on the link UI, is actually the search from hosts on your site. So if you publish it out there, you can really search for, “Oh, I want to link to the block bindings API in particular.” And it finds it for you and you just have to link to it. What it does not find is yet, anchor links on the same page and that is still an open PR, but I think it’s already worked on.

Tammie Lister: That will be magic when that happens, because if you think of, well, very particular education or science documentation, it’s just all handbooks. It’s required information.

Birgit Pauli-Haack: Absolutely. Yeah. And then maybe we get also a revamp of the table of content blocks when that is in there.

Tammie Lister: Oh, that would be so good. Yeah.

Birgit Pauli-Haack: All right. So there was a lot of things in this 17.7. There was for the extensibility, that the navigation block can now be used. Third-party blocks can now be used in a navigation block as descendants of the navigation block. We talked about that already here.

Tammie Lister: I see a note that you’ve put by the performance, which is really interesting, which is from Riad again, which I always love his performance posts, they’re just the great ones. There’s lots of performance improvements in a single release. There’s two times faster editor loading time. I’ve always been very careful how I say performance. And four times faster typing, processing, faster previews, interactions like block selection in WordPress 5.0. Wow. Because if you look at-

Birgit Pauli-Haack: WordPress 6.5?

Tammie Lister: … sorry. Yeah. 6.5. Yeah. What did my brain just do? My brain’s just tired everybody. Hello. Thank you for correcting me.

Birgit Pauli-Haack: The performance things that we had here are kind from Riad Benguella, and I think that triggered the 5.0 for you because there’s been good work.

Tammie Lister: I think I was maybe going with, since then they’ve been performance posts, that’s where I was going. My brain, good morning, my brain, it’s lunchtime. Can you tell it’s lunchtime in Europe for us. But those performance posts have always been really good because initially when the editor was created, it was, is it performant? Well, by having some measures that Riad did, it was really useful to literally know how performant it was compared to other things because you always get the perception of things are more or less performant, but actually having stats is really important. So I always get very excited when I see Riad commenting on performance.

Birgit Pauli-Haack: Yeah. And he’s working on it and he had this wonderful website. I don’t think I should mention it, but now I did, where he also tested some of the other plugins, how they work with a block editor and see how their performance is improving or decreasing, so to speak. So yeah, he’s very keen into that particular section of development. And that’s a good thing because the more features come in, the more load it might take. So yeah, there were quite a few efforts to bring some of the performance back to the block editor.

Tammie Lister: Every piece of UI that you add can add or take away, which is something I learned, it can take away with the performance. You sometimes think the most minimal interface is going to be the most performant, and it isn’t always, which is a brain flip, but just having that baseline and that data has been really true to be able to know. So yes, big shout out and call out on that one.

Birgit Pauli-Haack: Yeah. So I think we are through 17.7. There was a lot of fixing of things and a lot of adding things and bug fixing.

Tammie Lister: Right. Yes.

Birgit Pauli-Haack: And there’s also a huge set of documentation updates there with copying and formatting edits and fixing lists, formatting and all that. So there’s all this quality of life that it doesn’t interrupt your reading flow when these things are in there, but it’s also a residue from the update of the developer resources design-wise that happened in last month or in December. So some of the pages you definitely need to update to kind of follow the new design there.

Tammie Lister: Which is really good.

What’s in Active Development or Discussed

Birgit Pauli-Haack: Yeah. I think that’s it. Yeah. Excellent. Excellent. So, well, we are right into the show, and I think we have one section that is, what’s an active development and discussed. And what a lot of people are missing in Gutenberg and the patterns and the templates are actually a section styling. That you have a section that is styling that you can reuse that styling and apply it to other sections without having to go into fonts, go into color, go into border, go into dimension, go into padding, to replicate some of the styling, but not for the whole page or site, but only for sections. And the contributors are really working on getting that into the editor and I will share the links to that issue. That’s a tracking issue, where those discussions happen. And have you looked at that?

Tammie Lister: I have, and it reminds me back, my brain’s going back in the day of when early theme.json conversations about, what if you could just share a piece or you could share that easily with someone and be like, “Hey, I’ve created this awesome style snippet kind of thing and I just want to share it.” So I love that we’re doing this, but I also want a way that I can just be like, “Hey, I’ve got this awesome snippet that I want to share.” And do that as well. So I think that that’s also the piece I’m really curious about. I’m really curious about the Museum of Block Art and all the patterns. I would love a really easy way to share styling as well. So I feel we’re getting there, which is super exciting, but that kind of is good to me.

And block styles, which is ish or pattern styles is also something that I would love to see. And really future thinking pattern variations is something that I’ve had quite a few discussions with people of a need for pattern variations and be able to say, and this kind of falls into that of being able to say, “This is the default pattern.” But quite a lot of the time people are using the whole style variation when they don’t need to because they maybe just want to change a section. So yeah, this solves it, but the sharing and then having a pattern variations option is for the future maybe, as well. Yeah, I think for me, users are thinking of patterns and how can they have variations just as much as they’re thinking of blocks.

Birgit Pauli-Haack: … yeah, it’s kind of block style variations, is kind of one of the things where saying. Okay.

Tammie Lister: People think in patterns, they don’t think in blocks. If you shut your eyes, you don’t see a site build of blocks, you see a site of patterns. So you’re going to want pattern variations, not block variations.

Birgit Pauli-Haack: Right. Yeah. Or layout variations. Yeah, if you have certain layouts that you’re kind, “This is my site color layout.”

Tammie Lister: Yeah. Or template variations you are going to want. And again, people sometimes take patterns a little bit far and make the whole template a pattern. So yeah, there’s a whole best practices and conversations, but the sharing as well is super fun. But able to say to someone like, “Hey, I’ve got this amazing style that I just want to share.” And having a bank of them, even for the community, I don’t know?

Birgit Pauli-Haack: Have a little site there. Yeah. I was wondering…

Tammie Lister: A site of shadows.

Birgit Pauli-Haack: … well, some users are not really good at putting color combinations together, so there was also that.

Tammie Lister: They’re not. And also accessible colors are kind of hard. There’s some websites which are good, but being able to have like, “Hey, here’s a really accessible pattern style, using a pattern from the pattern directory that I’ve done a pattern variation, now I’m sharing the style.” That could be awesome for someone.

Birgit Pauli-Haack: That would be awesome.

Tammie Lister: … to put up and run, rather than having to be fixed to that style. So all of this is really exciting for the future.

Birgit Pauli-Haack: In your opinion, your listeners counts. So go in and share what you think about things and how you think about things because it will make things better. So that’s what wanted to share with you, because there was the idea to maybe get this into 6.5, but there was no way that the discussions end in time to act on certain decisions. Yeah. And with that, I think we’re at the of our Changelog 96 and with Tammie Lister, who is phenomenal to have you on the show again.

Tammie Lister: Thank you.

Birgit Pauli-Haack: Is there anything that you want to talk about that you didn’t get a chance to talk about before we close it?

Tammie Lister: No. I got to talk about everything I wanted to. Thank you so much for having me again on the podcast.

Birgit Pauli-Haack: All right. Well, it was absolutely my pleasure. And so before we end the show, there’s a Hallway Hangout coming up February 27th. There’s also a Developer Hours coming up with the layouts, how to build modern web layouts with WordPress blocks, with Justin Tadlock and Ryan Welcher and it’s also on February 27th, an hour before the Hallway Hangout on the overlapping problems. So you get the good things that is now possible and then you talk about some of the overlapping problem. Yeah. Or you decide either one of them will be fine. And that’s it, what I wanted to announce here.

And as always, dear listeners, the show notes will be published on gutenbergtimes.com/podcast and this is episode 96. And if you have questions, suggestions, or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Yes, that’s an email address. So thank you all and thank you for listening. And the next show will be after WordCamp Asia. WordCamp Asia is from the 8th to the 9th and the week following, we will have another podcast covering 17.8 and 17.9. And of course, Release Candidate with all the dev notes that we all will have. So thank you all for listening. Wish you all a good time and happy WordPressing. Goodbye. Bye, Tammie.

Tammie Lister: Bye. Thank you.