Learn how to use Template Part and Query Loop patterns to provide users with more design options.
We’ve been bundling block patterns with all of our themes for quite a while now, but recent improvements to the Template Part and Query Loop blocks has opened up a whole new world for how patterns can be used.
Both blocks can now display a carousel of block patterns in their setup state, allowing users to choose between a menu of pre-designed versions of these blocks. These patterns can be bundled with your theme, so that users have a wide range of pre-designed header, query, and footer options available to choose from in the Site Editor:
The only difference between these and other patterns you’d build is that they include a special blockTypes property to let Gutenberg know which block to associate them with. Here’s a simplified example:
The markup above specifies that this pattern should be surfaced for a Header template part block. The value there would core/template-part/footer or core/query if you were designing a pattern for those blocks instead. (This property also powers pattern transforms, but that’s a topic for another time).
Once you register a pattern that way, it will show up in the carousel for the specified block. It’s as simple as that!
There are already a few Query Loop patterns bundled with Core today that use this method, and the header patterns shown in the video above are actually from a Gutenberg PR I’m working on as well. I’ve prepared a quick code example using our in-progress Quadrat theme to show how they could be bundled — we definitely plan on including a handful of these sorts of patterns in our block themes moving forward.
When combined together, Header, Query Loop, and Footer patterns allow you to mix-and-match pre-designed sections to create your entire website. I’m truly excited to see not only how themes use this feature, but how the Pattern Directory might provide hundreds more options for these blocks. This feels groundbreaking for WordPress, and I can’t wait to see how it turns out.
Block patterns are unique, predefined combinations of blocks you can use and tweak to create stunningly designed sections of your website.
From global styles, to entirely block-based themes, the WordPress block editor is aiming high. Amongst the newest experimental features are block patterns. Block patterns are unique, predefined combinations of blocks you can use and tweak to create stunningly designed sections of your website.
The possibilities for block patterns are extremely exciting, especially for those of us providing tools to help people create their own websites. Patterns start to tackle the user question of, “How do I make my website look like this theme demo?”
By providing our users with predefined portions of layout, they can build and customize their own unique pages with a click — no coding or advanced block building knowledge required.
The Patterns API
Gutenberg 7.8 introduced a new, experimental API we can now use to register custom block patterns:
The API really only contains two things: a name for your pattern, and the raw HTML output that you can copy and paste from the Code editor view. This means you can design your patterns straight in the editor, no coding knowledge required.
When you add a new pattern to your theme, it shows up in a new sidebar in the editor, along with any other pattern you might have installed:
Note: The new Block Pattern sidebar is a temporary proof-of-concept and is subject to change.
Using this API, we can start to introduce block patterns into our themes.
Adding Block Patterns to Twenty Twenty
Let’s take a look at adding a block pattern to the Twenty Twenty theme.
The Twenty Twenty demo site showcases content that highlights the strengths of the theme. We can grab some of that content, and make it into a pattern that can be included with the theme. Now, rather than trying to replicate the site demo by hand, people using Twenty Twenty can insert the pattern directly into their own sites.
On the homepage, one of the sections that catches my eye is the exhibitions list, which is a mix of images and text displayed in a grid. Not only does it look great, the combination of content is generic enough to be used for many different purposes, making it an ideal pattern to abstract out for reuse.
Let’s break this content down into its basic blocks:
The Columns block here acts as a wrapper for the exhibitions content, and provides a structure for it to collapse down into one column on smaller screens.
The single Columns block is the smallest atomic unit we can include to make this a complete pattern. Even if the demo shows multiple rows of exhibitions, we’ll stick to just this single row of two items. If someone wanted to add a bunch of exhibitions on their own website, they could reuse this pattern multiple times.
In order to convert this into a block pattern, we’ll need to grab the HTML output from the block in the Code view of the editor:
We need to copy this HTML, escape it, and add it to a register_pattern function inside of Twenty Twenty’s functions.php file.
(I’ve used onlinestringtools.com to escape the raw html output, but there are also code editor tools that can do this.)
You can add any number of patterns to your theme, and even unregister core patterns if you only want your patterns to be available to people using your theme. Create some great patterns that show off just what your theme is capable of! The only limitation is your imagination.
Have you added patterns to your theme already? Tell us about it 👇