Howdy,
Thank you for keeping in touch between weekend editions. I am always grateful to read your comments and ideas. I learn so much. Keep ’em comingđ .
I just finished testing the submission process for the block pattern directory. It’s a great experience. It showcases how the block editor can be used outside the content creation process. It is also a test case to for integrating Openverse into a media library and how to handle custom post types with the block editor. If you are eager to learn more about either of the topics the code is public and available on GitHub.
I hope to see you at the Gutenberg Developer Hours on Tuesday.
Be well,
Yours, đ
Birgit
Gutenberg Plugin Version 12.8
Hector Prieto coordinated the release of the 12.8 version of the Gutenberg Feature Plugin. In his release notes Whatâs new in Gutenberg 12.8? (16 March), he highlights the following topics:
- New Webfonts API
- Swift inline insertion of internal links
- Steps towards full visual theme creation
- Iterating on placeholder and loading states
Many of the other changes are subtle, vital changes to the interface, to make the users feel more comfortable.
As always, WPTavern’s Justin Tadlock wrote about it, too: Gutenberg 12.8 Launches the Web Fonts API, Improves Group Nesting, and Adds Keyboard Shortcut for Links
Mary Job and I recorded our Gutenberg Changelog episode 63 last night and it should already travel to your podcast app. We really hope that we figured out the sound issues now, although technology wasn’t cooperating very well. We still had fun chatting about family and travel, off the record.
Gutenberg for #nocode site builders and Content Creators.
Beatriz Fialho is a product designer at Automattic and open-source contributor, among others she worked on the new News theme on WordPress.org and the site of the Block Museum of Art.
In her most recent post and video, Designing a theme in the WordPress Editor, Fiahlo recounts how you can create a theme by just using the Site Editor. “Weâre finding that itâs more and more possible to design a fully-featured theme using just the Site Editor, skipping that Figma step entirely. This takes us from a rough idea to a working theme in just a matter of hours, and doesnât require opening a code editor at all.” she wrote about the theme design process at Automattic. She also had a few tips along the way.
This week’s Gutenberg Block News show with Jamie Marsland landed. First, Marsland demos the new theme export features. Go from modifying and existing theme via Styles, to uploading it as a new theme in six steps:
- how to modify a theme,
- export it via the site editor,
- make three minor changes,
- re-zip it and
- upload it to a website and
- activate it.
Check it out and learn about Marsland’s Theme of the Week, the review roast and more.
Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Have you been using it? Hit reply and let me know.
Lesley Sim, founder of the Gutenberg first Newsletter Glue plugin and used her on the Gutenberg Times, published an in depth tutorial on how to build your own paid newsletter on WordPress with Paid Memberships Pro. If you ever wondered what it took to create a Substack-like tool for writers, educators and consultant, this could be your blueprint.
In the series Building Blocks, Justin Tadlock walks you through his tutorial How To Build a Recipe Card via the WordPress Block Editor. The end product is a pattern, created all with existing blocks and available to copy/paste into your site via a GitHub Gist the wp-recipe-card-pattern.html
Anne McCarthy started the 3rd round of Full-Site Editing (FSE) Questions. “If possible, please focus questions specifically around WordPress 6.0 as those will be the most high impact to address ahead of this upcoming release.” she wrote. You can either submit your questions via the Survey Form or leave a comment on the post by March 30th, 2022.
Alex Shiels from the Meta Team just announced that the Block Pattern Directory will soon be open for public submissions. You are invited to test the submission process before it goes live. You can create your block pattern using a stand-alone front-end block editor, using all core blocks, except theme blocks, for instance site title or tag) and dynamic, site related blocks, like a query loop.
Openverse is integrated as media library, and you can use images released with the Creative Commons license “CC0 license, no attribution needed”, to keep everyone out of licensing troubles.
Once you hit the submit button for your English block pattern, volunteer translators on the Polyglot team will make it available as well for other locales.
After the WordPress Photos Directory, the Block Pattern Directory is another opportunity for creative people, non-developers to contribute to the WordPress community.
Sarah Gooding on WPTavern wrote about it in her article: WordPress.org to Launch Pattern Creator to Expand Pattern Directory.
Jamie Marsland has 10 WordPress Gutenberg Block Editor Tips That Save You Time. From disabling the pre-publish step, over the List View to the Slash command, you’ll find a great array of tips and tricks for the new and power user alike in Marsland’s video. Personally, I also enjoyed the Mac Shortcut to get a list of Emojis to use in your content đ.
Developing Blocks and for the block editor
Where are WordPress Block Plugins used on my site? Rene Morozowich looked for the clues in the database and shares what sure discovered. She walks you through the process can code.
If you are uncomfortable with raw database tables and SQL you can also install the plugin Find my Blocks. This plugin provides you the list of used blocks, the post, and pages, you used them on and the unique identifier of each block. You can use the search in WP-Admin > All Posts enter the unique identifier string into search box, and you will get a list of posts where you used a particular block. I described the process in detail on GitHub, commenting on the tracking issue for Block Manager enhancements.
Pascal Birchler, core contributor at Google, explored building Gutenberg Blocks with BentoJS components. His tutorial, How to create WordPress Gutenberg blocks with BentoJS, is part of the official BentoJS documentation. Birchler and Alain Schlesser, maintainer of WP-CLI are meeting up at CloudFest in Germany, to explore the use of BentoJS with the block editor.
BentoJS website | Pascal Birchler’s GitHub repo for the Gutenberg Carousel.
Munir Kamal, author of the Editor Plug plugin and founder of the Gutenberg Hub, posted a tutorial on How to create a Custom Block Category, a section in the Inserter that can hold your group of blocks.
Ben Ritner, founder of Kadence Theme and now part of Liquid Web and StellarWP, was this week’s guest on the Torque Social Hour with DocPop and Nick Diego.
The Kadence blocks plugins was available even before the block editor was merged with WordPress 5.0 and has now over 200,000 active installations.
On the show, Ritner discussed the realities of a WordPress theme developer and listed a few major features that he found missing in Gutenberg, before Ritner would consider it a site builder. “How there is no responsiveness in any of the Core Blocks is blowing my mind. How are we working on full site editing and not handling that key aspect of web development?”
Ritner also explained, why his team doesn’t yet consider making a child theme for the full-site editing experience. “It’s not ready yet”. Kadence created a design library early on, so there is no need for Block patterns in the theme. Once they create a child theme for full site editing, they will recreate some of their templates as Block Patterns.
These are only a few insights you get from the show. It was a candid discussion that is well worth your time.
Speaking of responsiveness. The Gutenberg contributors have been tackling this for quite a while. You can follow along on these issues on GitHub, chime in and test.
- Responsive blocks & intrinsic web design
- Add a Style Engine to manage rendering block styles.
- Typography Tools: Tracking tools
Developing Themes for Gutenberg
Justin Tadlock discovered a New Plugin for Writing WordPress Theme JSON Files via YAML by Sascha Paukner, a web developer from Berlin, Germany. In his article, Tadlock walks you through on how to use the Theme YAML plugin. For some developers YAML is an easier format than JSON.
It seems the feature of configuring the block editor via the theme.json file sparks great creativity for tooling. If you are searching for other tools check out this list:
- David Dwyer’s ThemeGen.app with a browser interface to select all the desired options and generate your theme.json file.
- Carolina Nymark’s Block Theme Generator
You also might be interested in our post How to disable theme features and Lock Block Templates for Full-Site Editing in WordPress
Misha Rudrastyh shared their insight on Learning Full Site Editing with Kubrick Block Theme. Riad Benguella rebuilt the long-time default theme as block theme. Rudrastyh’s walk explains how the pieces fit together.
David Dwyer published a demo plugin how he was able to integrate the create-block script with Tailwind CSS. Say hello to ‘Tailwind Blocks’. The plugin started its existence with the recommended @wordpress/create-block script and auto enqueues all JS and CSS (including Tailwind styles).
In this week’s Twitch stream, Ryan Welcher invited his follower “Let’s add Tailwind CSS to our custom blocks and create a create-block template for it.”
Nyasha Green of MasterWP posted an interview with Anne McCarthy on WordPressâs coolest new project: the Museum of Block Art. Green wrote about her response to the museum: “Speaking for myself the best thing about this project is that it reminds us that we are artists. Even those us of who are not designers, or the best at Front End work. We still create masterpieces in the form of code, websites, apps, etc. I think you have created that link that makes us go to ourselves, âHey we are making art!â And I for one am very grateful for it. “
Are you interested in Automating your Gutenberg Block development? The next Buddy.works webinar will take place on March 23 at 17:00 PM UTC / 1 pm Eastern / 10am PT.
With Grzegorz Ziolkowski, Open Sourcerer @ Automattic and Maciek Palmowski, WordPress Ambassador @ Buddy.
You will learn
- How to start WordPress block development
- How to leverage JavaScript developer tools for WordPress plugin and block development
- How to automate your development workflow to maximize confidence in the codebase and monitor its health
- How to configure a pipeline in Buddy to automate the development process
WordPress Social Learning Events
If you are a developer working with code, the Gutenberg Developer Hours are for you. The next event will take place March 22nd, 2022 16:00 UTC / noon ET.
March 22, 2022, at 3 am ET / 19:00 UTC
Intro to Theme Blocks with Wes Theron
March 23, 2022, at 1pm ET / 17:00 UTC
Builder Basics: Exploring Block Layout, Alignment, Dimensions, and Spacing with Nick Diego
March 25, 2022, at 11 am EDT / 15:00 UTC
Block Theme Discussions: Custom Fonts with Daisy Olson
March 28, 2022, at 11 am ET / 15:00 UTC
Hello Blocks! Coding a custom block with Wes Theron and Ryan Welcher
March 29, 2022, at 3 pm ET / 20:00 UTC
Beginnerâs Guide to Full Site Editing with Sarah Snow
April 1, 2022, 11 am EDT / 15:00 UTC
Block Theme Discussions: JSON Schema with Daisy Olsen
April 6, 2022, 2pm EDT / 18:00 UTC
Builder Basics: Designing with Columns, Group, and Row Blocks (Part 2) with Nick Diego
April 8, 2022, 11 am EDT / 15:00 UTC
Block Theme Discussions: Supports in theme.json with Daisy Olsen
April 12, 2022 2pm EDT 18:00 UTC
Builder Basics: Headers and Footers in Full Site Editing w/ Nick Diego
April 15, 2022, 11 am EDT / 15:00 UTC
Block Theme Discussions: Presets in theme.json with Daisy Olsen
April 19, 2022 2pm EDT / 18:00 UTC
Builder Basics: Exploring Block Layout, Alignment, and Dimensions (Part 2)
Featured image: DC Metro-ChinaTown platform by Sara Marcondes found on the WordPress photos directory
