Introduced to WordPress writers, theme developers and implementers in WordPress 5.5 release, Block Patterns, tested in the Gutenberg plugins since its 7.7 version, came to all WordPress sites. They open the door to be creative with blocks and make creative layouts available for content creators and site editors without using more than the core blocks.
Here is your resource list to explore creating small or big block patterns and how to make them available in your themes or plugins.
Table of Contents
- WordPress Block Patterns Change the Future of Page Building
- From Zero to Hero: How to Create Block Patterns
- Block Patterns in the Wild
- Themes using Block Patterns
- Official Documentation
WordPress Block Patterns Change the Future of Page Building
Justin Tadlock, author, theme developer and writer at the WPTavern, wrote about the vision of block patterns in his article Block Patterns Will Change Everything. “From the average user’s point of view, block patterns are predefined sections they can use to create layouts. These layouts can be something as simple as the book section from earlier in this article to the more complex pricing columns. With these patterns available, users will be able to create complex layouts at the click of a butto,” and later, “The user sees something they want to use. They click on that pattern. It gets inserted into the post.”
Rich Tabor, now senior product manager, WordPress Experience at GoDaddy, was one of the first theme developers to build blocks; he eventually sold his plugin Co-Blocks and Theme shop to GoDaddy. From his personal blog article “Gutenberg Block Patterns: The Future of Page Building in WordPress”, Rich Tabor views WordPress block patterns in the context of proprietary web builders like Wix & Squarespace and how WordPress theme developers are now empowered to create similar page layout sections with Block Patterns.
“The idea around patterns is that themes and plugins may easily add beautiful pre-built block “sections” to the editor. So instead of having to add each block of a complex layout one by one, you’ll have direct access to any available patterns within the Block Library. “Rich Tabor “Gutenberg Block Patterns: The Future of Page Building in WordPress”
In her talk at the WPBlockTalk conference, Mel Choyce-Dwan, product designer at Automattic and WordPress contributor, gave an overview of all the blocks available within the block editor, and then she shows you how to take those primary building blocks and combine them to creative and unique layouts. It will feed your imagination.
From Zero to Hero: How to Create Block Patterns
Mel also published a step-by-step tutorial on how to create a simple block pattern, “from Zero to Hero style.” This should get you started in no time.
On the ThemeShaper blog, Mel Choyce-Dwan also published “Adding Block Patterns to Your Theme.”
Rich Tabor published an in-depth tutorial on “How to Build Block Patterns for the WordPress Block Editor.” He also invented a new verb “blocking a pattern.” 😁
Caroline Nymark is a long-time contributor on the WordPress Themes team and instructor on fullsiteedting.com. In her course, she teaches how to build block-based themes for WordPress. The course is free until January 2021. Two of the lessons are about Block Patterns. Introduction to block patterns goes over all the details of the register_block_pattern function, including making them translation ready and tips for styling. In Block patterns tips and resources, Carolina shares debugging tips as well as themes with block patterns, plugins and example code.
Eileen Violini, contributor on the core-editor, design and theme teams, covered Block Patterns as part of her “Theme of the Future” presentation at WordCamp Kent 2020 (recording on WordPress.tv)
Erik Karkovack, in his post How to Create a Simple Gutenberg Block Pattern in WordPress, walks you through the process of creating an elaborate block pattern, almost a page template, with cover image, columns, separator and paragraph.
WordPress Block Patterns: The Ultimate Guide by Kristin Wright of iThemes covers a lot of ground about Block Patterns, how to create them and how to use them
Block Patterns in the Wild
After the release of Block Patterns and the new Block Directory in WordPress 5.5, Justin Tadlock reviews some block patterns available in his post: “Exploring the First Block Patterns to Land in the WordPress Theme Directory.”
Munir Kamal started a Template library at Gutenberg Hub. You can browse hundreds of templates, and when you find one you like, copy/paste the code and CSS, and you can import it to your site, thanks to the plugin Editor Plus. Justin Tadlock introduces it in his article: Gutenberg Hub Launches Online Block Template Builder.
On Jeffrey Carandang’s “Share-a-Block” site, folks around the community share also their Block Patterns – at the moment 27 total for download. Find interesting Call to Actions, Feature list, profile sections or interesting Hero blocks variations. A download link will be sent to your email, together with a link to the instructions on how to add it to your site. TL;DR. You will need the EditorsKit plugin.
How to Create Block Patterns if you are not a Developer?
Justin Tadlock channeled his enthusiasm for the Block Patterns in a plugin he introduced in his article: Create Custom Patterns with the Block Pattern Builder Plugin. In short, a site owner can create reusable patterns with this plugin and make them available for the editors on the site, without touching any code. “Once you publish a pattern, it will be available within the pattern library,” Justin wrote in the plugin description.
Mac Gyvercy, developer at Artbees, showed in his article “Gutenberg Block Patterns: Next Awesome Gutenberg Feature” a slightly different variation on how to create your block patterns. He suggested using the Code Snippets plugin to immediately add it to the site.
Benny Vluggen published a plugin for creating Block Patterns without code: the “Block Pattern Builder” by Blockmeister, which adds a menu item “Add to Block Patterns” to the “More Options” menu in the Block Toolbar. It also provides a separate WP Admin screen for Block Patterns, so you can edit them and add categories. Features I would love to see considered for the Gutenberg plugins and later in Core.
GoDaddy just released Co-Blocks 2.3.0. Plugin. “We sought to make the process of creating and reusing design patterns across a website simple without the need to write any code. This is our solution: Build out a section with blocks with all the fine details, select the blocks, and click “Add Design Pattern” to save.” posted JR Tashjian, Software Engineer at GoDaddy. You’ll be able to use it via the Inserter or export them to a new site.
Convert your Reusable Blocks to Block Patterns
Reusable Blocks, a feature built into WordPress since December 2018, allows you to store reusable content like a call to action, or a disclaimer of some sort, and place it on multiple pages. When you edit the content of the reusable block change the content, every page that included it is automatically updated as well. It was used by many content creators as a quasi-template that they converted to a regular block before using it in a new post.
JB’s plugin extends that functionality with better management screens and a live preview; it also allows you to convert Reusable Blocks to native Block Patterns. It decouples the content from the presentation. Sarah Gooding in her article “Convert Reusable Blocks to Block Patterns with 1-Click” wrote about it at the WPTavern.
Themes using Block Patterns
Seedlet was reviewed by Justin Tadlock 👋 at the WP Tavern. The other two themes, I found in the repository using the “Block Patterns” as keyword.
There might be others in the repository. Email me with the link and I include them email@example.com
- By Automattic in WordPress Theme Repository
- Announcement post: Seedlet: A New, Sophisticated Theme Fully Powered By the Block Editor
- Review: Exploring Seedlet, Automattic’s Block-First WordPress Theme (WPTavern)
By Carolina Nymark in WordPress Themes Repository
Inclusive is Carolina latest free theme. It is a fast, responsive and accessibility-ready theme with full support for the block editor. Also, available on GitHub
Recently, I switched my personal blog to the Inclusive theme and I enjoy working with it. Carolina also made great use of Block Styles for various core blocks.
By Uxl in WordPress Themes Repository
Justin Tadlock explored the idea that maybe block patterns could be the best way to approach to replace widgets. Block areas will replace Widget areas and normal blocks and block patterns can be added to any section of a website. “Addressing the Theme Design Problem With Gutenberg’s New Block-Based Widgets System” I can’t wait for Gutenberg 9.0 to be released with the updated design for the Widget Screen and bug fixes.
End User Documentation
On Learn.WordPress the training team published a short workshop “Introduction to Block Patterns.”
The WordPress.org Documentation team published “Block Patterns” — how to use block patterns for content creators.
On their Block Patterns page in the documentation for the Block API, the Gutenberg team published the bare-bones code examples. You can look up the syntax on how to register block patterns, how to unregister them, how to register and unregister Block Pattern Categories.
In the release notes for WordPress 5.5 Riad Benguella, lead developer for Gutenberg, also mentions how to remove the core-block patterns and replace them with your themes or plugins page and section layouts.
Theme Review Team
- The label for the category must use a translation function.
- Registering a custom category for block patterns is optional.
Do you have more questions? Did you build awesome block patterns yourself? Share them in a comment or email me to firstname.lastname@example.org
October 21st, 2020: Added a link to the iThemes Ultimate Guide to Block Patterns and to Redux, a plugin providing many page layouts and patterns.