Birgit Pauli-Haack and Mary Job discuss Block Pattern Directory, WebFonts API and Gutenberg 12.8.
- Tailwind Blocks by David Gwyer
- Let’s add Tailwind CSS to our custom blocks and create a create-block template for it Twitch Stream with Ryan Welcher
- How to automate Gutenberg block development in WP projects Buddy.works
- Gutenberg Developer Hours March 22nd, 2022 16:00 UTC / noon ET.
- What’s new in Gutenberg 12.8? (16 March) by Hector Prieto
- Justin Tadlock Gutenberg 12.8 Launches the Web Fonts API, Improves Group Nesting, and Adds Keyboard Shortcut for Links
Stay in Touch
Birgit Pauli-Haack: Hello, and welcome to our 63rd episode of the Gutenberg Changelog podcast. Today we’ll talk about Block Pattern Directory, the Web Fonts API, and Gutenberg 12.8. 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 evening, Mary. How are you today?
Mary Job: I’m doing very good, Birgit. Thank you. It’s almost 9:00 P.M. my time, so that’s great.
Birgit Pauli-Haack: Oh, Friday night, that’s what you do for fun, right?
Mary Job: Yes, this is… All right, so we have a couple of announcements. Anne McCarthy published a third round of questions about full site editing experience. Now that all features for full site editing are available in a better version, what are the questions you have? If you have them, please submit them via the survey form that we’re going to share once this episode is published. You can also find it on the Make WordPress Test blog.
Birgit Pauli-Haack: Awesome. Yeah. So there was a first round and a second round, and now this is the third round. And I think that it has gotten quite some improvements since the first round of questions, and the vision for full site editing becomes probably clearer and hopefully answer the questions that you have. So, Alex Shiels and the Meta team invite you to test the Block Pattern Directory, especially the submission. They have created the pattern creator page where you can then, completely with a block editor, create block patterns. So the block pattern creator page, Alex wrote, will allow designers and content creators to build, edit, and submit their best block patterns to the directory.
Approved patterns will be added to the directory where they will be instantly available to the authors of millions of WordPress sites. So for Alex Shiels, I did some testing and also wrote a few notes for the documentation. And it’s not yet ready for you to submit dynamic blocks or patterns for dynamic blocks, like the ones that you use for templates or header, footer, or query loop. And another caveat is that all patterns need to be submitted in English before the translators then can make them available for different locales. That’s kind of, yeah, some that are two things you need to know before you start creating your patterns, but check it out.
We will of course have links in the show note, or when you go to WordPress.org/meta, M-E-T-A forward slash, you see the latest page there is the invitation about the coming soon pattern submission. Only in this phase before it’s really public there is an approval process in there, but the team is actually working to make that instant so that there is no review process in there. But they’re also implementing a report process. So that’s really exciting that people can now submit their best patterns and other people can use it. There’s some great creativity going on as we saw with the block museum, block-museum.com. That came out two weeks ago. So there’s a lot of things happening on the block patterns.
Mary Job: I think this is a great idea, Birgit, because it’s going to open up a chance for people to contribute more to WordPress. This is also an opportunity for people who want to contribute. It’s a good one.
And on community contributions, we have David Dwyer just published a demo plugin on how he was able to integrate the quick blocks with Tailwind CSS. We’re going to also put the link to this GitHub repository in the show notes to say hello to Tailwind blocks, it’s a streamlined way to develop blocks using Tailwind CSS. The plugin is scaffolded using the recommended at WordPress/script, block scripts and autos and CSS, including styles.
Birgit Pauli-Haack: Yeah. And I just wanted to add that Ryan Welcher this week did a live Twitch stream to create actually a template for the create block scaffolding tool for these tailwind styles. That’s also a link we will share in the show notes and let’s see how far he came with it.
Mary Job: Yeah.
Mary Job: Oh yes. That’d be good to see him again. I miss him already, even though we didn’t spend so much time together on the show. So the next Gutenberg developer hours would take place on March 22nd, at 1600 UTC. At noon Eastern, you can pick part in the fourth Gutenberg developer event and meet up with Fabian Kagy, Tammie Lister and Joni Halabi on the expert panel.
What’s Released – WordPress 5.9.2 and Gutenberg 12.8
Birgit Pauli-Haack: Yes. Hope to see everybody there. So that brings us to the section of what’s released. And if you are on automatic updates of minor releases, WordPress 5.9.2 security and maintenance release has already landed on your site near you. And if you haven’t yet, update now, don’t wait.
Mary Job: Woo commerce release also the security and maintenance version, and you can automatically update from version 3.5 to 6.3. If you don’t get the plugin automatically, please update now.
Birgit Pauli-Haack: Don’t wait.
Mary Job: At all.
Birgit Pauli-Haack: Yeah. And that brings us to Gutenberg 12.8. Hector Prieto handles the 12.8 release from release candidate to the final release this week on Wednesday, March 16th. And so there are a few enhancements, not so much particular new features. It’s not an entirely spectacular release because it’s still does some bug fixing for 5.9, but we can start with the enhancements.
And the navigation block has now improved loading and place holder states. And it also has improved user interface feedback for the navigation block. So it makes it easier to handle that.
Mary Job: Yes, the media and text block also add announcements. You can now display the media where you are uploading the same way it works for the cover image and the other gallery images.
Birgit Pauli-Haack: Yeah. And that’s really interesting because then you can continue working and know that that’s uploaded. There’s also a link completer for inline links to post, and this is more for power users, but I think other people who use the keyboard quite a bit is so you can add a link to internal on your site pages and posts by just having two left square brackets in sequence. Yeah. Put them in. And then it brings up a search of modal where you can pick the page or the post that you want to link to.
This is very interesting and it’s really for the power users and it doesn’t put more weight on the user interface. It has a nice balance and it doesn’t affect performance. So this is a great add on to the keyboard shortcuts that we know, too. It’s an auto completer so you can kind of select things from search. It’s similar, like the slash command where you put the forward slash and then for the inserter and this is just for the links. Check it out and try it out and see how it maybe improves your speed on linking things in. It takes the link. If you select it takes the title of the page as the link text. So that saves a lot of time.
Mary Job: Yes, I personally recommend if you haven’t, you should download full site. You use full site editing on the local site and practice with it and play with it, at least that’s what I’m doing before it becomes mainstream. It’s a good idea to get used to how it works, it’s sustainability, the future, WordPress, so there is no point waiting. You can test it out now and be part of the development process. The site editor also got an enhancement. You can now export app to your team expert, the theme.json file, your index, the PHP and style of CSS. This is great.
Birgit Pauli-Haack: Yeah. And it’s really interesting. Yeah. Now a non coder can actually create themes and with the site editor and then so under the three.menu on the right hand side and the sidebar where you also go to the code editor or change the top toolbar kind of thing, there’s also now in the site editor, a menu items that has export and you click on it and then it grabs everything into the theme.json, the index PHP, styles as all, and other files that are in the current theme and downloads it as a zip file to your hard drive. And then you could make just some changes on the styles CSS and give it a new name, zip it again, and upload it. That is kind of the first process of having these no code theme development or theme designers work with the site editor at that. It will be quite have an impact on the WordPress ecosystem.
I also wanted to give a shout out to Jamie Marsland. Just before I headed into the recording of this Changelog, I saw his new Gutenberg block news show on YouTube. And he’s in his show from March 18th, he’s actually demoing the exact process on how to export and import the theme that you create with the site editor. So it’s a fantastic video and of course we link it in the show notes, but just should subscribe to Jamie Marsland’s YouTube channel because he comes out every Friday with this new news show and shows you a few things that are new in the WordPress in the block editor.
Mary Job: I think this is great because it means that you don’t have to recreate your design every time as a person who is no code. You don’t have to recreate your design every time you’re trying to build a site. You could just start with the templates that you already have and then take it from there.
Birgit Pauli-Haack: Exactly, exactly. It’s a great tooling for site builders that work with clients and that have that want to streamline their process. Yes.
So what’s also in there and is the new webfonts API finally landed in Gutenberg then that has been in the works for quite a while. And does API is the first step in helping people to load fonts in a performance friendly and privacy friendly, future proof manner. Something that has been very difficult before and with the few weeks left until the WordPress 6.0 beta release, it would be really helpful to give it a wheel, test this API for your sites, especially theme developers, and also plug-in developers. The tooling still needs to be built. The UI is meant the user interface. So, but it’s definitely good to have it in there so it will land in WordPress 6.0. Yeah, go get the 12.8 and start working on it for testing on your site or others.
What also is new in Gutenberg? And it doesn’t have any ramification for a user, but for contributors, it definitely makes life easier because the WordPress preference panel has been isolated into a package and then all the editors use the same preference panel. So there’s some code reuse and some streamlining of the editor handling. So the widget editor, the site editor, the post editor and the standalone editor can now use this preference panel exclusively. So that is definitely… So the preferences are the things like, do you want to have the two step publish process? Do you want the toolbar on top? They are which blocks are enabled or disabled. This is definitely a step towards something that has been on the wishlist of a lot of people using the editor that the choices that you make are not going to go away when you delete the cache off your browser or close the browser and it’s emptied. And when you come in again, it shows you the welcome guide again, and you have to do some of the preferences, put them in again.
And having that in one package now is the first step to kind of, for the contributers to figure out how those choices can actually be persistent, like being in the user meta panel or something like that. So this is definitely a progression. I know that that has been on the wishlist for definitely three years, if not four, of many people, that those selections are actually persistent. There is a plugin actually out there by Mario Jensen, who has the preference all make them persistent in the user meta fields. I’ll share the link again in the show notes, just so those can kind of bridge the times waiting for that to land in core.
We talked about the create block scripts before. There is another item in the Changelog that the script now supports more plugin held head of fields to add additional information to the plugin that comes out of it. So that is definitely an additional step there.
Speaking of create blocks, there’s also a new confirmed problem for showing the plugin options. So you can type them in and also improve the custom project template configuration that how you integrate your own custom templates with the scaffolding tool. The release shows all the different ways how this works now. And I’m sure either Ryan Welcher or some other developer will walk us through what that exactly means, but for now, know it’s in the Gutenberg plugin, 12.8.
Does that conclude our release today? Yes, it does. There are certainly a few code quality PRs that contributors might want to look at. And also for some tools, especially testing, there have been some changes there and build tool that just has some minor fixes. Yeah. So, that’s the end. Well, thank you. It was that big of a release as we had before, but anything that kind of jumped at you, Mary, that you want to talk about that we haven’t yet?
Mary Job: Oh, I think we’ve pretty much covered everything for this episode.
Birgit Pauli-Haack: Yes. And before we end the show, I want to remind everyone the Gutenberg Developer hours, the next one is on March 22nd, at 1600 UTC on Meetup for registration. And if you listen to this at a later date, I know a few people kind of binge listen to this, but kind of weeks later, so check out the Meetup group, WordPress Social Learning, because there are where the Gutenberg Developer events happen are announced. That’s also where other social learning discussions happen like Nick Diego does some builder building blocks series. Ryan Welcher does some create block tutorials, beginners ones, and then also for no code site builders, there are additional tutorials on there and discussions. All right.
Mary Job: Yes. And if you want to join in for my side of the continent, that will be 10:00 PM, 10 to 11, say between nine to 11:00 PM our time. You should definitely join in. I look forward to seeing you there. As always, the show notes are there.
Birgit Pauli-Haack: Oh, sorry.
Mary Job: Yeah.
Birgit Pauli-Haack: Good point. Thank you very much for pointing that out. So, I just want to recap the Gutenberg Developer hours are actually… We scheduled four events as a trial. There was a proposal at the core make blog in October, and we finally got it implemented to have four events trial. And as it turns out, we probably will have more events. So there will also be to better times for other time zones. Yeah. So for Europeans, it’s definitely relatively late and it’s also, I don’t even know what the time it would be for the Asia Pacific people, but we definitely will schedule different dates and also different time for different time zones, the future ones. We might take a break in April, but then in May, we will start out with new Gutenberg Developer hours in all different time zones.
And if you are a practitioner, you work for an agency as a block developer or a site builder or build themes, and you want to be part of our expert panel that answers the questions from the audience, it’s totally audience driven event. So the people that attend, give us the questions sometimes ahead of time. We sort through them and then say, okay, these are all the questions for block development and these are all the questions for theme development. And these are all the questions that are more conceptual or architectural. And then we work through them and have a discussion about them amongst the panel or with the people in the audience. It’s a meeting style rather than a webinar style. So yeah. Join us either on March 22nd or when we have the next one on schedule. Sorry. Yeah.
Mary Job: That would be great. That would be great, Birgit because, so there’s a saying where I come from that it’s very difficult to please everyone. And I know that it commits is trying. Cracking time zone is very tricky, so we definitely understand, but we will do what we can to make it better and to be able to set everyone. As always the show notes for our episodes, they will be published GutenbergTimes.com/podcasts. And if you have questions or suggestions or news you want us to include, send them to Changelog@GutenbergTimes.com. That’s Changelog@GutenbergTimes.com.
Birgit Pauli-Haack: Wow. Thank you so much, Mary. And this is it for me. This is episode 63. And just in case you’re looking for it on the podcast website, you all have a great time and I’ll talk to you in two weeks. Thank you.
Mary Job: Thank you.