Gutenberg Changelog #109 – Gutenberg 19.4, Creating a Block Theme, Responsive Navigation Block Plugin

Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #109 - Gutenberg 19.4, Creating a Block Theme, Responsive Navigation Block Plugin
Loading
/

In this episode, Birgit Pauli-Haack and Anne Katzeff discuss Gutenberg 19.4, Creating a Block Theme, Responsive Navigation Block Plugin, and more.

Show Notes / Transcript

Show Notes

Special guest: Anne Katzeff

Announcements

Community Contributions

Gutenberg 19.4

What’s new in Gutenberg 19.4? (9 Oct)

What’s in active development or discussed

Twenty-Twenty-Five Default Theme

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello and welcome to our 109th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about Gutenberg 19.4, creating a block theme, Responsive Navigation Block plugin, and more.

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.

Today I’m delighted to team up with Anne Katzeff once more to spread the joy of WordPress. Anne is a theme developer who has embraced block themes and posts regularly in the Outreach channel with questions that helps others as well. Anne and I, we met in Florida, and we are co-organizers of the local WordPress Meetup. And she became a dear friend. Welcome to the show, Anne. How are you today?

Anne Katzeff: Hi, Birgit. It’s great to see you. Always enjoy talking with you. I’m doing well today. Thank you. How about yourself?

Birgit Pauli-Haack: I’m doing well. I finally got over my cold. I might still sound a little horsey like the last episode, and I apologize for that. I didn’t know until I listened to how bad it actually was.

Creating a Block Theme                                                       

Yeah. So Anne, you shared your learning on building your first block theme in a series of blog posts. So let me go right in there. What were your biggest wins looking back in your approach of building themes?

Anne Katzeff: All right, let’s dive right in. As I was reviewing it, I realized that way back, the seed of it was being invited to be a test case for the Create Block Theme plugin. And a couple of folks on that development team zoomed in with me and watched me live use the plugin my first time using it. So I didn’t know anything, it was really interesting for all of us because there was this learning curve and they were trying not to interfere and ask questions. So I was a tester and they monitored me, and that experience gave me the confidence to start exploring block theme design. And so I was quickly a fan of the Create Block Theme plugin. The very first clear takeaway for me at that time, it was still part the font embedment was still part of that plugin, and it’s now been introduced into Core. And I think that’s part of what the plugin’s role is is to serve as an exploration platform. And those features that people really find useful are gradually taken into Core and become part of that.

So that was the first one. And then creating a child theme. So I’ve always created child themes, I know how to do them in various ways. But to just have that one button to do it was like, “Oh, yay.” And then I went through a series of pain points as I was starting to… I was actually working on a real site and doing all this for the first time with block themes. So I got familiar with Global Settings, and my first pain point was the content and wide measurements. I didn’t understand that, so I had to play around with that and wrap my brain around it. And then segueing from there into the group layout settings, that was a real pain point for me. It was like, “What? What are you talking about?” So all these new concepts. And for me to learn these things, I just play around. I’m not afraid to make mistakes, so I just try this, try that.

I got a feeling for how all those things work, found the connection between nested or group blocks and the width characteristics within them. And I realized, God, there’s so much flexibility in this building of block themes. So then I went on to navigation, another pain point for me. It really was a completely different way of constructing a menu. So that took a lot of exploration, a lot of challenges. And I think I figured it out logistically how to add the pages and posts. That wasn’t the problem. The problem was more how to style it. So in Global Settings you have your typography, your colors, and your layout. And I saw colors, links, just weren’t really applying to what was happening in the navigation. So I gradually discovered that you have to go into the template or rather the template part. Let me look at my notes because I had to review all this yesterday like, “Okay, so how does this work?”

Yeah, it’s styled in the block of a nav pattern, which is my process, and then that’s placed into a template.

Birgit Pauli-Haack: So say that again. Your process is to create a pattern, put the navigation block in there, and then add that pattern to a header.

Anne Katzeff: To a header. Yeah. Right. So in case, because of the synced part of the pattern, we wanted to be able to edit it globally, I think. This is months ago, so I’m trying to remember what was it that I figured out.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: So I think that’s what I did. And I just sort of stumbled, gradually stumbled on to how to style the navigation and the hover. I think there may be a hover now, not positive about this, but at the time I had to use custom CSS.

Birgit Pauli-Haack: Yeah. For the link, there is now a hover feature in the Global Style. So you could always do it via the theme.json file. Yeah.

Anne Katzeff: True. Right.

Birgit Pauli-Haack: So you kind of ventured out to create or design the theme right in the Site Editor. And kind of setting up your, first, your color palettes, then your typography, and then the layouts. So that’s the width that the wide widths kind of thing. And then you try to do the header and the navigation and everything in a child theme. Is that kind of….

Anne Katzeff: You got it. Yeah. So theme.json was a new language for me. I know HTML and CSS, so I didn’t want to dive into that cold. So I’m using the full Site Editor as a bridge, and that was also part of my learning curve and my still part of my process is to use the full Site Editor, make all my customiza… or as many customizations in there that I can along with occasional CSS. See, I come into it with, I’m a custom CSS girl, but I realized quickly, “Oh, I don’t need to do that anymore. There’s really no need for that style CSS file aside from registering the theme.” So a little tweak in my process there. And finally, when things are looking good or a certain milestone, I’ll save the changes to the theme. Now, I had a lot of trepidation about doing this. I couldn’t breathe the first time I did it because I wasn’t sure what exactly is going to happen.

Birgit Pauli-Haack: Is my theme going to go away?

Anne Katzeff: Is my theme going to disappear? So I took the leap and did it, and then I exported that theme. And that was a big light bulb for me. Then I realized, “Oh, if I do that, then I can do version control.” Because I have control over the theme files. Once you save what’s done in the full Site Editor, once you save it to the theme, it takes those from the database and puts them into the theme files. That was the key for me. I’m still doing it that way. That’s where I’m at today.

Birgit Pauli-Haack: So that’s where you are today. So did you create new templates for your theme or for that client site?

Anne Katzeff: I probably did. Let me see. Oh yeah, for the blog part, yes, I absolutely did. So I used Twenty Twenty Four as my parent theme, and it comes packaged with certain patterns and options for the blog.

Birgit Pauli-Haack: Okay, yeah. And then now I understand it. So the child theme you took from Twenty Twenty-Four.

Anne Katzeff: Yes.

Birgit Pauli-Haack: And then you modified it with the colors and the typography and all the others?

Anne Katzeff: Yes.

Birgit Pauli-Haack: Cool, cool, cool. So the listeners, you can read up about that on Anne Katzeff’s blog where she has four parts and really goes into the details on how she managed the navigation and the header and why child theme and all that.

Anne Katzeff: Yeah. I wasn’t sure how many parts it would turn into.

Birgit Pauli-Haack: Right.

Anne Katzeff: So I didn’t ever say part one of blah, blah, blah, but I think four parts, that’s it.

Birgit Pauli-Haack: Yeah, right now, that’s what I found on your blog. I watched it kind of growing a bit and feeling that. You said that you had to try a lot of trial and error to kind of figure things out. How do you feel about creating your second block theme?

Anne Katzeff: Much better, much more comfortable. Yeah.

Birgit Pauli-Haack: What would you start first with? What would you start with?

Anne Katzeff: Well, strangely enough, the very first time I did all this, created my first block theme, I actually forgot to create the child theme. So I was moving along in Twenty Twenty Four, making all these modifications, and then I realized, “Oh, I have to make my child theme.” So I wasn’t sure again what will happen if I do that. So I basically started from scratch because I didn’t want to mess up anything. So now it’s so crazy, Birgit, because that’s always the first step for me is to create a child theme. And I know a lot of people just would take the parent theme Twenty Twenty Four, whatever it is they want to modify and run with it. And that’s a perfectly fine way to do it too. It’s just that I like to know that my customizations will stick if the Twenty Twenty Four theme is updated. And indeed it has been updated.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: What was the question? Oh, was it easier? Yes, definitely.

Birgit Pauli-Haack: Yeah. And what would be your first step that… From the trial and error, what are the learnings kind of? How would you approach it now, apart from creating the child theme first?

Anne Katzeff: Yeah, I would do pretty much what I’ve already done the first time. So I’d go into the child theme is being modified. I’d go through the full Site Editor and modify my Global Settings, tackle my navigation almost right away probably after my Global Settings with typography, choosing the font and colors. And determining what that inner content width should be because I think the default is 840 maybe, and that’s a little too narrow for me. Yeah. So I make it a little bit wider. I try to stick with what works and not mess around too much.

Birgit Pauli-Haack: So you want your theme to be connected with the Twenty Twenty-Four, so when that gets updated, your theme gets updated too, but you keep the modifications from-

Anne Katzeff: Exactly. Yeah.

Birgit Pauli-Haack: But the Create Block Theme plugin also gives you two more choices. One is to clone the current theme.

Anne Katzeff: Right.

Birgit Pauli-Haack: So then you make it a new theme, which is not, it’s detached from Twenty Twenty-Four. And the other one is that you can start a theme from scratch. It’s not entirely from scratch, but you get the bare minimum on templates and hardly any presets for that. So you can kind of go into the theme.json or in your Site Editor and start from a white background pretty much.

Anne Katzeff: Yep.

Birgit Pauli-Haack: So you don’t have, I’m not quite sure what the trigger would be to actually use a child theme with that setting, because if you can clone it, then you get it. But then the updates from Twenty Twenty-Four, you wouldn’t get.

Anne Katzeff: I think I do it with client work as a good fallback for them, a safety net.

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: If I were designing a theme to submit to the repository, I would probably use the clone feature and not worry so much about any updates because it would be a standalone theme. So that’s kind of the delineation for me.

Birgit Pauli-Haack: Okay, cool. Yeah, no, I find that very interesting to talk to theme developers and how they… So what are the new concepts that you find easier now that you went through both of them? The classic theme, you’re a long time classic theme developer and now building block themes. What was the shift? Do you need to think a little bit differently with something? 

Anne Katzeff: Well, as a user of block themes, that was an easy transition for me. But yet clients still struggle with that. I think they get initially intimidated, and then once I do some tutorials with them, they go, “Oh, okay, I’m good.” But getting into the full Site Editor, there were several new concepts, primarily, like templates, I understood. But template parts and patterns, I wasn’t quite sure what is the exact difference here. And gradually I came to understand blocks are the place that we begin. We take a bunch of blocks to form patterns perhaps, and then we can reuse those patterns if they’re synced into the template parts. And the template parts are what form the layouts for the templates. So once I played around with all those different things, I understood the sequence. And they are building blocks, literally. And I also figured out, “Oh, template parts are actually mini templates.” They’re like little guys that could stand on their own maybe at some point in time.

So it all kind of started to fall into place. I got a nice comment this morning on part three of my blog series, which is about the header. And where I explain that pattern of blocks to patterns to template parts to templates. And the person appreciated the breakdown. I went, “Oh, I’m always relieved when people find value in what I say.” It’s like, “Okay, someone’s listening.” Someone like me, like Sally Field. So it was validating to get that feedback.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: So that was the big concept for me. And then little tweaks in the language with the Create Block Theme plugin. Some of the options at the very beginning are still there now. But I think the language was tweaked or maybe it was just my evolution because perhaps the saving changes to the theme was always there. Was it always there?

Birgit Pauli-Haack: Yeah. That was a Core feature of the Create Block Theme that you could take everything out of the database into a theme and have it in the files.

Anne Katzeff: And it seems so straightforward now when we’re talking about it. And I think on some level I got it, but on another level I really didn’t. And so I was scared. I’m scared to do that, but then I….

Birgit Pauli-Haack: You braved it.

Anne Katzeff: I did. And it’s like a miracle.

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

Anne Katzeff: The Outreach channel is a great place where we can almost talk directly with developers, including the wonderful Create Block Theme plugin team and get answers to our questions. No question seems to be a silly one in that Slack channel, which is nice.

Birgit Pauli-Haack: Yeah, so dear listeners, I think we talked about it before with Jessica Lyschik as well, that the Outreach channel is definitely a place where you can meet a few of the developer theme builders and also block builders. And also I know that there are quite a few that hang out there, like Justin Tadlock and Nick Diego, myself and a few others. Yeah. I know that Rich Tabor once in a while kind of looks at some of the questions because it’s really important to figure out what is not working right or what is not explained right. And to find the difference about it, we need to have a conversation and that’s the place to have the conversation. So recently I had a conversation, it was not in the channel, but I realized that there is another way to… In the Site Editor on the right-hand side, when you create a template, you can also click on a design section underneath it, and then you get different ways to form the template.

And those are actually patterns, template patterns pretty much. So they have a theme, they have a template type, and then you say archive. So when you create a new archive template, you get a suggestion of a series of patterns if they’re with a theme. Yeah. And that was kind of really something that I had a hard time getting my head around. Where does it all live? And it lives in a pattern directory of a default theme. You will find them in the Twenty Twenty-Four. You also will find them in Twenty Twenty-Five. Yeah. So that’s another way of offering your theme users multiple ways to skin the cat or to display some of the things that you want to display on an archive page for a category or a single post template. And you have multiple patterns of those. Then you can offer them when they click on a new template or switch them up.

Anne Katzeff: Yeah. And then there are all those patterns on WordPress.org that you can just… If you’re logged in, it’s so easy you just copy it, I think, not remembering off the top of my head, but it’s a wonderful feature.

Birgit Pauli-Haack: Yeah. It would be added to your Canvas. Yeah. I think the new Zoom Out… Have you tried it with the new Zoom Out view?

Anne Katzeff: Oh, yeah.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: Oh, yeah.

Birgit Pauli-Haack: What do you think about it?

Anne Katzeff: Well, I have notes about that. Let me gather my thoughts here.

Birgit Pauli-Haack: You have notes about it.

Anne Katzeff: Yeah, I do because I had a lot of reactions to it. One last thought before we segue into that about the patterns. Not only are there some wonderful patterns that can be inspiring, but you can learn so much from their structure on how to do a layout. So there are multipurpose patterns out there. So the Zoom Out separator, I think it begins to address the issue of very cluttered UI, user interface. There’s a lot packed into the real estate here, and we’ve had ongoing discussions about it. You’ve got the left and right sidebars, the admin sidebar, the full Site Editor sidebar. And then if you open up the list view, you’ve got another sidebar, pop-up modals, dropdown sub-menus. It’s really hard to find your way and then remember where you are. So I think this feature is making strides, it still needs work.

So far from what I gather, it looks like just a one-step zoom. I had a thought initially. Wouldn’t it be cool if it were a magnifying kind of thing?

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: I’m not sure if we need that, but it would be cool. And it’s almost currently a toggle on and off.

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: We’re starting to get a number of view-related options I noticed, because that Zoom thing is tucked between several other icons up on that upper right corner, the display and other things.

Birgit Pauli-Haack: Yeah, the preview.

Anne Katzeff: The preview. Yeah.

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: And I’m thinking when you reach a certain threshold of stuff that is related, can’t we find a way to group them and reduce that clutter?

Birgit Pauli-Haack: Mm-hmm. Yeah.

Anne Katzeff: These are just some of the thoughts I had.

Birgit Pauli-Haack: Yeah, you’re right.

Anne Katzeff: But the other thing that happened while I was looking at this and seeing all the work being done, there’s a great discussion on GitHub as this feature evolves. And to me it was such a wonderful example of WordPress collaborative teamwork.

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: Some snippets of the conversation are like, “During the act of dragging, everything else should be inert.” “Ah, yes.” And then another one. “We can be much better at changing the visual appearance of the Editor, highlighting drop zones, for instance.” “Ah.” It’s great stuff if you have the time to read through it. It just made me so appreciative of the details the….

Birgit Pauli-Haack: That people think about. Yeah.

Anne Katzeff: People are working really hard at this stuff.

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: And it doesn’t take… It’s not a simple fix sometimes, it takes discussion and testing. So you’ve put the issue out there, there’s some discussion and then there’s testing, and then there’s resolution and tweaking, and it’s very cool. It made me really happy to be a part of it even as an observer.

Birgit Pauli-Haack: Yeah, it’s a great description of how actually things are getting done in Gutenberg and how many people are kind of working on it and discussing it. So the Zoom Out view is right now, I think the biggest advantage is when you’re working with patterns and you’re trying to create a page with a subset of patterns. So you have a hero pattern, then you have a services pattern, and then you have a post pattern and you kind of want to assemble one page with all the different patterns. So you actually, and then afterwards… And that’s how you use the Zoom Out because it only highlights the sections. So it’s between the patterns. So you’re not putting a pattern inside another pattern, inside another pattern.

Anne Katzeff: Right.

Birgit Pauli-Haack: Which I have done multiple times. And I said, “Well, I’ll get myself out of it again.” So I got a real trouble thing there.

Anne Katzeff: Yeah.

Birgit Pauli-Haack: And so for that, it is really good because then you can just… And there on the left-hand side with a Zoom Out, there are four or five action items that you can do. One is delete a full pattern, which is sometimes really difficult. And then you can move a pattern up and down just if you had it in the wrong place. Yeah. Those are the two things that I can remember for those.

Anne Katzeff: Yeah. Reducing the number of distractions.

Birgit Pauli-Haack: Yes, that’s pretty much kind of a single purpose kind of zoom kind of thing. And when you’re done with all the patterns, you can zoom in again with clicking on the toggle again. And then manage all the single blocks that you have there now with the pattern. So yeah, changing the images, changing the headlines, changing the text, and you don’t have to worry about the patterns again. I think that’s right now the biggest advantage of using Zoom Out. I think it’s not particularly helpful in any other context right now, but it’s also, you can’t select a single block while in Zoom Out. You have to get out of Zoom Out before to do that. So it kind of separates the concerns a little bit and takes care of the overwhelm. 

Anne Katzeff: Yeah, totally.

Birgit Pauli-Haack: Yeah, there are I think 50 patterns in the Twenty Twenty-Five or so. So it’s really interesting to kind of move them around and mix and match them. Yeah. So yeah. Any other insights that you want to share with our listeners about your block theme building adventures before we go into our announcements and to the rest of the show?

Anne Katzeff: Ooh, let’s see. While you were talking about all that, I was thinking about the navigation again. And now we mentioned there’s a new mobile option on that, which I have yet to explore, but I’ve been seeing posts about it on Twitter. So get ready, hold onto your hats. Yeah.

Birgit Pauli-Haack: Yeah, we are going to talk a little bit later about that. That’s a new plugin, a plugin to test things out, but we can talk about it now. 

Community Contributions – Responsive Navigation Block

So Dave Smith, who’s a Core contributor on Gutenberg and has actually worked on a Navigation Block quite a bit before, he’s now working on the Zoom Out, and he’s also a release lead for 6.7. He created a standalone plugin where you can have a Responsive Navigation Block. So it comes with two variations, a Navigation Block for desktop and a Navigation Block for mobile. And you can style them differently. So you need to install the plugin and then you can create the different Navigation Blocks for a certain header, what? Yeah, template.

Anne Katzeff: Would it pick up automatically? It picks up the content from the regular navigation, desktop navigation?

Birgit Pauli-Haack: No, you need to design it. You need to design.

Anne Katzeff: Okay.

Birgit Pauli-Haack: Is it a desktop or is it a mobile kind of thing?

Anne Katzeff: Okay.

Birgit Pauli-Haack: And you can rename them as well. Yeah, so Dave did a longer video, 25 minutes. I haven’t watched it completely, but I will share the link to it in the show notes. I went for Jamie Marsland’s three-minute piece because it all came out today or yesterday kind of thing, so I didn’t get a chance to see it all.

Anne Katzeff: It’s hot off the press.

Birgit Pauli-Haack: Hot off the press. Yes. So you install it and then you decide, “Okay, which one is the desktop? Which one’s the mobile?”

Anne Katzeff: Okay.

Birgit Pauli-Haack: And then you can give the mobile a different background or something like that. And then it picks up on the… And even when you look at the… edit the mobile Block, Navigation Block, it actually reduces the Canvas to a mobile size.

Anne Katzeff: Oh, wow.

Birgit Pauli-Haack: So it’s also-

Anne Katzeff: You get a preview.

Birgit Pauli-Haack: … that part of it. You get a preview of how it is.

Anne Katzeff: Oh, nice.

Birgit Pauli-Haack: So it’s also using some of the Zoom Out, Zoom In kind methods in the background.

Anne Katzeff: Right. Oh, the mind, how it works. Yeah.

Birgit Pauli-Haack: So yeah, it’s kind of really interesting. Yeah. We share the link in the show notes and then also to the two videos so you can kind of learn more about it dear listeners.

Anne Katzeff: Now you were saying you can rename those menus.

Birgit Pauli-Haack: Yes.

Anne Katzeff: And that just sparked another memory for me because yesterday I think I wanted to rename a pattern and I wasn’t able to do it. I was like, “Really? I can’t rename a pattern.”

Birgit Pauli-Haack: Well, was it your own pattern? Or was it a pattern that came from the theme?

Anne Katzeff: Well, it’s all mine now because it’s embedded in my child theme.

Birgit Pauli-Haack: Right. But when you said, okay… If it’s in the theme, you probably are not able to. So you need to duplicate it first to rename it.

Anne Katzeff: Oh.

Birgit Pauli-Haack: Or you go into your files if you have them and rename it there because they don’t want… I don’t think it’s something that you want to rename the pattern from your theme because when the update comes, it kind of will overwrite stuff again if it’s the same….

Anne Katzeff: Got you.

Birgit Pauli-Haack: Yeah. So it’s kind of that one is definitely something to…

Anne Katzeff: Always something to experiment with. Yeah. Okay.

Announcements

Birgit Pauli-Haack: Yeah. So we have announcements here.

Anne Katzeff: Okay.

Birgit Pauli-Haack: WordPress 6.7 Beta 2 has come out and is ready for testing. Remember final release is November 12th and it’s coming closer and closer. Now the WordPress test team also has some great instructions on how you can assist in testing the new versions. It’s in the Help Test WordPress 6.7 aptly titled post. It’s a long post, but it has a great table of contents menu where you can kind of pick the feature that you want to test and then you go in and get some nice instructions. First, a little explanation of how it’s supposed to work, and then some instructions, what you can do with it. I went through the theme testing instructions there. This is actually a great way to explore the new theme. 

Anne Katzeff: Absolutely.

Birgit Pauli-Haack: … some testing instructions. Yeah. So go ahead and start testing your own plugins and themes and everything if they’re compatible, how they’re compatible to 6.7. The release candidate is scheduled for October 20th. That’s also when the Field Guide comes out. So if you are waiting for the developer notes that come with a Field Guide, that’s the date to look out for. That’s also where all the developer related APIs have all the explanations in there. So are you looking forward to 6.7?

Anne Katzeff: Sure.

Birgit Pauli-Haack: Anything in particular?

Anne Katzeff: Maybe. I don’t know off the top of my head. As we go through the enhancements, I’ll chime in.

Birgit Pauli-Haack: Yeah. All right. Yeah. So there’s another development that I wanted to let you know about it. WPGraphQL, it’s a way to use GraphQL with WordPress Database and it’s mostly used for headless WordPress developers or by them. Jason Bahl has started working for Automattic and brings his WPGraphQL plugin with him and it’s going to be a canonical plugin, meaning it’s going to be a plugin that will be maintained by Core developers. So he’s back full-time working on the plugin, which he couldn’t do at WP Engine. So that is a great development out of that. And I remember 2018, or was it even ’17? I think it was in 2018 that Jason Bahl developed or showcased his WPGraphQL plugin at WordCamp US. And that seems so far away again, now it’s about six years. Yeah. And having developed that since then almost full time, it’s really very robust. And a lot of enterprise level websites are actually built on top of it.

Anne Katzeff: Ah.

Birgit Pauli-Haack: Yeah. Because to integrate WordPress with other data and need to use WordPress for the content management or content creation. But the other website or the website that use that content is also connecting with other data.

Anne Katzeff: Oh, wow.

Birgit Pauli-Haack: So they needed a front-end on top of it that’s in JavaScript or any other maybe Next.js or something like that. But the WPGraphQL kind of connects all those pieces. It’s really cool.

Anne Katzeff: Wow. Sounds cool.

Birgit Pauli-Haack: Yeah. And there is a new Developer Hours on the schedule and it will change the broadcast method. So if you are a regular attendee of the Developer Hours every two weeks of the month, you had to go to Zoom first and then log in and had to be at Meetup first, then on Zoom first, and then you were able to kind of attend the Developer Hours. Now all these processes are shortened and it will be a live stream on the WordPress channel on YouTube. So you just kind of subscribe to that, it’s announced there. And I will share of course the link in the show notes. The next Developer Hours is happening on Tuesday, October 15th, and at 15:00 UTC. If my calculations are correct, that’s 5:00 P.M. Central Europe Time or 11:00 A.M. Eastern Time. And that’s directly from the YouTube channel. You don’t have to log in… You only have to log into YouTube, which you probably have an account for and then you can be participating in the chat.

So the topic is How to Simplify Client Editing in WordPress. And the description reads like, “Discover the full potential of WordPress Editor and Site Editor in these presentations designed to showcase the many ways you can simplify, curate the ways your clients edit content in WordPress. Will tackle a common challenge, creating a more controlled and user-friendly block editing experience that aligns with brand guidelines, limits user capabilities and prevents accidental changes and more. So you learn practical techniques like lock patterns, enabling content only editing, disabling specific blocks, configuring the theme.json, adjust editor settings and restrict block functionality.” So it’s Nick Diego and Jamie Marsland and they will discuss the current limitations and how you contribute to the future of WordPress to better support your clients and non-technical users. 

Anne Katzeff: It sounds great.

Birgit Pauli-Haack: It’s a really great topic and these are so many questions that we get when we are on WordCamps or in other places on how can I make this go away? Kind of how can I…

Anne Katzeff: Ah.

Birgit Pauli-Haack: Yeah, how can I not have them change the color of things? Or something like that. Yeah, so…

Anne Katzeff: That’s exactly the branding issue. Exactly.

Birgit Pauli-Haack: Right. Yeah.

Anne Katzeff: And fonts.

Birgit Pauli-Haack: Yeah. It’s a big change.

Anne Katzeff: Don’t change the type. I know you like those curly Q fonts, but no one can read them.

Birgit Pauli-Haack: I know it’s an existential fear from designers that clients mock up the design that they spend so much time to do.

Anne Katzeff: It’s real.

Birgit Pauli-Haack: It’s real. Yeah. So join Nick Diego and Jamie Marsland on October 15th, 15:00 UTC. All right. So we talked about the plugin. 

What’s Released – Gutenberg 19.4

Yeah, we are now to Gutenberg 19.4. And that’s been released this week and it had 186 PRs from 54 contributors. And of those 54 contributors, six… Well, let me look at it first. Yeah, six, were new of them, so congratulations for your first contribution to Gutenberg to those new contributors. 

Anne Katzeff: And again, what struck me was the amount of work that goes into it and fixing bugs, cleaning up the UI. There seems to be a lot more attention on that, which makes my heart sing.

Birgit Pauli-Haack: Yeah, it’s the first Beta of 6.7 came out October 1st. And this is the first Gutenberg plugin after that that has a lot of bug fixes in there that will come into 6.7. The enhancements are locked, so those won’t get into 6.7, but all the bug fixes that or most of them will come into 6.7. 

Enhancements

So let’s start with the enhancements. So for end users, it’s probably easier to find the Query Loop Block. First of all, why would you know what that’s called because it sounds so technical? But it’s the posts and the post types and the blogs and all that. So all these keywords are now discoverable when you look for that. So what else is in there? Do you want to take turns on it?

Anne Katzeff: Oh, I saw the File Block, allow content only editing. It’s just there’s so many little things that users come across. And if you find something that doesn’t seem right, just let the team know because they clean it up and it looks like that is one of the bugs that’s been fixed. So that was good.

Birgit Pauli-Haack: Yeah. If it was in content only, you weren’t able to upload anything or do anything.

Anne Katzeff: Yeah. I mean, what? So it’s a stumbling block that’s been removed. And the other one with the navigator, they just added a new smoother transition for exiting certain scenarios. So I like that. Instead of this jarring screen change. What else did we see? We talked about the Zooming feature.

Birgit Pauli-Haack: Zoom Out, yeah, we already talked about that.

Anne Katzeff: Yeah.

Birgit Pauli-Haack: Yeah. There are quite a few enhancements for that. There’s a content only Zoom Out Mode and then there’s also only Zoom Out on inserters on block selection.

Anne Katzeff: So help me understand this one, Birgit, because I think it’s meant to ensure that the default block inserters display on hover, even on Zoom Out Mode. So is that what it addressed?

Birgit Pauli-Haack: Yeah. So you have that in Canvas too, that when you hover between blocks that you all of a sudden get a sibling inserter. And that’s a little bit [inaudible 00:39:27] in the Zoom Out Mode. So it only will show up, let the inserter show when you actually select a block.

Anne Katzeff: Got you.

Birgit Pauli-Haack: So it’s not going to hover… When you hover over Zoom Out, it was showing every time you’re going from one place to the next, it shows you an inserter, which you probably wouldn’t need at that moment because you are just hovering.

Anne Katzeff: Exactly.

Birgit Pauli-Haack: So now they’re doing it when you select the block.

Anne Katzeff: Yeah. That’s fine-tuning. Yeah.

Birgit Pauli-Haack: It’s definitely-

Anne Katzeff: That was great.

Birgit Pauli-Haack: So the Zoom Out, so what will come to the 6.7 is the Zoom Out Mode for patterns, but they’re also working on other things on the Zoom Out and for the Zoom Out Mode and kind of figuring out, okay, when can you do what in different scenarios?

Anne Katzeff: Okay.

Birgit Pauli-Haack: And so it’s definitely an active development. And we’ll only have a reduced from the plugin to the 6.7. There’s only a subset of that it will come to 6.7 that they are very confident about. And the other ones, they’re still kind of trying to figure things out. Yeah. And the data forms, the Data Views. We talked about quite a lot here on the podcast and also on the Weekend Edition. With 19.4, there’s also the data forms component that’s part of the Data Views that has now combined field support. So you can have form labels and fields next to each other. So they are in columns or something like that.

Anne Katzeff: Ah.

Birgit Pauli-Haack: So the component now offers that particular feature for developers who use that for their plugins.

Anne Katzeff: Okay. Good. And then something about the Edit Mode, they updated the tools menu with the right and slash design order. There was a lot of attention given to that. And to be honest, I’ve never ever used that feature. It’s like I don’t really see the point of it, but… To me, it just adds to the clutter. I’m all for clearing out the clutter.

Birgit Pauli-Haack: Yeah. I think it’s also there for those who are traveling the Canvas via keyboard navigation, so they can get in and out. So the problem there is that you need to navigate either to go from block to block or go into the block. And that’s where the right end design or the right end design mode kind of changes. Is it either do you edit the block or do you want to select the block kind of? So for someone who is around the Canvas with a keyboard, there’s a toggle in between. For those who actually see what they’re doing and use the mouse, it’s almost seamless. So that’s why you probably haven’t used it because you can select the block with a mouse and automatically are in the Edit Mode. But you can also scroll the Canvas and then point with a mouse to get into an Edit Mode. But when you’re around with a keyboard, you need the different modes to know if you are traveling up and down the Canvas or you’re going deeper into the block. I don’t know if I explained this.

Anne Katzeff: Okay. So it’s like an accessibility tool?

Birgit Pauli-Haack: Yes, absolutely.

Anne Katzeff: Okay. Got you. Thank you for that explanation.

Birgit Pauli-Haack: It probably also would get a little bit more prominent for the Zoom Out view because then there’s a different Edit Mode and a different Select Mode as well. So there’s similar concepts there that will come with the Zoom Out. But I’m really excited about the next one, and that is that you now have a command, palette command to add a new page within the Site Editor so you don’t have to get out and out and out, go to the pages…

Anne Katzeff: Yeah. Thank you. Absolutely. And it’s so sensible. It’s like tackling the separation of content and design. It’s just such a sensible addition. Yeah.

Birgit Pauli-Haack: Yeah. And there’s a little quality of life kind of change. For the connected blocks, the color is going to be purple, but now they also have a purple backdrop color. So you can really see, okay, this is… The color, the purple was nice, but it also was very subtle. So with the background it’s a little bit more obvious, ah, for the block.

Anne Katzeff: Okay. Yeah, because I wasn’t sure if I agreed with that enhancement. My concern was does it pass in accessibility tests?

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: And I would assume it does. That gets grayed out maybe for people with color blindness or issues.

Birgit Pauli-Haack: Yeah, I’m not an accessibility specialist, but I am sure they have at least checked the color contrast with it if it’s a grayed out kind of backdrop there.

Anne Katzeff: So the text is purple, it’s a darker purple on a lighter purple.

Birgit Pauli-Haack: Yeah, absolutely. Yeah.

Anne Katzeff: Okay.

Birgit Pauli-Haack: And it’s a more of blurry kind of backdrop. So it’s actually an icon kind of stands out there.

Anne Katzeff: Okay.

Birgit Pauli-Haack: So for the next one, the extensibility new feature is that the pre-save post and the save post filters that were before unstable are now stabilized. And the difference is that if they’re unstable, you never know what happens. There might be breaking changes if you use them for your plugin development. What they allow you is to add additional things to check before a post is saved. So if you don’t have an excerpt, you can, as a plugin developer, you could prevent the post to save until an excerpt is added to it or the featured image or something that… or any other kind of check that they want to do on the publishing thing. And you would use the pre-save post filter and then allow the save post filter as well if you want to save additional things with it.

So these features were all there before, but they had the unstable something, underscore unstable in front of it. And that means for any developer, “Okay, if I use this, I’m on my own.” There’s no documentation, there is no guarantee that it’s backwards compatible and any of that. It can change at any time. When it’s declared stable, it’s kind of the promise of backwards compatibility is kind of attached to it. So a lot of plugin developers are really happy about that, I would think.

Anne Katzeff: You’re so good at explaining things.

Birgit Pauli-Haack: Oh, really?

Anne Katzeff: Yes. Absolutely.

Birgit Pauli-Haack: Sometimes I think I’m kind of rambling a bit.

Anne Katzeff: No. Not for me. It works for me.

Birgit Pauli-Haack: Thank you. The Block Hooks are now supporting asynchronous filters and actions. So if you want to go out and do something with another feature, you can use async methods for your plugin and your blocks that you add to another block. That’s the Block Hooks, right? Block Hooks are, there’s a hook where you can say after this paragraph, put a link there or put a hash there for whatever. And then now you can do it with async filters and action. So cool. It’s an enhancement for the developers that can, so they can use modern stuff like JavaScript.

All right. So I think we are… Are we through the post or did…

Anne Katzeff: I think the enhancements.

Birgit Pauli-Haack: We’re through enhancements?

Anne Katzeff: I think so.

Documentation

Birgit Pauli-Haack: Yeah. There are two things I wanted to point out, I think from the documentation. Yeah. So speaking about Data Views, all the documentation is actually in the storybook site that’s attached to the Gutenberg repo. And they now added another page there that kind of adds a high level graphical representation of Data Views and data source attraction. Which is really helpful for those who want to use that. It’s a new API, so documentation, so it’s a little bit behind, but if you want to explore that, that’s definitely here for your perusal.

Anne Katzeff: I’m a big fan of visuals that help us understand concepts, so I like that one.

Birgit Pauli-Haack: Yeah, me too. Me too. Gives you a little map of your clutter brain. I don’t want to do mine. And there is another item in the documentation section of the Changelog. They added another page for Core concepts at the interactivity API documentation about using TypeScript within the interactivity API model. So that’s definitely worth a read for those who use the interactivity API or those who want to use them and still trying to figure out the use case, which can be hard. I cannot see that, we will get there. 

Code Quality

Speaking of stable, the BorderBoxControl component as well as the BorderControl and the BoxControl. These three components are now also promoted to stable. So it’s safe to use in your custom blocks or if you use them in your plugin settings pages as well. So I’m glad that there’s some work there to migrate things that have been around for a while to actually say, okay, make a decision. It’s stable and we support backwards compatibility for that. It’s definitely a commitment. I don’t know, some people have commitment issues but not developers. So that’s the Changelog from Gutenberg Plugin 19.4.

Well, thank you so much for going through that with me. I also know just today, the Developer blog has a roundup post every month called What’s New for Developers, and it comes out today. Today’s October the 10th, and the 10th is the publishing date. And I will add that to the show notes so you can also not only look at the 19.4, but also what’s coming from Core into 16.7 and what’s just new. There’s a ton of things in there. I reviewed it this morning and I was amazed what all is in there that was in 19.3, was in 19.4 and also comes with 6.7. So it’s definitely a great place to catch up. So now end the section-

Anne Katzeff: And I’ve been keeping an eye… I’m, sorry, Birgit.

Birgit Pauli-Haack: Yeah. Go ahead.

What’s in Active Development or Discussed

Anne Katzeff: I’ve been keeping an eye on the development and design of the next default theme Twenty Twenty Five.

Birgit Pauli-Haack: Okay. Yeah. 

Anne Katzeff: And initially I thought, “Oh, I’ll contribute to this.” And I just haven’t had the time, but I’m keeping an eye on it. I’m getting really excited about new things that are coming our way when that’s all ready… Several months ago there was a call for, I think Carolina may have done this, but someone probably Carolina said, “What would you like to see in the next default theme?” And one of the things I mentioned was some more portfolio type of options for artists and designers and folks like me. And sure enough, there’s a portfolio aspect to it for photo blogs and I would think other applications. There’s a bunch of stuff happening with grids like the density of grid layouts, the Data View options, patterns. We’ve got the, like we’ve been talking about today, the Zoom Out and the drag and drop… We didn’t actually mention the drag and drop part of the Zoom out, which-

Birgit Pauli-Haack: No, we didn’t.

Anne Katzeff: … that was one of the most exciting parts for me. So when you’re in the Zoom In, you can drag and drop from somewhere-

Birgit Pauli-Haack: The patterns.

Anne Katzeff: From the patterns, that’s right.

Birgit Pauli-Haack: From the patterns. Yes. In this Zoom Out Mode, you can drag and drop them over.

Anne Katzeff: Zoom… Oh, okay. Yeah, got switched in my head. Another feature that’s been mentioned elsewhere on the Twitterverse, for example, the uploads for HEIC images, that’s been enabled or will be enabled. And there are just so many different design tools that they’re considering, like item colors in a list item, borders for different colors for borders and paragraphs and buttons and things like that. And an integration of a Lightbox similar to the Gallery. Well, maybe I have it twisted in my head there.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: The Gallery Block will have a Lightbox aspect to it. And then again, I always want to see, and I would love to see more work in the UI design and Custom Fields area. So we haven’t really touched on that, but those are things that are of interest to me.

Birgit Pauli-Haack: Yeah.

Anne Katzeff: So I think they’re doing a fabulous job. Coming your way.

Birgit Pauli-Haack: Coming your way to the WordPress instance near you with WordPress 6.7. And I wanted to… That sounded so technical with the HEIC image. Those are images made with an iPhone and you can now upload them to your WordPress site without having to go into your computer, download them to your computer and then go and upload them again. Now you can do this from your phone. And that’s actually quite interesting. So you can use your WordPress site if you want to, like your Instagram kind of thing, but you have your own space there. Yeah.

Anne Katzeff: Does it convert those images to JPEG?

Birgit Pauli-Haack: Yes.

Anne Katzeff: It does. It compresses them.

Birgit Pauli-Haack: Yeah. That’s actually the feature, because web browsers don’t support HEIC images, so you need to convert them to what browsers do and to make them there. But on upload it will do all the things, all the magic. Yeah.

Anne Katzeff: Okay.

Birgit Pauli-Haack: And yeah.

Anne Katzeff: See I don’t rely on the native WordPress compression. I do that compression myself before I do an upload and I convert to JPEG, but this is all on desktop. So if you want to go directly from your phone to your site, that’s a nice feature.

Birgit Pauli-Haack: Yeah, that’s what a lot of people do that want to share their photos, upload them to the blog. And then of course with the new Twenty Twenty-Five, and thank you for pointing that out, you are now getting a great designs for photo blogs and portfolio things. I really like also, the patterns that they offer for galleries, there are six or seven patterns.

Anne Katzeff: Oh, really? Yeah.

Birgit Pauli-Haack: Yeah, they are in there.

Anne Katzeff: That’s great.

Birgit Pauli-Haack: Yeah. And 6.7 comes with a bunch of new design tools. It’s mainly borders for everybody. Every single block.

Anne Katzeff: That could be a blog title. Borders for all.

Birgit Pauli-Haack: Borders for all. Borders for us. Oh no, that was a bookstore.

Anne Katzeff: Oh, right. Right, Borders Bookstore.

Birgit Pauli-Haack: So the images got their Lightbox with 6.5, I think.

Anne Katzeff: Okay.

Birgit Pauli-Haack: There was nothing in there for 6.6. And then now with the 6.7, the gallery, so when you add images to the gallery, there’s another feature there. There’s actually, when you upload a bunch of photos in your Canvas, in your next post, it automatically creates a gallery. So that’s also something. And then when you have an Image Block and you drag and drop another image next to it also automatically creates a Gallery Block, so you have them side by side.

Anne Katzeff: Huh. Okay. So it doesn’t automatically create a column.

Birgit Pauli-Haack: No.

Anne Katzeff: A Column Block. Okay.

Birgit Pauli-Haack: Yeah. And now when you’re in the gallery, the link feature of the image, and that’s also for the Image Block, the link feature, it kind of comes out as a drop-down, the link button and it gives you the choice. Do you want to link at it or do you want to have a Lightbox or expand on click because you can’t have both? There’s only one click and it’s either a link to someplace else or you get your Lightbox there.

Anne Katzeff: Makes sense. Yeah.

Birgit Pauli-Haack: That you can set for every image in your gallery. So it’s now possible.

Anne Katzeff: Right.

Birgit Pauli-Haack: And then-

Anne Katzeff: Yeah. Wouldn’t it be curious if some of the gallery images clicked… When you clicked on them, you’d get a Lightbox for one and then a link for… What a mess. You have to choose.

Birgit Pauli-Haack: Yeah. It confuses people. And then when all the pictures have the link to Lightbox, then you also get a gallery slider. Not a slider, but a previous and next for your images. So you can actually watch the gallery in expand mode throughout the images. Yeah. So it’s really-

Anne Katzeff: Will there be a navigation device? Or you just do it with your keyboard?

Birgit Pauli-Haack: There will be arrows next to each other.

Anne Katzeff: Arrows. Yeah. Mm-hmm. Okay.

Birgit Pauli-Haack: I don’t know if there are bullets, so you know how many are in there. I don’t recall, but I need to test them.

Anne Katzeff: Maybe you can style them.

Birgit Pauli-Haack: Yeah. Well, yes you can-

Anne Katzeff: Yeah. You can probably style them differently.

Birgit Pauli-Haack: Yeah, you need to style them through CSS then. Yeah, you can-

Anne Katzeff: Oh, I see what you mean. Yeah. Below the Lightbox, the dots underneath.

Birgit Pauli-Haack: Yeah. So you kind of indicate how many of that. So yeah, glad that we talked about 6.7 a little bit. Yeah, the Query Loop definitely has some nice features in there, now it knows the template you are adding it to. And then you can actually… Ryan Welcher did great work on that to add additional settings into the sidebar for the Query Loop Blocks. So you can change the order and you could do that as well. And then you have drop-downs for categories and all that taxonomy, different kinds of taxonomies by author. 

Anne Katzeff: Yeah, I would really want to play with that. Yeah, because what I was wondering, I think I read somewhere that you can have maybe a grid of six, let’s say, and then interrupt that pattern with maybe two, and then go back to another grid of six. So I think you can mix them in, which is very exciting.

Birgit Pauli-Haack: Yeah. And so you have three Query Blocks and then each one of them can be a different category or can have a different feature set or something like that. Yeah.

Anne Katzeff: Yeah. That’s great. Outstanding.

Birgit Pauli-Haack: Yeah, that’s what you also see on the… We talked about Twenty Twenty-Five that you have different kind of blogs. So one is a simple blog, the other one is the photo blog, and the third feature is kind of a news blog. You have multiple posts a day or something like that. You get a magazine view.

Anne Katzeff: Yeah, the categories are perfect for a newspaper or magazine type of content.

Birgit Pauli-Haack: Exactly, yeah. And there is one little trick that if you get some… Because you have multiple Query Blocks, so it goes out and does the query multiple times, that might be a performance hit.

Anne Katzeff: Oh yeah.

Birgit Pauli-Haack: But if you remove, because on that magazine look, you don’t want that pagination there on the Query Loop. You can take that out of it and then the performance is a little bit better there.

Anne Katzeff: Okay.

Birgit Pauli-Haack: Yeah, it’s going to be really interesting. Yeah. All right.

Anne Katzeff: All right.

Birgit Pauli-Haack: So we’re coming to the end of the show and if people want to get in contact with you, how would they find you?

Anne Katzeff: Oh, so on Twitter, who am I on Twitter? Let me have a look at myself on Twitter. ASKDesign2 and-

Birgit Pauli-Haack: Okay. With the number 2, right?

Anne Katzeff: With the number 2. And where else? On Instagram am I the same? Probably.

Birgit Pauli-Haack: So are you on WordPress Slack?

Anne Katzeff: I am on WordPress Slack. Who am I there? Let’s see. It’s funny, you never look at yourself on these things. I am Anne Katzeff on that. Yeah. So those are the two places.

Birgit Pauli-Haack: So it’s K-A-T-Z-E-F, right?

Anne Katzeff: K-A-T-Z-E-F-F as in flower.

Birgit Pauli-Haack: All right. And your website is…

Anne Katzeff: Askdesign, A-S-KDesign.biz. So when I was first getting my website up and running, askdesign.com was already taken. That domain name was already taken by a plumber. So my brother said, “What about .biz?”

Birgit Pauli-Haack: Mm-hmm.

Anne Katzeff: So that’s what I did.

Birgit Pauli-Haack: Yeah, that’s a good domain name, yes. All right, so I will share all the links to Anne as well in the show notes. And thank you very much for taking the time and being here and going through the changeover with me.

Anne Katzeff: My pleasure.

Birgit Pauli-Haack: … sharing all your blog theme experiences here.

Anne Katzeff: Thanks for the invite.

Birgit Pauli-Haack: Yeah, absolutely. You might get another one in a couple of months.

Anne Katzeff: Okay.

Birgit Pauli-Haack: So dear listeners, always the show notes will be published on GutenbergTimes.com/podcast. And this is episode 109. 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, or just ping me on Twitter or on WordPress Slack. That’s it for now, I’ll talk to you in two weeks with 19.5 and more about 6.7.

Thank you so much, Anne, and goodbye.

Anne Katzeff: Thanks so much Birgit.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.