Gutenberg Changelog #62 – Gutenberg 12.7, a New Call for Testing, the Web Fonts API Arrival

Gutenberg Changelog 62 - Cover
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #62 - Gutenberg 12.7, a New Call for Testing, the Web Fonts API Arrival
/

In this episode, Birgit Pauli-Haack and Mary Job discuss Gutenberg 12.7, a new call for testing and the web fonts API arrival.

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

FSE Program Testing Call #12: Hyping Headers

Gutenberg Developer Hours in March

Core Editor Improvement: Choose your Style

Gutenberg 12.7

Web Fonts API

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 62nd episode of the Gutenberg Changelog podcast. In today’s episode, we will discuss Gutenberg 12.7 release, the new call for testing and the web fonts API arrived. I’m Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate, and I’m here with my co-host Mary Job, WordPress advocate and support engineer at Paid Memberships Pro. Good afternoon, Mary. How are you doing today? Well, it’s actually good evening.

Mary Job: Yes, it’s actually good evening. It’s 7:30 PM right now over here in Nigeria. I am doing great, thank you very much, Birgit. This is officially my first show with you alone without Greg so I’m looking forward to this today.

Birgit Pauli-Haack: And I hope we have all the technical issues that we seemed to have for the last episode of it, figured out. And I apologize that we didn’t get it sooner. So, Mary Job now that you are here and be on this journey with me, you have such a big influence on WordPress, and I hope that you can tell listeners more about you so they get to know you a little bit more. So first of all, where do you live and what do you do for a living?

Mary Job: Okay, awesome. So I live in the Southwestern part of Nigeria. It’s called Ijebu. It’s about an hour drive from Lagos if there’s no traffic. Of course if there’s traffic it might be three hours or four hours. I currently work with Paid Memberships Pro. It’s a membership plugin software, for WordPress, of course. And what else do I do? In my spare time I contribute to the community and I run a village where we teach young girls and women how to use computers and the internet and empower themselves. But lately we’re focusing on WordPress. That’s a little bit about me.

Birgit Pauli-Haack: Well, that’s awesome. It kind of reminds me of when I started out working on digital literacy and internet and teaching people things, what they do and then also got into WordPress. So it seems to be, you’re the community organizer that I am per heart as well. So I’m so glad that we can do this together. So do you have family? I know you have a daughter.

Mary Job: Ah, yes. I have one daughter and I have family. I’m a single mom, so I would say that we’re a family of two. That’s what I always say. She’s going to be 12. She can’t wait to be a teenager according to her, so good luck to me on that.

Birgit Pauli-Haack: All right. Well, thank you so much. How deep are you in working with Gutenberg on your websites and on your writing on blog posts, or are you Paid Membership Pro?

Mary Job: So I have been using Gutenberg since it came out but I’m just diving deep into full site editing. The first time I did encounter full site editing, I was a little bit confused to be honest. I was like, okay, so what am I. Because the customizer was also going like, okay, what am I doing? This is going to take more time to get used to learn how to use. So we’re going to see how that goes. I’m going to be sharing my findings in future episodes.

Birgit Pauli-Haack: Excellent. Excellent. 

Announcements

Well, thank you for mentioning the full site editing program. Brings us right into our next topic is that Anne McCarthy has published a new call for testing out of the FSE, the full site editing program, and it’s called hyping headers. And it leads you through the revisiting of common workflows and you’re testing all the new tools to customize a header, including the navigation block and template parts, focus mode, and personalized header for different templates.

So there are some great instructions not only to test things, but this participating in that is definitely a good way to learn about FSE and the little details about it. So you get the testing environment set up and then testing instructions, and then Anne walks you through different tasks to accomplish. And then ask you a few questions. Like, did the experience crash at some point, did you find features missing? Did you especially enjoy or appreciate some of the experience and did it work using a keyboard only? Did it work using her screen reader? And the feedback deadline for that is March 16th. That’s about 12 days out. And then she will relay all your feedback to the developers.

So if you want to participate in it, we’ll have definitely the link in the show notes, or you go to make.wordpress.org/test. That is the second post on that, or just search for hyping headers with Anne McCarthy. The call for testing is also available in Italian, if it’s easier for you to participate in that within your own language, that link will also be shared in the show notes. So I think that will be a good way to start your own experience, Mary, to kind of follow through there. It’s also some guided so you don’t have to think, okay, what do I want to do now?

Mary Job: Right, I totally agree with you. It’s a good way to start, because there are steps to follow. Literally just have to follow the steps and of course note the results.

Birgit Pauli-Haack: Yeah. Note the results and then, you were breaking up.

Mary Job: Yes, I said it’s important to participate, because there are steps to follow. So it’s pretty straightforward for somebody who wants to participate, just have to follow the instructions and then note the results of your test and then share that with everyone to see.

Birgit Pauli-Haack: And there were actually some, I don’t know if they do it for this call, but sometimes the GoDaddy Pro people around Courtney Robinson. They are also doing sometimes Google and Hangouts where they walk through the call for testing with a group of people. So people can follow along. Once we know about that, we will certainly have it in the weekend edition of the Gutenburg times. So another point I wanted to make is we are in March and we have two more Gutenburg, developer hours. Coming up one is on March 8th at 11:00 AM, Eastern 1600 UTC and on March 22nd at the same time. And that will then conclude the four-event trial for the Gutenburg developer hours. And then we will recap retrospect the events and see what we can do for.

We will go to extend the offering through the WordPress social learning spaces to also have Asia Pacific good times for the developer hours, and also maybe have different dates and days throughout the month where those, when those good work developer hours happen. 

What’s Released – Gutenberg 12.7

Yeah, that is that. Now Gutenberg 12.7 was released this week, and there we will have in the show notes, the release notes from the make blog, as well as a link to the WP Tavern post. But before I go in there, there’s also a core editor improvement post on the make core blog about choosing your style, choosing a style that is a new feature in a good plugin, where you can have a selection of styles from your theme that changes the whole theme. The default theme, Twenty Twenty, allows that already. So you could, as a theme developer have two theme JS on files offering to your users and then styles, it has a new menu items as other styles.

And then you can switch between a, for instance, a black or white background with everything else changing as well, or as some of the demos for the 5.9 release showed was that you are all of the sudden have a more blue leaning Twenty Twenty Two theme or a more Red leaning. So there are some, a big improvements there, but also big new challenges and options for theme developers and on the core make blog, there’s a now called Tuesday styles. That gets you a little bit more information about that. All right. So now we get into what’s new in good book, 12.7, it was released on Wednesday, March 2nd, and it starts with enhancements. 

Enhancements

So the enhancements people will have long waited for it that the columns block has now border support. And it shows up when you select the column block in the sidebar, you will be able to set borders, border radios, border colors or border strength. That is certainly something a lot of people have been waiting for is also something that quite a few block tools, additional plugins have provided for a long time. And now it’s actually in core. Yay.

Mary Job: Yeah. The group blocks also have margin support added to the top and bottom. So that’s also a good one.

Birgit Pauli-Haack: You have now more control when you, on the margins there were always quite presets or defaults from the core block, but that you didn’t have as a user control over how big that was, you needed to get the, to CSS code to actually change it. So this is now in your hands.

Mary Job: Yes.

Birgit Pauli-Haack: OK. The list for you has gotten a new enhancement and now you can have multi-select behavior for blocks. And when the shift key is selected, so you can select one block and the other block and then move them together for instance, or show them together. So there are quite a few additional we are handling. We are, there are just quality of life, so to speak enhancements. So this is definitely one for a power user. So the quick inserter has changed now a little bit, and it’s prioritizing patterns instead of blocks that when they’re available in the context of your semantic handling, I think it is, that was the one if you are looking for, and that is in the template editor or the site editor, not so much in the post editor.

And it’s part of the pattern and enhancements that we also get in other places you also show existing template parts, and the list of block patterns in the creation flow. That’s in the four template parts. So if you are editing a header, you also get in the inserter header patterns that come either with core or with the theme that you are using. So that’s definitely improvement and an enhancement for all those site building editors.

Mary Job: Yeah. That saves you from having to search, because I know previously have to search most times I have to open the entire blocks and pattern and just be able to pick the one that I want for the team or for the pluggin that I’m working with.

Birgit Pauli-Haack: Exactly. Yeah you pass by all the other blocks and patterns until you find the one that is it’s much easier now to find things that you need. 

So the next part is the initial version of the style engine. There has been quite a few discussions around and I will mention one specifically, but the team is working on a unified kind of style engine to solve a few inconsistencies and to help theme developers to work with the CSS variables that come with the styles and also how to add their own styles without having to revamp it every time a new plugin comes out. And that is now possible because the post editor is fixed and the style editor and the site editor or template editor either way are now much more finalized. So now all the things that have changed in the last three years are now kind of settled.

And the solutions that were provided can now be kind of consolidated and standardized. And Mark Ru Wiley also has a proposal in the Gutenberg issues where he tackles that topic quite a bit and has a few suggestions on how to solve some of the issues. He also has a very good list of what the issues pain points actually are. So he defines the problem quite nicely and comprehensively. So it’s definitely worth a read for the same developers that are trying to get the head around full site editing with the block editor. And so that’s just as a side note, you will find the links all in the show note, I think we mentioned it also briefly in our last episode, in the 61 episode. So there is now a with this versioin, now also an initial work in progress of the styling part.

Part of it is also the lowering, the specificity of alignment rules for supporting layouts to wide alignment. There was this catch 22, that if you wanted to have wider aligned blocks, like a cover block or a gallery block or full aligned, you needed to get to the edges of the browser. But if you don’t want the text answer, go to the end of the browser, you needed to have a margin on that. So it was kind of a catch 22 that you couldn’t use the wide alignment or the full alignment when you wanted to also have borders there. So there is a solution there, if it’s working for your theme, you’ll find out. And then speaking of themes, this release removes data alignment for the themes, its a port layout. So you might need to update your theme to adhere to that. And it’s also remove div wrappers for the aligned image blocks. So that will certainly also interrupt some of the themes when you are using it. But it’s a very simple adjustment, but I need to go through that. Mary, do you want to take the next one?

Mary Job: Yes. The patterns registration from directory with theme.json is not allowed. So want to write up on that, but those who are building patterns and teams, and then there’s also the list view. You can now expand block list three on selection.

Birgit Pauli-Haack: Yeah the expanding and collapsing of list three is really helpful when you have a long post or template that you need to organize there. Yeah. So let me go back to the allow pattern registration from directory, with the theme.json. So you can now I’ll put black pattern registration in a sub directory of your theme. And then in theme, Jason, you can link to those patterns through a setting to that directory. The team is also working on a method to actually include patterns from the WordPress directory and have them, that is that? Okay, sorry. So you use the slug from the pattern in the WordPress directory and add it to your theme.json. So it will be shown in your theme for the inserter as well. So that’s good. All right. That concludes all the enhancements.

There were quite a few others that we kind of skipped over it, but because there were a little minor or hard to explain there, but the bug fixes are coming and coming, coming bug fixes. 

Bug Fixes

So every release has 20 to 40 bug fixes. And that is really cool how the community kind of reports bug fixes and the get up issues, and then the team to take them on and fix all the things that are, are not working just right, like the latest post block had a missing class for the Post title. So it was very hard for a theme to actually target the Post title for the block that has now been solved. Also the query block got a bug fix noting that when you only want to see sticky post, that nothing will be displayed. If there are no sticky posts. So there was some quirkiness there, but now it’s solved. The global style duo tone rendering was missing in the post editor.

And that seems to be a backport that will go into the next minor release of the WordPress core. So that is fixed and onset core. Earlier so you don’t have to wait to 6.0 to come out. All right. 

Accessibility

That brings us to accessibility updates that are together with a search button. Also the duplication labels for safe draft or saved as pending buttons have been avoided now. And then there is the rich text. There was a change in the rich text component, and that was reversed because it had an area multiline states, which of course doesn’t work that well. And then the tree grid for at home and end keys and up and to jump to the start and the end of the grid. So that’s really helpful for keyboard navigation. All right, this Gutenberg plugin also brings us new APIs to handle core data like post data or other records from custom post types, one meta tag, and it proposes two new experiments.

PRs

One is the use entity records proposal, and then an experimental usage of that, which is a hook that you can use to handle data. And PRS actually have some example quote that you can use. And also what’s in and out of the scope of this PR. And so that is definitely neat. Your testing, now when you open up the Gutenberg plugin, there’s in the menu, in the WP admin, there is a sections called experiment. That’s previously where the navigation block and the patterns and other things that were in experiments and have now been released. Now, the newer experiments is all about the data. So you can have an easier way to use the core data store.

And structure it’s definitely very developer centric, of course, and there are other considerations. So the experiments and the PRs have all the discussions in there, and it might be really helpful for community developers like agency developers or plugin developers to take a look at that and see what would be a way to solve these, or is there a need of any changes Adam Selinsky has done the experimental work there, the pioneer work to have the entity record hooks in there. So check it out. It’s a new API. 

Documentation

And of course the documentation has changed. Some of the handbook includes now all the additional information about the pattern fields for the theme.json also the contextual patterns and pattern transformations and the semantic pattern documentation. So there is definitely some reading materials for you over the weekend. So there’s one, if you are a developer who also wants to contribute in creating releases, there’s a new NPM package available now to automate the cherry picking to WordPress trunk commits during publishing. So there are some hiccups that were before that were manually solved are now automated. So that’s, this part also gets easier and easier.

Okay. And I like that the release notes always also show now the first time contributors thank you for making the jump to contribute to WordPress Gutenberg, to the Gutenberg repo and Dave Smith. Also now solved has written the script to add all contributors to the end of the GitHub release notes for each Gutenberg plugin. So that’s also great. So people get recognition beyond the GitHub repo. So it’s in the WordPress make blog as well. All right. Anything else that stands out for you, Mary from this release?

Mary Job: No, not at all.

Birgit Pauli-Haack: Not at all. Good. So we covered everything that is good. I’m really excited about the multi block selection, the list view, and then margins reports for the group, of course, and the block transformation now retains classes. That’s certainly something and you can register patterns from the directory. So there are quite a few new features in there that make working with it much easier. 

What’s in Active Development or Discussed

So Justin, so now can we come to the section of what’s discussed and Justin Tadlock from the WebPress from the WP Tavern has found that the word web funds API has finally arrived and historically it was punted from the WebPress 5.9 release just because it didn’t seem ready and needed a little bit more testing through a good more plugin releases instead of going right into 5.9. That’s the way to add web fonts to your web install and have a standardized API to do that.

So not every plugin and every theme and every yeah, loads, additional web fonts, it all goes through this API and there is no duplication of that. And now you can also, it does not have a theme.json support yet, but that is right now, it’s only available through PHP. So you definitely need to look at that beforehand, for your theme, Aris Stratus, one of the developers, the initial road about the privacy issues that are there because Germany and some other countries are it’s about the Google font providers or providing Google fonts in, through a CDN that has some privacy issues there. And now it looks like that local fonts are officially supported, but theme and plugin authors must register the custom providers. So it’s getting, getting complicated. That’s a standardized API is really, really helpful for. So there are some privacy issues with the web funds from certain providers.

The pull request has PHP examples somehow to do that, the theme.json keys and values are corresponding with the font phase rules and Justin Tadlock looked did a great job in putting all the details together in one post. So you don’t have to read through the make blog posts to find all the different details about it. And I’m sure the documentation team is working on that right now. You cannot do this now with 12.7, it’s slated for 12.8, or you can use the good work nightly from the good work times. Gutenburg nightly plugin that is always created from trunk. So it has the newest merged PRs in it. Yeah. 

That brings us to the end of this good book change log. It’s a little shorter today and that’s sometimes a relief anyway for our listeners. And before the end of the show, I just wanted to remind everyone, March 8th and March 22nd, or the Gutenburg developer hours. And there is a call for testing called hyping headers. The number 12 call for testing for the full site editing program. Do you have anything that you want the people to know Mary?

Mary Job: No, not yet.

Birgit Pauli-Haack: Okay. So you survived the first episode.

Mary Job: Yes. I feel like I have a lot to learn.

Birgit Pauli-Haack: Well, you also know a lot. And so as always, the show notes will be published on gutenburgtimes.com/podcast. gutenburgtimes.com/podcast. And this is number 62. And if you have questions or suggestions or news you want us to include, then send them to changelog@gutenbergtimes.com that’s changelog@gutenbergtimes.com. Email address, or just ping me or Mary on Twitter, private chat, or even on the public chat. So thank you, Mary, for being with me today and making the show with me and thank you all for listening. And I’ll talk to you in two weeks.

Mary Job: Yes. Thank you. Be thank you everyone for this. And I’ll see again in two weeks.

Birgit Pauli-Haack: All right. Take care. Bye bye.

Leave a Reply

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