Gutenberg Changelog #69  – Gutenberg Releases, WordPress 6.0.1, the Create Block Theme

Gutenberg-Changelog-69-Jorge-Costa-Mary-Job-Birgit-Pauli-Haack
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #69  - Gutenberg Releases, WordPress 6.0.1, the Create Block Theme
Loading
/

Birgit Pauli-Haack, and Mary Job talk with this week’s special guest Jorge Costa about Gutenberg Releases, WordPress 6.0.1, the Create Block Theme plugin and much more.

Show Notes / Transcript

Show Notes

Why You Should Try Out Block Themes

Don’t miss it! A Block-First Approach at Pew Research Center with lead developer Seth Rubenstein, head of digital strategy, Michael Piccorossi and co-host Anne McCarthy on July 22, at 11am EDT / 15:00 UTC

Create Theme Plugin

Legacy Widget Block Plugin

WordPress Releases

WordPress 6.0.1 Release Candidate

Gutenberg 13.5

Gutenberg 13.6

What’s in development or discussed

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 69th episode of the Gutenberg Changelog podcast. And in today’s episode we’ll talk about the two latest Gutenberg plugin releases, WordPress 6.0.1, the create block theme plugin, and a lot more. I am Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate. And I’m here with my co-host, Mary Job, WordPress community organizer for WPafrica.org and support engineer at Paid Memberships Pro. Good evening, Mary, how are you today? And is there anything new coming from your community?

Mary Job: Thank you, Birgit. So I’m slowly getting back into my work routine. I feel like this year has been a really long journey for me because every time I recover from a hit, I get hit again.

Birgit Pauli-Haack: Oh, no.

Mary Job: Yeah, I’m looking forward to having more positive hits going forward for the rest of the year, I want to be hit positively, I don’t want any negative hits for the remaining part of 2022.

Birgit Pauli-Haack: Oh, good. I wish you the best. Yes.

Mary Job: Yes. Thank you. So our meetup communities on the African continent are slowly getting back into momentum. I’ve been seeing a number of physical meetups, have come in. I know there is a WordCamp Ginger in Kampala, Uganda, that is scheduled for the first week of September. I’m most likely going to be there, it’s also going to be my first WordCamp post COVID, I’m looking forward to that.

Birgit Pauli-Haack: All right. So WordCamp Ginger, and Ginger is near Kampala in Uganda?

Mary Job: Yes, it’s not far from Kampala in Uganda.

Birgit Pauli-Haack: All right. And I looked it up on the WordPress site, it’s September 2nd and 3rd, and they have their speaker organizers and now volunteers and sponsor calls open. So if you are in the area and want to have your first WordCamp in Africa after the COVID pandemic, that’s where you can meet the people. So happy that the community bounces back now as well, not only Europe and America.

Mary Job: Yeah, I am too. So for today’s special guest, I want to introduce Jorge Costa. He’s a WordPress co-contributor and developer for Gutenberg. He’s part of the Five for the Future team at Automattic. This week, Jorge worked as a list lead for Gutenberg version 13.6. Hello Jorge, thank you for joining us today.

Jorge Costa: Hello. Thank you, Birgit and Mary, and for the invite for me to be here. I’m really glad to be here on this podcast, and also thank you for all the work you have been doing on this podcast. It’s an awesome way to let the wider community of WordPress know what we are doing on the Gutenberg plugin and get onboard, and test the things we are doing, and help us ship the best product possible. So thank you for all this work.

Birgit Pauli-Haack: Well, thank you.

Jorge Costa: And thank you for the opportunity.

Birgit Pauli-Haack: Oh, you’re welcome. Thank you. It is always a great joy to kind of report on the stuff that the Gutenberg team puts out.

Mary Job: Absolutely. Plus one on that Birgit. So before we add into the changelogs of various release, we wanted to learn a lot more about you, Jorge. So my first question to you is this, can you tell us briefly your WordPress origin story, how did you discover WordPress and what happened next?

Jorge Costa: Of course, Mary. It’s a long story. So the first time I used WordPress, was in 2007, 15 years ago.

Mary Job: Oh.

Jorge Costa: Yeah. I was still a teenager in high school, and then I tried to build some websites. At the time it was normal for people to have blogs, build some websites and try these things around. And I also did that, I tried to build some websites. WordPress was already one of the very popular tools at the time to build your website, and it had now some repository of free themes.

So things that you could use without paying anything, you would not have problems changing or getting anybody, like cutting problems to you because you are changing some code somewhere. So I try some themes that shows what better fit the needs I had at the time. And basically it allowed me, without doing any design, I just put the theme there.

It had the styles then on the content area, but the html I wanted and it looked more or less okay, not too bad, because the themes already contained most of the styles. And that was it, I learned to code this way, and I got the interest in code. I will never imagine at the time that some years later I will be a developer on the core product and going to conferences around the world, for example, the WordCamp U.S. where I met you, Birgit.

Birgit Pauli-Haack: Yeah.

Jorge Costa: A long time ago. So after using WordPress, and I got this interest in coding, then I went to university, and it was part of the decision that I wanted to code things. And so I went to do a master’s degree in computer engineering. I work at for some companies after the master’s, and then I apply it to Automattic. And then here I am, that’s basically the story.

Birgit Pauli-Haack: So when did you start at Automattic?

Jorge Costa: Five years ago, in 2017.

Birgit Pauli-Haack: ’17, yeah. And 2018, I met you at WordCamp U.S., yes.

Jorge Costa: Exactly. Yeah, one year after, in a rainy day. Yeah, it was raining a lot when we went inside the venue, with our clothes. Yeah.

Birgit Pauli-Haack: Yeah.

Jorge Costa: And they were really wet, yeah. It did feels like a long time ago, like with all the things that happen in the world, meanwhile.

Birgit Pauli-Haack: Yeah, almost like last century. Right.

Mary Job: That’s a really interesting story. I think in 2007, I was struggling with hub pages. I think I discovered WordPress first in 2012, and I was like, “What is this? This is complicated.” And I ran away, I wish I stayed. So this brings me to my second question, Jorge, what aspect of Gutenberg do you work on, and what excites you most about this new way of creating contents and building sites?

Jorge Costa: Yeah, so I started working on Gutenberg in the early days, when the project still had only some mounts, and it was starting. So I touched on many parts of the code base and working on many of the tools that we have now. But there are some things that I’m really passionate about, and some are simple things, like the gradient pick or color pick, or all the things that allow you to change the font size, because these are the things that in the end will allow people to express what they are feeling in their website.

We don’t want all the website on the internet to look the same, we want them to look good, but we want them to have some personality of the people that are doing them. If all the things were the same, it will not be as fun. And now that we are shipping block themes, people will have full control of their website, they will not need any line of code to implement basically any design they want.

And we can also put restrictions in place to make sure they have freedom to do everything they want, but it’s still output, something that is nice design-wise, and it looks good and looks professional. So I’m really curious, what these tools we put in place, what all these design tools will allow people to build.

Until now these things were built mostly by people, new code or were designers, then the coders try to pass that to code. I’m eager to see what people that don’t have any coding experience or any design experience will put out there, and what the new way it will appear. I’m certain we will be surprised when people felt this power with what they will do.

Birgit Pauli-Haack: Yeah, it kind of sets the creativity really loose. And as most listeners know, I love gradients. So, thank you. That was a while when, two years ago when the gradients come into to the block edit, and every time we saw in the changelog gradient, I was doing gradients. So I haven’t done this for a while, so I’m really glad I get an opportunity again. Yeah. And the color picker has really gone through quite some iterations. I really like what it’s doing now, to have all that in one place, and then open up the second pieces there.                   

Listener Questions

Typography is about to shine even more with the site editor and the web fonts API say, yeah awesome. And in our show, we haven’t had a listener question for a while, Bud Kraus, a long time listener, a WordPress educator at Joy of WP, and also a contributor on the training team, he sent in this question, and I’m glad that Jorge is here to help us answer that.

“So what’s all this I hear about bug right. What is all this I hear about Flexbox. I know about CSS and Flexbox, but how does this apply to the block editor? Is something special coming up concerning Flebox?” So again, thank you, Bud, for sending that in, and the good news is some of it is already here. So backup a bit, is Flexbox and CSS grid are features to implement intrinsic design and also build layouts easier.

I build layouts with table coding, but the first implementation of Flexbox with the block editor has already been implemented, and it’s the two block variations that come to the group block. One is called, Row, and the other one is called, Stack, and both help the user who have no idea about mobile breakpoints, pixel size and all that. And they also don’t want to spend a lot of time learning it.

And it’s part of the efforts for the developer team to implement responsive web intrinsic design. It’s also the start of the answer to a lot of questions I get from users or developers. So how can that be that there is no responsiveness in the block editor, and it’s actually here, it’s just a little bit differently implemented. But that’s the extent I know about things, and I’m glad to have you here. Jorge, can you enlighten us a little bit more how else this works?

Jorge Costa: Yeah, of course. So basically what happens is that the block editor, and it’s not exactly something new, it’s already part of core, and it was merged some months ago. So now as of allow blocks to specify the layout that they want for their nested areas, so they can opt into that, if they don’t opt into that, nothing happens. And they can opt into that feature, so the group block is already opting into this feature. And if you opt into this feature, you have a UI where you can choose different kinds of layouts.

For now there are two layouts softwares, one is the default of flow layout, and the other one is the flex, which implements a Flexbox. And basically the user on the UI can control properties like the orientation, the justification, the width of the area. Then basically it’s converted to CSX. So that’s basically it, we are allowing the user to control some properties and allowing the user to have an easy way to create a flex layout, if the user wants to.

Some blocks offer that functionality. And block creators can also offer that functionality. That I am aware now we are not doing any active development on this feature, it’s already shipped, but it’s working well, now except for the team builders and block creators to use it, and there was some things with it.

Birgit Pauli-Haack: Thank you, Jorge. And thank you, Bud, for sending in the question. Hopefully that answers your questions, somewhat. And if you, dear listeners, also have questions you want us to tackle here on the podcast, ping me on direct message and Slack or on Twitter, or send me an email to changelog@gutenbergtimes.com, that’s changelog@gutenbergtimes.com. And by the way, also, if you like this podcast, we would appreciate if you could write a review on Google or Apple or Stitcher, it really helps to spread the word about the show. So, okay, that’s it from me. Mary, back to you.

Announcements

Mary Job: Oh, yes. Thank you, Birgit. So we’ll move on for that to the announcements segments of the show. We have a couple of announcements. First, the episode has two of the VP Tavern Jukebox. Put the episode title of the Jukebox into your podcast player. After our block theme workshop at WordCamp Europe, their CEOs have talks on it weekly on why you should try out block themes. She doesn’t say go all in with your site just yet, but you can get started exploring the new way to work with themes in a site editor. And that one is a great conversationalist, by the way, he asked all the right questions.

For the second announcement, the Pew Research Center has adopted a block first approach for their website, their lead developers Seth Rubenstein and their head of digital strategy, Michael Piccorossi will be guests at the next Gutenberg Times live Q and A, and demo their solutions for their own page. Their and chats on the July 22nd 2022 at 11:00 AM Eastern Daylight Time. This is also 1500 UTC. And Anne McCarthyi will be Birgit’s co-host for this.

Birgit Pauli-Haack: Oh, yeah. Thank you, Mary. Yeah, I’m so excited for this next live Q and A, especially because we had an eight-month break on live Q and A’s, and I hope you all join us. The link for the registration of course is in the show notes, and we will record the show and share it with YouTube and the Gutenberg Times. But there’s nothing better than getting the questions answered live, and your questions and not somebody else’s questions. 

Community Contributions

So we are pointing out two community contributions today, one is a new, so there both are two new plugins that are in the repository, and come from core contributors.

So the first one is the create block theme plugin, it was built by the theme team, and in his write-up on the make theme block, Ben Dwyer covered the question of, who is it for? And he wrote, I quote, “This plugin is aimed at theme builders, both designers and developers, and it is useful for sharing your designs between multiple sites or users. If you are just building a site for yourself, you probably don’t need it.” So what does the plugin do? It has an export feature, right now it does the same things that the site editor export feature does.

You can also create a new giant theme with the activated theme as parent, and then you can create a new theme by cloning the activated theme, and then the resulting theme will have all the assets of the activated theme, combined with the user’s changes. Another feature is that you can save the user changes into the theme files, so you are practically overriding them.

And then the feature will also delete the user changes from the database, so you get an immaculate theme again and have everything in one place. And then you can generate an empty theme, that gives you a clean slate to start off with, and for all the designs that you want. The plugin’s in the theme directory, and we have in the show notes links to Ben Dwyer’s write-up, and as well to the repository. Jorge, do you have any thoughts on this?

Jorge Costa: Yeah, I have. I think it’s awesome news, and it’s an important milestone. So until now to build a theme for WordPress, you needed to use an external tool, if nothing more, at least a text editor to call code your theme. And we are in a stage now where you can build WordPress themes with WordPress itself without using any tools. So you have the tool building itself. So I imagine soon we will have a default WordPress theme that was totally built with WordPress. So in fact, we will ship over price with parts of WordPress that were built with WordPress. So it’s like a strange loop, but it’s an awesome one to be in, it’s like we are in the stage where the tool is being self-sustained, and we can create the tool with the tool.

Birgit Pauli-Haack: It’s like an encouragement.

Jorge Costa: Yeah.

Birgit Pauli-Haack: An inception, yeah.

Jorge Costa: Yeah, an inception. Let’s see what awesome things the community build, and it will be fantastic, themes being shipped to the repository, that were built poorly by WordPress with WordPress. So let’s see what will happen, but I think it’s very good news.

Birgit Pauli-Haack: Mary, do you have any thoughts on it?

Mary Job: Yes. From the perspective of somebody who is a non developer, I was building in these websites for a few years. I would say, this is an awesome tool, and one that is… You know how we say, when you install WordPress, what are the basic plugins that you put on the site? This is one of such plugins that you should have on your site. And I think I’d argue differently from Ben, in the sense that if you’re building a website for yourself, you don’t really need this plugin.

You actually do, because one of the things we say is when you’re starting a new project, you should always follow best practices. And one of such is themes, except because you never can tell, you might start, okay, I’m just building a simple site for myself and then it expands into something big. So you have to make sure you follow best practices. So I think this plugin comes in handy for individuals and business owners who manage their websites, and they no longer need to use charts and, I mean, you don’t have any excuse to not spin up a chart theme, you can do this on the fly with this plugin.

Birgit Pauli-Haack: That’s a good point. Yeah. Thank you so much, Mary. And the second plugin I wanted to point out is, it’s called the Legacy Widget plugin, and it was built by Justin Tadlock. And he spent some time in the support forums and found a specific pain point that keeps people from testing block themes, that the Legacy Widget block is not available in the site editor. So many users couldn’t see how their widget sections would show up in the full site editing block themes that they got from the directory, and they weren’t able to put them in the templates or template parts.

So it takes a while, and many sites have third party widget sections from plugins, and not every plugin developer is up to the latest version and create blocks for their widgets. So until then the plugin, the legacy makes the Legacy Widget block available in the site editor, and now all the third party widgets are also available for your template and template parts. We have a write-up on that, on the Gutenberg Times, and as well as a link for the plugin in the repository.

Jorge Costa: It’s good news again. So for some context, I was involved in building the first versions of the Legacy Widget block, that is part of core and that the plugin uses to make its job. And at the start, we really wanted to allow people to use widgets anywhere. So the block was available in the post content, you could also use it on the site editor, and you could basically in any post or in any part of your block theme, you could have a Legacy Widget block, select the widget and use your widget, so you could add widgets everywhere.

 We wanted that to be the default, and we try really hard to make this work for most widgets. But in the end, there are some widgets where in their code, they say, “Do that, if I am on that specific screen that was on this page, or do that, if the dome of the page contains something.” And when you are adding to a totally different screen where these conditions don’t match and the page structure is totally different, the widgets broke, and there were some widgets.

Although most widgets work out well, there were some widgets that because of this type of conditions did not work and there were crashes. If it is going to be a core feature, we cannot make it break with some types of widgets because we have a strong commitment to being backwards compatibility. So we made it only a possible to use it in some context where the possibility of it breaking was placed because these conditions match it.

But now it’s a good trade-off, people have a plugin and if they really want to have this experience that works well for most of the widgets, they can install the plugin and use it. And if by any chance, some widget does not work well, it’s not exactly core that is breaking with their widget, it’s a plugin incompatibility issue, the Legacy Widget plugin and that widget are not working well together. And it’s also maybe widget developers, if they see their widget is breaking on the legacy, widgets maybe can change one line of code and make it work.

Birgit Pauli-Haack: Yeah.

Jorge Costa: So it provides a way for people to test it more easily. So I hope it’s going to get big usage, and it allows people to easily use their widgets and their block themes. Ideally, we will have blocks for everything, but in cases, blocks are not yet built, people can still use widgets, which is good news.

Birgit Pauli-Haack: Yeah. That was the idea of everything goes into blocks. But there are some people, that takes a while to adopt and not every plugin developer has the bandwidth to get into block development so fast. So that was great, a background on the Legacy Widget block. Thank you, Jorge. So that brings us to our, what’s release section, and Mary, what do we have?

What’s Released

Mary Job: Yes. So first off, we have WordPress 6.0.1, release candidate. This was released on the 5th of July, and has 28 fixes. It will be incredibly helpful if listeners and committee members can help pass this version before the final release date, which is slated for the 12th of July. This is if you listen to this episode before the 12th of July. So what’s in this release? The nature of this minor release is mainly bug fixes.

So there was a fix, so the order that the color gap CSS is queued, so this is not provided by layout CSS in non block themes. There’s also several layout utility class themes, led to blocks that have their layout attributes specified. And on post comment blocks, There are also a couple of releases.

I’m not going to read all that, since we’re going to put it in the show notes. On post templates, there was a fix to the post templates to ensure that the layout blocks support for the post template block, it’s only applied on the outer most, and not on the first chart of each instance. Yes. Do you want to speak on this bug fix the last one here, Birgit?

Birgit Pauli-Haack: The fixed performance regression to remove widgets fragments?

Jorge Costa: It’s an important performance fix. So that was some lagging when you passed content, it’s a good announcement, and I think it’s probably one of the most notable fixes, like in the performance on this patch release.

Birgit Pauli-Haack: Excellent.

Mary Job: Thank you very much for expanding on that. So that’s it from the latest WordPress release and the release post, and it will be available in the show notes. Jorge, do you have any more thoughts to share on this?

Jorge Costa: Yeah, it’s a bigger than usual patch release, watching by the number of tickets that we included. And normally the patch was a little bit smaller, but I think in part that can be explained because of the very active development on more recent blocks, like the comments block, which most of the fixes are related to that. And then we also had lots of developments on the style engine and the styling output. So there were some specific issues that people reported, and that’s also another part of the patches. All in all, we did not have any very critical fix on this release, which is a nice thing.

So there is some fixes, but none of them looks very critical. So I think what the best for the people would be to upgrade their websites, of course, so they can take advantage of all these fixes and they will not lose their time, they probably did not notice most of the bugs that we have on this list. But one day they may notice and they may be losing time, wondering why is this happening? So if they upgrade now, they will not lose their time wondering about the bug that was already solved. So as always, try to make your upgrades as fast as possible.

Birgit Pauli-Haack: Yeah. There goes a big, big thank you to those who reported the bugs right after the 6.0 release. And of course, to all the contributors that kind of fixed them so fast, actually. It’s now five weeks after the 6.0 release, and that’s a really good time to have a minor release coming out, and now more people are going to use WordPress 6.0.

Jorge Costa: Yeah. That’s a good point for the listeners, they can now help us do the better product possible by testing the DRC that we have out. If you find any bug, you may make things easier for 40% of the internet that is going to run this code. So please test it and let us know if you find any issue with it.

Gutenberg 13.5

Birgit Pauli-Haack: Awesome. Thank you, Mary, for going through that release. So today we covered two Gutenberg releases. One is Gutenberg 13.5, and that was released two weeks ago, Anne McCarthy’s first release, congratulations to Anne. And there have been 12 enhancement and 15 bug fixes, and also an explosion of code quality updates, but they’re mainly related to the low dash refactors and updating some finals to the new ES land rules, and there were also a few PR’s for Gutenberg tools. But let’s dive into the selected enhancements.

One is, so the media tool tip on the image was not big enough to see actually what kind of image is the image file name, and now there’s a tool tip that shows the full URL of the image in the block toolbar of an image or a gallery, and I find that really helpful. For the cover block, this release added a placeholder when a featured image is in use, which is definitely helpful to see the better expectations on what you’re customized there. And another new feature, well, it wasn’t a new feature, it’s a better place for it.

The add feature image toggled for the media replacement flow is now in the toolbar and connected with the media replacement dropdown before it was a separate button in the block tool, now it’s all in one, and it’s much easier to know, oh, I can just use the featured image for a cover block. The post navigation has now designed controls, that’s absolutely new. So post navigation block is the links on the single post page where users can navigate to the previous post or the next post, and now you can give it their distinct styling.

The theme development needs, however, enable to support through the appearance tools in the theme JSON, but now you have design tools for color, text decoration and font family. And of course, color for both the text and the link in that block. So if you have anything to say, Jorge, feel free to interrupt me in my flow and we’ll stop, and then you could say, because I know you have been working on some of the things. So it’s always welcome to chime in here.

Jorge Costa: Thank you, Birgit, if I have anything, I will add.

Birgit Pauli-Haack: All right. So there’s also an APR that moves the CSS from the style sheet to the block definition, and that is helpful because it reduces the CSS specificity. Conflicts and theme developers can easily override them by other theme JSON files. The current themes are not touched with that, a change, so it won’t break anything, right now as the class names are still there and they’re still the same. So it’s a good change that does not break any layouts, so that is it what I see from the enhancements that I wanted to point out. There are plenty of bug fixes, as I mentioned.

There is also a few fixes merged to improve the accessibility for the various interfaces, so context for the action buttons, for instance, in the template actions or the fix of the focus trap on certain input types, and also a label for the preview options in the dropdown, or increase the accessibility of the various features. And then I have one more, that is that also talking about CSS specificity, and there’s one fix that lowers the CSS specificity for the file block, as well as for the search block, meaning they are now following the button design that’s in the theme JSON, or in the CSS, and not have their own button styling.

So they are much more consistent now, unless you want to, as a theme developer, they are much more consistent now with the overall layout of the site. So I think, unless you have anything, Mary, or Jorge, from the 13.5 release, that’s all I had. It wasn’t a big release, it still had a lot of PR’s, but they’re all kind of backend stuff for code quality stuff. 

Gutenberg 13.6

So let’s continue with Gutenberg 13.6 release, and Jorge, you were the release lead this week for it, and it comes with 34 enhancements and 24 bug fixes, and it also has code quality documentation items, and so on and so on. Do you want to kind of get started what you wanted to point out here?

Jorge Costa: Yeah, it’s a considerable release. There are some user, not of several things that are important to note. Right now you can add templates on the site editor. For all the posts of a specific post type, we are also adding the ability to select the template for posts of a given category. So all these things were already possible in the existing theme engine, but it will involve knowing the specific file names, knowing specific slugs to create these themes.

So most people did not use these features. So when you say around websites on the internet, most of the category listings are the same, if you check the category of, like a shoes category compared to a dresses category, it’s almost the same, it just changes the posts. But now it will be easier to make specific templates with specific designs for each category or for each other.

So I hope people start using these features more, it’s something you have a UI for it, you don’t need to create any files with the strange names, you just select on the UI, what you want to do. And then you create a template, or you make a small change to the general one that you want for on that specific case, all without involving any code, and having a way for it.

Birgit Pauli-Haack: Yeah.

Jorge Costa: So in 13.6, we started this expansion process for specific posts. It’s the work that is going to continue on the next releases. We also have the ability for you to, when you create a post, like the normal experiences for the post to start with a white screen, and on the last core release for pages, we have the ability for a pattern to say that the pattern wants to appear when you start a new page.

So when you start a new page, instead of starting from blank, you can have a UI that allows to select if you want a contact page and about page, or the most common patterns of a page, and then you just fill in the blanks and your page is then, it’s much more easier to start from something that was already built than having to build everything from the scratch. We received some feedback on the community that was nice, was useful, but people wanted it for any type of post type.

So for example, if you have a book post type, you may have many ways to show your book. For example, the cover of the book on the left, with the description on the right or the cover above with the description below. So what we offer with 13.6 is an ability, so for any post type, when you start creating a post type, you see a model and you can select the pattern that makes more sense to you. Or you can, of course, don’t select any pattern and start blank as you did before. So I think it will be very helpful for some users to have these type of patterns.

Birgit Pauli-Haack: Absolutely. Yeah.

Jorge Costa: So these ones are very noticeable features, and people can start using them right now, try them. We also have of course testing for part of the styles engine and theme JSON mechanism, which is something called Elements. It’s a concept, it’s still trying, but basically, you have a link on your post, that link can already be styled. It’s a cross block, like any block can have a link, you can have links on the navigation, you can have links on your post content, or you can have links to link to the pagination of your website.

And the same happened, and you can already customize it. But the same happens for buttons, you can have buttons outside of a button block, like the search block can have the button search, you can have other types of buttons, even in custom blocks. So these are the same for captions, like any block can have a caption. You can have a caption of a table, you can have a caption on the image. So these are elements that are generic and you can use it in any block.

And we want to allow people to easily style these types of things that are not block specific, but I may want all the captions of my website to look in a given way, or I may want captions of the images specifically of the images to look in a given way. So we are offering an API to do that, we ask people to give their feedback, test their themes, test their blocks, if things work now. And on 13.6, we provide already an UI for button, so you can already go to the site editor UI and try to change the colors of buttons and see if it is reflected on the search block.

See if it is reflected on the third party blocks that you use, that have buttons. And we also have four captions, not a UI yet we are going to do it on the next releases, but as part of the theme JSON, and so in your theme JSON file, you can configure for the captions. And it’s two big things there. They are not featured highlights yet because it’s still something we are experimenting with.

And we are trying this type of concept. But feel free to test it, let us know what you think and share your feedback. Then we have many announcements, to make the UI more clear, simple things like some toggles have started having a description, complete one about what they do. So people know if they click that toggle, what is going to happen exactly.

Things like when you schedule a post and you change your date for tomorrow, instead of the UI saying the day and the date telling you that the post is going to be published tomorrow, which is more clear, you don’t need to know what day is now and what day is tomorrow, and the UI, if it’s going to be published today at some hour, the UI is going to show you today at some hour.

Birgit Pauli-Haack: Mm-hmm.

Jorge Costa: So it’s the small things, but all the things done will improve the user experience and make things that we’ll probably not notice, but when they are there. But if we remove them again, you will probably start missing them.

Birgit Pauli-Haack: Yeah.

Jorge Costa: So that’s this type of announcement, many of them, we also have multiple accessibility features added. New keyboard shortcuts that you can use, which makes the application more accessible if you are using the keyboard a lot. We also document shortcuts that already existed, but we’re not being shown anywhere because they were probably added even before we have a UI to show these types of shortcuts.

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

Jorge Costa: So yeah, many small announcements. Also, there is lots of work happening around performance, but this work is not noticeable now, it’s like work for the long term. You are working but you will only see the benefits when that work is complete. I’ll talk you, it’s like long work, so it’s divided in multiple PR’s and this already contains many of these PR’s. So we hope when that work is complete, people will start noticing their editor is faster. And now we have also multiple bug fixes as always.

Birgit Pauli-Haack: Yeah.

Jorge Costa: It’s part of the development process.

Birgit Pauli-Haack: Awesome.

Jorge Costa: Also many updates to documentation, like announcements, things that we think were important to be documented. There is a refactor of components to type script. So when people are coding for Gutenberg or using our components, their IDs will auto complete, will validate if they are passing the correct properties and the correct data to our components. So it will improve a lot, the developer experience for people building with our components and building complex UIs and complex blocks.

Birgit Pauli-Haack: Mm-hmm.

Jorge Costa: And some announcements to the rest, API, remove hard coded strings that were there. And basically, there is lots of work happening, but mostly as we, with 3.5 too, it’s backend things, they need to be done to prepare the product, to receive the good UIs that they utilize.

Birgit Pauli-Haack: Mm-hmm.

Jorge Costa: But some of these UIs are not there and are not shipped yet.

Birgit Pauli-Haack: Yeah. Thank you for the quick rundown here. I wanted to point out two more things. One is that the pseudo selectors on Elements, you pointed out them for theme JSON, but there’s also the pseudo selectors for, they are coming. Now I remember, it’s not yet in 13.6, it’s the pseudo selectors for the hover action and for the navigation links. So now I know that. So we talked about that. The other cover now has an axle top margin, top and bottom margin feature, so you can make the cover block larger, even if there’s not filled up with blocks, so you don’t have to use the spacer block anymore.

If you use them, that’s fine, it doesn’t go away, but for new covers. And then pocket cast embeds are now possible, both on the core as well as on, Gutenberg has now the embed blocks for pocket cast. Pages podcast, as well as single episodes, so that’s nice. And I think we’re going to use them on the Gutenberg Times soon, to sprinkle out all the different episodes around the site. And we talked about the single custom post type templates. Yes. We talked about the keyword.

And then there was one bug fix that the preview of the pattern didn’t show the dual tone that were already selected, so that has been fixed, so now you actually get what you see. No, see what you get when you have that pattern model up and preview some of the patterns. One fix is certainly something that’s also a quality of life fix is that the image block now preserves the all text that’s already entered in the media library on upload.

So you don’t have to upload, punch it in again the second time for those who work quite a bit with images, that was kind of a little pain point, and it also didn’t add to the accessibility of the website when people forgot to use the all text, once they use it. Jorge already mentioned the documentation updates. One is, there’s actually an explanation how to set up the local environment to run the performance tests.

So I think for those of us who want to contribute to Gutenberg and want to kind of double check things, and now you can do this also for the performance test. And Jorge also mentioned the style engine. There is now the documentation, it’s still experimental, but the team has added a correspondent documentation page for the style engine package. And it’s in the block editor handbook, and you can see some of the terminology that’s used for the style engine. Not sure do we want to get into that, what is the style engine, Jorge, can you summarize that a little bit?

Jorge Costa: Yeah, I can try to provide a small overview. So basically the style engine is a small piece of code, now not that small, but something that is aware of where the block is being rendered, what are the attributes of that block, and what are the styles applied to it. And then it receives this data structure with the style information that is represented in JSON most of the time. And it converts the structure to CXX, which is something that the browser then uses to render the block and apply the styles that is expected.

So it’s basically a small compiler that turns your styles, data structure into CSX that the browser then shows to the user. You can imagine, for example, in a native application that where you wanted to render the blocks, you could have a different style engine that map this style structure to something instead of html and CXX, something native for that mobile platform. So yeah, it’s basically a small compiler of stands.

What’s in Active Development or Discussed

Birgit Pauli-Haack: All right. Okay. So that concludes the Gutenberg 13.6 release. Wow, and all the whole what’s release section. It wasn’t as exhausting as I thought it would be. So thanks for the great work of Mary and Jorge to kind of come along with us, or come along with it. So there is also excellent progress towards WordPress 6.1. So the estimates are, does Gutenberg 14.0, would be the last plugin release before feature freeze. And that’s actually only four more releases. So all of a sudden it gets still a little tight, for a feature freeze now.

Okay, so what’s in the active development or what’s discussed is the next, so what’s coming up? There is an update regarding the web funds API. Just to do a little history on that the web funds API was worked on, but it was punted for 5.9, had a minimum implementation, restricted only to the theme JSON settings. And then the aim is to possibly get it into 6.1.

And you can follow along on the progress and on the roadmap with Tanya Mork’s tracking issue, which is 41476, but of course we have the link in the show notes and she provides there her shared vision, what the API supports the topography features for blocks, and then the themes, and also the tracking for the ongoing work for 6.1, that’s divided into things that need to be done for the architecture of the API, for the performance.

Then talk about the future scope of it, are there already no bugs and documentation issues. So we of course have it in the show notes. But yeah, read up about it. And so you can follow along, tracking issues always kind of has all the open issues for a certain feature, and it’s definitely interesting for a theme and plugin developers what’s happening with funds in the near future. So Jorge, during the core editor chat, you shared what you have been working on, and there are some exciting features coming. Do you want to kind of go briefly through it, what you’re working on?

Jorge Costa: Yeah, of course. So one of the big features is expanding what templates you can create on the site editor, which I already referred to previously, and I talked about it already before. So that’s something that we are planning to take to the finish line and all the templates supported on the WordPress hierarchy can be created with a UI. Then we are also betting big on patterns.

Birgit Pauli-Haack: Mm-hmm.

Jorge Costa: So we want to provide the best pattern experience possible, which is a very complex engineering and user experience problem, because even defining what would the perfect experience be, is not a simple challenge. So basically when you have a pattern, no matter if it has 100 blocks, we want for it to be a cohesive structure where you can touch them and modify it as a single unit of content, instead of you not a seeing that it is composed by 100 different things, but we also wanted to allow to customize to change the contents of the patterns, offer some customizability.

And that customizability, it’s something that the pattern can define, it’s not common for every pattern, it depends, in some patterns it may make sense to change almost everything in other patterns, it may make sense to only fill in the blanks, some texts that you already have there. As part of these experiments, one idea is to allow blocks, to output and to use any settings that we already offer on theme.json, so essentially, for example, in a group block that is used in a header, you would be able to say here in all blocks nested inside me, don’t have the ability to change colors, font sizes, everything.

So you’ll essentially only be able to change the text and you’ll not be able to change the other things, so you don’t break the pattern, and you can also join that with our working mechanisms that already exist, so you really just fill in the blanks. That’s a way to offer this experience. There may be other ways where the pattern itself highlights what is relevant information onto descendant blocks and allow you to go there directly, and you just change what was said as relevant information. So we are working a lot on trying to define this pattern experience and make it as good as possible.

We are also going to include zooming out view where you, instead of showing your website and you scroll, you’ll see a zoom out where you view all your page or all your template with the sections that are part of it, and you can more easily have a new pattern that is a header or have a new pattern that is a folder replaced, big areas of design on your website. So that are the things, it’s work that is in progress, and we are hoping that soon the using patterns will be much easier and something more common to do.

Birgit Pauli-Haack: Well, that sounds exciting. Yeah, pattern is the way to go. Are you thinking also to have a UI, so people can create their pattern on the site and store it as a pattern, or because you can create reusable blocks and you can create template parts, but a user cannot create their own block patterns on the UI, is there some thought about that or a decision made?

Jorge Costa: Yeah, I think it’s something that makes sense, and if we don’t include it in core already, certainly there will be lots of plugins allowing people to do that. I think it’s something that we may have in core soon, it’s just that first we want to using the patterns be a very good experience, and then that’s like the cherry on top of the cake, it’s something that probably will happen. I’m not aware exactly there is a decision on it or not already.

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

Jorge Costa: Personally, I expect that it’s something that will happen.

Birgit Pauli-Haack: Yeah.

Jorge Costa: It’s a matter of time and making sure after the experience being perfect, or being the best we can, and I guess people will do that.

Mary Job: That would be a good one to see.

Birgit Pauli-Haack: Yeah. But you’re right, Jorge, there are quite a few plugins actually allowing already the user who doesn’t touch code to create patterns or save a certain section, a group as a pattern so they can reuse it and then only have to change the text. But the locking of blocks inside a pattern, that’s already also possible.

Speaking of locking, there is a new page in the documentation that outlines all the ways, how you can curate the block editor experience, especially also for the full site editing for as a developer for your clients or users in the block handbook. And I will share the link in the show notes as well, because that’s a question that comes up quite often, and now the block pattern somehow triggered my memory that I wanted to mention that. So, Mary, do you have anything that you wanted to add to what’s discussed or in the works?

Mary Job: Oh yes, still on that, Jorge, George Mamadashvili is looking for technical feedback or a review, or his new PR to allow locking inner blocks from the container block. We’re going to put a link to that in the show notes. And there’s also a reminder from Nick Diego on editor box scrubs. This will take place at 1400 UTC. This is 10:00 AM Eastern Daylight Time, on Tuesdays in a call editor channel, on make WordPress Slack.

Birgit Pauli-Haack: All right. All good announcements and work to do. Speaking of locking inner blocks from the container block, having a little tog, and it looks like it’s a little toggle button that will have the user say, okay, and apply the same lock to all the inner blocks in a group block or in a cover block or something like that, so that is really good.

So, I think we are at the end of a show. Thank you all for that, it’s a great show. I was so happy that we put it together today. I just want to remind everyone, July 22nd is our Gutenberg live Q and A with the lead developer, Seth Rubenstein and head of digital strategy, Michael Pickerosy from the Pew Research Center. And my co-host will be Anne McCarthy, and the registration and link is in the show. So Jorge, Jorge-

Jorge Costa: That is always this confusion between Spanish and the Portuguese version of the name.

Birgit Pauli-Haack: I’m sorry, I butchered it probably, either way.

Jorge Costa: Either way is fine, I’m already accustomed to it.

Birgit Pauli-Haack: So if the people want to get in contact with you, want to kind of ask you questions, or how is the best way to reach you?

Jorge Costa: Yeah. You can reach me on the WordPress Slack, Jorge Costa, or you can reach me on Twitter too, JorgefesCosta, and of course on GitHub, George Filipe Costa, which is my GitHub username. So feel free to reach on any of the platforms you like.

Birgit Pauli-Haack: All right. And Mary, do you have anything that you wanted to remind our listeners about that you didn’t get in beforehand?

Mary Job: No.

Birgit Pauli-Haack: All right. So how can people reach you?

Mary Job: Maryojob on Twitter.

Birgit Pauli-Haack: Maryojob. Yes, Maryojob on Twitter. So as always, the show notes will be published on gutenbergtimes.com/podcast. This is episode 69, and if you have questions, suggestions, or news, you can send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Thank you, Mary. Thank you, Jorge. Until the next time, and that’s it for me. Bye-bye.

Jorge Costa: And thank you again for having me.

Birgit Pauli-Haack: You’re welcome. Thank you for joining us.

Leave a Reply

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