So you want to make block patterns?

If you’ve ever built something for the WordPress block editor — a theme or a plugin — you may have also heard about block patterns.

Looking at the patterns that come bundled with WordPress, I thought it would be nice to dedicate to them a short post. They’re pretty nice, useful shortcuts when you know them, but there’s a good chance you may not know what they are or why you might want to use them.

What’s a block pattern?

Patterns are collections of pre-arranged blocks that can be combined and arranged in many ways making it easier to create beautiful content. They act as a head-start, leaving you to plug and play with your content as you see fit and be as simple as single blocks or as complex as a full-page layout.

They live in a tab in the block library. You can click or drag and you’re able to preview them with your site’s styles.

Basically, a block pattern is just a bunch of blocks put together in advance:

	<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->

That’s also how you create them: just use the block editor to configure a smattering of blocks to your liking, and the hard part’s over.

How do I get them in the block library?

There’s more documentation in the handbook, but what it boils down to is this:

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

👆 That’s a snippet of PHP, which means you can drop it in a WordPress plugin, or perhaps more simply, paste it into the functions.php file from your theme. Done:

For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.

Now what?

The thing about a block pattern is, as soon as you insert it from the block library, it stops being a cohesive unit — now it’s just a smattering of blocks, detached from the pattern you created and meant to be customized to your liking. It’s a shortcut, not a template. That also means you don’t have to worry about switching themes or deactivating pattern plugins: the blocks you already inserted won’t go anywhere.

That being said, if you like this one pattern so much you want to use it again and again, with no customization at all, you can make it into a reusable block:

Reusable blocks are created, as the name implies, to be reused. The feature is a great way to store small bits of commonly used snippets that you can edit in one place to update in all. “Follow me on Twitter,” “Article series, or “Subscribe to my podcast” are great examples of that.

What makes a good block pattern?

Patterns, as they ship today, are limited by the features available. If the block editor doesn’t allow you to customize letter-spacing, your block pattern can’t either. While the Global Styles project will expand what’s to blocks, in the meantime, we have to work with the available tools.

Even then, with the most basic ingredients — color, photography, typography — it is possible to do a lot:

Three columns with images and text
Media and text with image on the right

I designed these patterns to potentially land in WordPress core, which all have a few properties in common:

They share a theme.

You can think of a pattern as a section of a website: it is meant to be part of a whole, and so it works best when it can exist in the context of other patterns that share the same theme. There are a few sharing a Nature theme in the patterns above, a few sharing an Art theme, and others sharing an Architecture theme. When seen together, it becomes easier to see how you might be able to piece together multiple pages of your site, one page at a time.

They share a minimalist color palette.

By being parts of a whole, patterns will inevitably land in a context that uses different colors. With a reduced color palette, there’s both a better chance of fitting in and less to customize to make it just right.

The best patterns do things you might have not done otherwise.

Whether that’s images offset to create a unique silhouette, or just using less visible features (like fixed positioning in the Cover block), it’s a way to surface creativity.

Tip: You can use any block in your patterns, including blocks that came from a plugin. And if that block is in the block directory, it will prompt you to install it with one click if it’s missing from your self-hosted WordPress:

Here’s a plugin for you

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

In case you want to make patterns, this example plugin features two of the patterns you saw above. Drop it in your plugins folder and they should show up in your block library.

Installed pattern under “Text” Category

Feel free to tweak it, customize it, and make it yours. It’s GPL, after all!


Thank you @joen for the help writing this post.

Did You Know About Reusable Blocks?

Created by Joen Asmussen, @joen

The WordPress block editor (a.k.a. Gutenberg) comes with a feature called “reusable blocks.” They are blocks, saved for later, edited in one place.

Have you ever wanted to:

  • Re-use the same snippet of text across posts and pages?
  • Save complex layouts to spare you having to copy/paste from one post to another?

Reusable blocks can do these things.

Like templates, you mean?

Not quite. Think of reusable blocks as snippets of globally synchronized content that are personal to you. You can edit all your reusable blocks in one place, and any post or page you inserted that block into, get the updated version as well. 

Where you might use templates to structure your website, you can use reusable blocks to structure your content. For example:

  • A testimonial on your homepage and your product page.
  • A “this post is part of a series” box that you insert part-way through your article.
  • A “Follow me on social media” section you can weave into the prose of your popular article.
  • Complex but static blocks, such as a “Subscribe to my newsletter” box, a contact form, a survey, quiz, or polls.

Key properties are that reusable blocks are unbeatable when you want to reuse a snippet of content, edit it in one place, and have the changes propagate to every instance.

Show me how

To create a reusable block, open the block editor and create the content you want to reuse:

Now select the content you want to turn into a reusable block, then click the three-dot “More” menu and choose “Add to Reusable blocks.”

Voilà, you’ve now created a reusable block. From now on, you can find this block, and any other you create, in the “Reusable blocks” tab in the block library:

This is also where you can insert the newly created block on any of your posts or pages.

Where do I edit my existing reusable blocks?

To edit a reusable block, select it and make your edits. When you make an edit, the Publish button will have a little dot indicator:

This dot indicates you’ve made a global change that potentially affects posts beyond just the one you’re editing, the same as when you’re editing templates. This lets you confirm the change was intentional.

Another way to edit your reusable blocks is to click the global three-dot “More” menu and selecting “Manage all reusable blocks”:

This takes you to a section letting you edit, rename, export, or delete every reusable block you created. 

What else can I do?

Here are a couple of tips and tricks you can leverage to get the most out of reusable blocks.

Give them a good name

When you name a reusable block, you are essentially choosing your search terms, as the name is what you search for in the block library (or when you use the “slash command,” typing / in an empty paragraph):

Avoid names such as “Gallery” or “Image,” as that’ll be annoying when you just want to insert one of those. You can avoid that with a unique name, such as “My author biography.”

Insert in the best place of your content flow

One obvious benefit of reusable blocks is that they are just blocks, just like everything else in the block editor. That means you can insert it anywhere in your content. You might want your rich author biography to sit at the top or bottom of the post, but This post is part of a series box that might sit well two or three paragraphs not to disrupt the reading flow.

A design shortcut

Maybe you created a complex layout you’re happy with, a call to action with the right image and buttons, and it took a while to get it just right. Go on and save it as a reusable block: even if you mean to insert it only to convert it to a regular block, it might still save you a minute. 

To convert a reusable block to regular (blocks, select it and click the “Convert to regular blocks”:

Design by Beatriz Fialho.

Tip: You can also find some nice patterns on Gutenberg Hub or ShareABlock.

Take it with you

Need to move to another site? You can both export and import reusable blocks. Go to the Manage all reusable blocks section from the global three-dot “More” menu, hover over the block you want to export, and click “Export as JSON”:

The downloaded file can be imported on any WordPress 5.0 or newer website.

Try it

Create a draft post and play around with Reusable Blocks to see how you might start using them. You can always delete them when you’re done playing.

You can test importing and using a small reusable block I created as an example. It’s a “Further reading” block that shows the four latest posts from the category “Featured”:

It might work well as a highlight in an article, giving the reader something new to read or awareness of your other content.

The videos in this post show the reusable blocks flow in the upcoming WordPress 5.7.

Download the block from this gist, import it to your WordPress site, then customize to make it yours.