Gutenberg Changelog #64 – Gutenberg 12.9, Example Repo, and Inline Tokens

Gutenberg Changelog 64 cover with Mary Job and Birgit Pauli-Haack
Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #64 - Gutenberg 12.9, Example Repo, and Inline Tokens
/

Birgit Pauli-Haack and Mary Job talked about Gutenberg 12.9 new features and enhancements, updates to the Gutenberg Example Repo and share a post on how to implement inline tokens for Rich Text. And so much more.

Show Notes / Transcript

Show Notes

Announcements

WordPress Pattern Directory

What’s Released?

Gutenberg 12.9

Work in Progress and Discussed

Stay in Touch

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 64th episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about Gutenberg 12.9, WordPress 5.9.3 and the Gutenberg Examples repository, the walkthrough WordPress 6.0 and so much more. I’m Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate. I’m here with co-host, Mary Job, also a WordPress advocate, support engineer at Paid Membership Pro and organizer of the WP Africa community. Good evening, Mary, how are you today?

Mary Job: I’m doing very good, Birgit. Hi everyone, hope everyone is doing awesome today in the world.

Birgit Pauli-Haack: So, the WP Africa community, tell me more about it.

Mary Job: Yeah, that was born out of the needs to be able to connect with more WordPressers on our continent, and to also be able to get more people to be interested in contributing to the WordPress open source project, because … So, there’s a colleague of mine named from Benin, but it’s pronounced Benin over here. It’s the country right next to ours and there was a survey they did one time to see where the contributors to the open source project were from. When it came to our continent, the percentage was quite very, very, very low. So, we thought to ourselves a good way to get started would be to get to know who and who are using WordPress, doing WordPress on our continent. If we’re able to connect with more people outside our respective countries, then we can get going from there. Maybe in 2024, 2025, we’ll get to have a WordCamp Africa, I don’t know, but we want to have one.

Birgit Pauli-Haack: That’s awesome. So, how can people connect with WP Africa community?

Mary Job: If you go to the website, wpafrica.org, you can see the directory there. You can join the directory. You can also join the Slack channel. There’s a Slack channel, Slack workspace for their community. You can also join that, the information is also on the website. Everything you need to know about the project is on wpafrica.org, yes.

Birgit Pauli-Haack: Wonderful, wonderful. You can use your WordPress login information to actually register with the Slack, I found. So, that’s very good, yeah. Thank you. 

Announcements

Yeah, so we have some announcements and there’s the all-new Pattern Creator, is live now, so on wordpress.org and it was taken online or opened up for public submissions last week and within a few days, 90 patterns, by about 30 plus designers have been submitted since March 25th. So Mary, did you get a chance to browse the pattern directory? What did you see?

Mary Job: Oh, yes. I got a chance to look at it, it is amazing. I mean, literally, if you wanted to build your site as a newbie, or as a business owner, you can simply take the designs from there and then use them on your site and modify them to your own advantage. You don’t have to start thinking, “Oh, how do I get creative with building blocks?” You can simply take the patterns and use them.

I particularly like that they have like buttons and the fact that you can submit your own pattern to the directory. I mean, that’s perfect. You could create a block pattern and then submit it right there on the page. I think it also opens up a chance to contribute. People would think that WordPress is maybe too technical for them, this is something good they could play with and they could see maybe it would bring out a creative spirit in them, you know?

Birgit Pauli-Haack: Yeah and I tested that block Pattern Creator and it’s actually a block editor, that is standalone. It’s quite an interesting experience and then you submit it and then there is no curation for that matter. There are certain things that you can see on the about page, like the dos and don’ts, and then it’s going to be online and people can … there’s a little hard, so what you say is a like button, they’re their favorites. So if you have 90 patterns, or now 160 patterns with the ones that were already in there, or 170 actually, I feel a little bit decision paralysis, where you say, “Oh, I like them all.” So yeah, when I look for a price list or column blocks or something like that, I don’t know. So, you can browse them at your leisure. Put some hearts or check the hearts on it and then you have a separate page that says, “My favorites,” and that’s a really good way to curate the whole directory.

Mary Job: Yes. I just actually thought of something, this is something that teenagers would also want to play with. I’m just thinking off the top of my head. I mean, a teen would want to play with something like this. There’s always been discussion in the community about how to get next generation into WordPress, get them using WordPress because they seem to like the newer social media channels. Because I know my daughter is always telling me, “Oh you’re not on TikTok, you don’t know what Snapchat is.” I’m like, “I don’t know what those are.” So, I think this would also be a very good way to get them interested in WordPress, and if they like what they see, which I’m sure a lot of them would, that could also spur them to become WordPressers. I mean, that’s good, to get a future generation interested.

Birgit Pauli-Haack: Yeah, and I like what you said as well, that it’s another way for people that don’t code to contribute. Yeah, it’s a second place. The first one was actually the WordPress Photos Directory where you can submit your photos that then could end up in one of the panels because the WordPress Photos Directory is also fed into the Openverse directory and Openverse is actually driving the media library in the patterns submission or pattern creator. So when you say, “Okay, I need an image.” You go to the Openverse and you can punch in a keyword like forest, or mountains, or blocks. Then you get a series of pictures that you can use on your block pattern. So, you don’t have to upload them, you don’t have to manage them. The people who use the pattern actually can also see the pictures without having to download them because they’re available on the internet.

So, it’s really a great integration on multiple levels. The repositories code is actually available on GitHub and you can see how you can learn or experiment with it, how the Openverse directory is added to the media library, also how block custom post types are actually handled by the block pattern directory, because any block pattern is a custom post type. So, if you want to learn that, you can look at the code and figure out how they deal with the custom post types. It’s actually a great tool on so many levels.

Mary Job: Yes.

Birgit Pauli-Haack: … take a shout out on that. Or speaking of testing and new features, Anne McCarthy just posted a new call for testing through the FSE, the Full Site Editing program. It’s all about authoring an author template, but she also writes that you create a template for your author pages, you learn how the locking UI for blocks works and it allows a site builder to prevent an editor to remove or move locked blocks. You also get to test the new design options and the new, no result block. If you have half an hour or so, spin up a new test site with local WP and follow Anne’s meticulous instructions. You have until April 21st to leave your feedback on the experience. So, I think I’m going to carve out a few minutes, well the half an hour, and participate in that because it’s a great way to learn the new features and also contribute by thinking through, “Okay, what do I feel? What do I see? Is there something that crashes my computer?” Or these kind of questions.

So it’s ahead of WordPress 6.0 release, that’s the best way to … or one of the few ways, to walk through some of the new features that will come to a WordPress instance near you soon. You have until April 21st to leave your feedback on the experience for the call for testing on FSE. If you’re more interested in watching other people walking through the current stage of WordPress 6.0, then join a panel on April 5th at 11:00 Eastern, 15:00 UTC, and you will hear from Channing Ritter, she’s a designer on the WordPress project, Hector Prieto and Matias Ventura, both developers on the Gutenberg plugin and the event will be moderated by Daisy Olsen and Dan Sulchin on April 5th, put it in your calendars. We have the link to the announcement post on May Core in the show notes. That’s also because the Zoom link where it’s going to happen will be shared on the Make blog, but it’s on Tuesday, April 5th.

If you are listening to this episode after April 5th, I’m sure there will be a recording and it will be also shared on the post where that recording will live. So, going through the link will also benefit you who have not listened to this in time to get to the live show. So, that’s for you too.

What’s Released – WordPress 5.9.3 and Gutenberg 12.9

Now we come to the section of what’s released and a 5.9.3 security maintenance update is coming to you. The release candidate is out and the scheduled release is on Tuesday, also April 5th. There are nine bug fixes on Core and nine bug fixes from the block editor that come to your 5.9 instance, and of course, the security features that are coming as well. Now it’s your turn.

Features

Mary Job: So, now we can talk about the features, the new features that are coming in this release, yes?

Birgit Pauli-Haack: This is Gutenberg 12.9 release. Yes, yes, we are. Gutenberg 12.9 is out.

Mary Job: Okay, awesome. So, the Block Editor has introduced what they call the block lock in UI, which allows the admin to have more control over the blocks, if you don’t want … maybe if you have built a site and you don’t want the editor, or the other to be to move around the blocks or rearrange your design, you can now lock those blocks. The post-date block now allows the user to pick a site default. So, the post-date block also now allows the users to pick their date format. This is great because you can now pick a date format for that post-block that is independent of the site’s defaults. You can select this and create your own individual format string. For instance, I’ve noticed most, I think the US date format is the day, the month and the year, I think. Whenever I look at these dates, I know that I get confused, because for us, it’s the other way round.

Birgit Pauli-Haack: Yeah, that’s certainly one thing. It’s actually quite nifty because the person who creates the post can actually select the date, so it could … even outside of the site default, or you have an individual format. So, that’s quite helpful. And yeah, I know what you’re saying. I confuse everybody with dates, especially when I’m talking to Europe. So, most of the time I start with the year, month, and day, just to be sure, or I use the month and then the day and the year, so put the month and like April 5th, or not 4/5 because it could also be 5/4, especially … So, only in October, November, December, it’s relatively clear that it’s … or what is it? No, after the 12th of the month, it’s relatively clear what format is here.

All right and there is a no results block container now available for the query block. It’s the first iteration and it follows the idea that if there are no posts available for a certain criteria that the template has, that it should show some notification and that the site owner could modify that notification, or that saying, there are no blocks with that kind of criteria. It’s a first iteration but try it out. It might help with the theme development quite a bit.

In with 12.9, there are some great enhancements on the list view. So now, you can actually … multiple select on the list view is now available and it supports the shift plus for Home and the End keys. So you can navigate through it by using the keyboard shortcuts that you know also from … Page Down, Page Up, from earlier days in the computer as well.

Enhancements

Some of us actually have muscle memory for those and now it’s great that we can use it in the list view. But even more helpful is the collapsed list view by default of the editor. So if you have, I don’t know, 30 blocks in your post or page and you open the list view, it also is now … everything is collapsed. So, if you have a group block, it only shows the group block, but when you click on it to extend, you’ll see what blocks are inside the group block or same with a cover block.

So, you get a compressed version on the list view, and you can easily and better navigate that. So, all nodes are collapsed and the initial impact on heavy nested pages is reduced, reducing the cognitive load, so to speak. 

Also, there was a nice feature and I don’t know how critical that is, but when you have a color palette and as a user, you create a new color that you want to make available through all the color selectors throughout the site, so you can add a blue and you can change actually the label that is displayed in the list of which color is selected. So, that’s quite nifty to actually put in, because then as a theme developer or a site owner, you can make clear it’s not a blue, it’s the brand blue, or it’s the sale-able blue, or whatever your lingo is in your own company to identify the colors of your brand. So, I think that’s a nice quality of life kind of feature, and it helps reduce the worry of which color is it that we want to do.

Speaking of controls, there’s also now to the number control in this release was added the minimal and maximum font size for the tag cloud block. So now you can say, so the smaller size is six and the largest size is 25, or something like that through all your tag cloud. That is now pretty precise. Yeah, that wasn’t available before, but people knew it from the classic editor or the classic widget section, when you selected a tag cloud, those choices were actually available. It’s glad that this is back and on feature parity with the previous versions.

So then, the gallery block got a little easier now because you can control the gutter, or the space between the images. You can make them all together, or have a nice little space in between, and from zero white space to a large art gallery, kind of style gaps. With that, you also can have different layouts for your gallery images. I’m thinking that would be actually quite a nice experiment for block patterns to figure out additional ways to style the gallery block and have different ideas on how to make it work.

The separator block received a refactor on the color support. So, now you can have different colors, but also with different views. For designers, that’s very important to make sure that the separator block is also within the design. Back to you, Mary.

Mary Job: Thank you for that, Birgit. So, the post editor also got some enhancement. First is the show view per view link for drafts saved on snackbar notice. This aims to make previewing a post, more visible and more consistent so that the auto always drafts and a post can easily preview their posts as the link to preview their posts in the snackbar notice.

Birgit Pauli-Haack: The snackbar notices are the black little notices that are on the bottom of the screen when you save things. So you would say, “Okay, post is saved,” and then you had to go up and preview. So now, you can do it from the bottom of the screen.

Mary Job: Yes. Do you know sometimes I have to click twice just because I want to quickly go down to click on the links?

Birgit Pauli-Haack: Yeah.

Mary Job: So, this is a good one. Thank you for your time for this. The site editor also now, you can add more template types as the site editor. Previously, when creating new templates in the site editor, we linked that to a more site of template types. Now you’re able to create a template for many different types of pages as you would need on your website. So, the theme exports, so now you can also export the whole theme.

Birgit Pauli-Haack: So, what kind of pages I can do category pages and I can do author pages, taxonomy, dates, tags.

Mary Job: Tags.

Birgit Pauli-Haack: … and attachment pages? Okay.

Mary Job: Yes, yes, great. Still on the site editor, you can also now export the old theme. I believe there is second feedback for this, to see if this is going to be a helpful tool or not. So, it’ll be good if more people can test this out and comment and let them know if this is a tool that would be helpful for site builders or not, okay?

Birgit Pauli-Haack: Yeah.

Mary Job: So, you can also export a theme using the name for this ZIP file. This is done so that it makes it easier to add a theme to your WordPress install. So, this is also a good one because I know that in the past when I export themes, it usually has these random numbers on it and then you have to the name, if you plan to import that or install that on the site. There’s a concern that supporting the old theme might mean that the size would be bigger, but like I said, it’ll be great to have people test out these features and comment to let the builders know if this is something that would be very useful for them to add or not.

Birgit Pauli-Haack: Yeah, yeah, definitely. Yeah, if you find something quirky, definitely file an issue on the GitHub repository, or just ping me and I’ll walk you through it, if there’s something happening. Even if it’s not part of the call for testing for FSE, there is a Slack channel in WordPress Slack, that is the FSE outreach dash experiment. Yeah, experiment. That’s where site builders actually come together to discuss certain things. Now there will be some more traffic and some more conversation happening, now that another call for testing is out. It will also be additional information coming out because the call for questions that Anne had put out four weeks ago, I think, just closed the week. So, she’s working on getting answers to your questions and she will post that also at the Full Site Editing program Slack channel probably, and of course also in the Make blog of the site.

New APIs

So, the block library, there are new APIs in this release for the block patterns, is one that it automatically loads the file with headers, from a theme pattern directory. So, as a theme developer, you can, now … You don’t have to create a PHP file with all the patterns in there. Now, you just copy and paste the pattern that you built and put it into an HTML file and just store it in the directory called patterns and the editor will pick it up. So, it will show up in the inserter. If you use it a block template, it will also show up there for that. So, that’s certainly another way to simplify the whole theme production workflow. It’s similar to templates and template parts, the directory structure, where you pick up the templates and whether the editor picks up the templates list and the list of template parts from the directory and now you can do it with patterns, so really easy to follow along.

Experiments

Then there were some, two … we didn’t have a whole lot of experiments lately in the Gutenberg plugin, but now there are a few, again … Well, two, actually. One is a generic avatar block for authors. So, if the author, like the comment or the editor that created a post, doesn’t have an avatar on site, or in Gravatar, you actually control what the generic avatar is going to be. Then there’s also a new version of the list block implemented as a nested block and transformed, and also has a few PRs in there that are all around the refactor of the list block, because it’s been said quite a bit, that there is no inner block, so you couldn’t have an image in a list block where you couldn’t have quote in a list block.

So, this is going to change and you can enable those by going through the experiment section and click on the list block there. Yeah, so it’s implement the nested block behavior, transform the list for the list block. And then also change the start number, the order and the reverse list block attributes, also for a nested block list. Yeah, those are the things in the experiments.

There were also some great changes in the documentation. You can read up about them in the release documentation. There was quite a few things for code quality and the tools, but I don’t see anything that I would want to point out, except that they’re adding now the infrastructure for writing end-to-end tests in a different library or different format. It’s called Playwright instead of … what’s the other one? Puppeteer, yeah. Justin Anyon had a Make blog about that, so I’ll share the note in the show notes.

Gutenberg Block Examples Repo 1.1

So, that concludes the Gutenberg plugin 12.9 change log for today. There was also another release. So 5.9.3 release candidate, and then Gutenberg 12.9. Ryan Welcher released a new version of the Gutenberg Examples repo and it’s now in version 1.1. That Examples repo has examples for a lot of different blocks, with a lot of different settings and controls. You can really learn from that how the various items work, so you can replicate it in your blocks.

It was quite a bit behind because the blocks haven’t been migrated to the new API that uses the block JSON. So it was not really teaching the best practices or the newer way to do this, but now that has changed. This is definitely a major update, so this plugin includes completely updated block examples, as well as new non-block examples, comprises of 40 PRs by eight contributors, and it’s actually were the first release since the start of the repo in 2018. How to use it, you the instructions are in the README file. So yeah, go ahead and learn and check it out. Of course, if you have any questions, send them our way. We try to all answer that.

What’s in Active Development and Discussed

This brings us to the section of what’s an active development and discussed. Dennis Snell, and he’s one of the core contributors on Gutenberg development since the beginning. He had a proposal on a concept of dynamic token in Core, and the GitHub discussion link will be in the show notes. But this goes back to the preliminary roadmap of Gutenberg phase two for 6.0, that Matius Ventura published on the Make Core blog. He wrote, “As one of those things that are supposed to come, is explore the viability of inline tokens.

“This has come up repeatedly in the content of rendering dynamic strings, such as the current date in rich text blocks.” Snell wrote then on that proposal, “One area the block model has been deficient however, is in establishing more granular semantic types of inline content that carry meaning, not associated with a block. These inline semantic parts represent content or metadata that comes from outside the document being edited and may be relatively static or highly dynamic.” He continues to outline the character of the token concept. He offers us code examples of possible how this going to work with in different context with the block JSON example, a save and edit example, and then the token execution, maybe in a PHP file. Dear listeners, if you feel that this all rings like Shortcodes, you are not wrong. It definitely would be the Shortcode 2.0, which are much better interface.

Mary Job: Okay. So, still on active development and what’s discussed in a newest design share Channing Ritter highlights a merit of design the team is working on. This could use your input and critique. Under the headline, “Status and visibility panel improvements,” she links to a prototype you can browse the aspirations to improve, the publish and posts matter in panel. Birgit, you noted here that you enjoy the various views of how the panels could look, as much cleaner and clearer too and so you can….

Birgit Pauli-Haack: Yeah, go ahead. Sorry.

Mary Job: So, you can browse the prototype. We’re going to put a link to that in the show notes. There are other highlights that are also interesting, such as adding the post-category templates, the page start options, star version, over animation, icons for groups through and stack, new blocks, comment query loops design, default design. All of this is work in progress and soon to come to a Gutenberg plug-in near you.

Birgit Pauli-Haack: Yeah, I’m really looking forward to the stack new block, because it should give control on how your group block behaves with different screen sizes. 

All right, so thank you everyone. I think that is the end of our show. No, I know so. Yeah, before we end the show, I want to remind everybody, April 5th is the walk-through on the features, where the three Channing Ritter, Hector Prieto, Matias Ventura walk through all the features and figure out, “Okay, is this good enough or is it … ” Yeah, “What’s coming in and do we find still bugs?” So, there will also be a note taker, April 1st, 11:00 AM Eastern and 15:00 UTC.

As always, the show notes will be published on the gutenbergtimes.com/podcast. This is episode 64. If you have questions, or suggestions or news you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Well, it’s so great to see you again, Mary, and thank you for having this conversation with me. Well, until the next time, dear listeners, thank you for staying with us through the show.

Mary Job: Yes, thank you everyone. And thank you for bearing with my audio.

Birgit Pauli-Haack: wpafrica.org, if you are on the continent and want to meet more WordPressers. Yeah, check out the site. That’s it, thank you for listening. Goodbye.

Leave a Reply

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