Using Block Patterns as content templates

Block patterns are great, one of the features I'm most excited for in WordPress. As block patterns mature and people adopt, they will be one of the best ways to share designs and templates. I'm looking forward to a rich repository to pull design ideas, the pattern directory is already filling up.

Block patterns aren't just for design though, they can also be used as a content templating system. Recently, I was listening to the Write the Docs podcast about Documentation templates and was thinking that it would be nice to use patterns for these templates.

Right now, it requires a bit of code to create and load patterns on a site, usually through a plugin or theme. This makes it harder for content creators to use, however using a custom post type there is an easier way.

If you're here just for the easier way jump to the bottom, if you want to learn a little more about patterns continue on.

What is a block pattern?

A block pattern is one or more blocks combined together. A pattern is registered as a special type using the register_block_pattern() function and shows in the UI as a tab in the inserter.

The WordPress News blog published a great introduction to block patterns article that explains patterns in more detail with examples.

To highlight what a block pattern is, and how they are registered. Here is a sample block pattern of an Outage Template:

<!-- wp:heading -->
<h2>Summary</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>What happened?</p>
<!-- /wp:paragraph -->
 
<!-- wp:heading -->
<h2>Timeline</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>When did it happen?</p>
<!-- /wp:paragraph -->
 
<!-- wp:heading -->
<h2>Impact</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>Who was effected?</p>
<!-- /wp:paragraph -->
 
<!-- wp:heading -->
<h2>Process</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>Why did this happen?</p>
<!-- /wp:paragraph -->
 
<!-- wp:heading -->
<h2>Improvement</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>What we are doing to prevent happening again</p>
<!-- /wp:paragraph -->

Here is how you would register a pattern in a plugin or theme:

register_block_pattern(
	'mkaz/outage-template-pattern',
	array(
		'title'       => 'Outage Template',
		'categories'  => array( 'text' ),
		'content'     => '...BLOCK HTML...',
	)
);

To learn more about building block patterns for plugins or themes, see Rich Tabor's How to Build Block Patterns post, or Daisy Olsen's Registering Block Patterns video introduction.

Block patterns vs. Resuable blocks

Reusable blocks are another type of content in the block editor that allows (as the name says) reuse of blocks. You can create and insert reusable blocks from within the editor, so it does not require code or a plugin. This is close to the content template idea.

Yet, there is a slight difference between a reusable block and a block pattern. When updating a reusable block, all instances of it are updated. A block pattern is a copy, each use is it's own and modified individually.

The reusable block is great for content like a business address, or a promotion. You can update once and everywhere it is used on the site is updated.

Now, it is possible to "convert to blocks" after inserting a reusable block. This makes a copy and behaves like a pattern, but requires the user to take an extra step. If done incorrectly, it can have side effects to other content on the site. This places a burden on the author to always do the right thing.

An Easier Way to use Patterns as Templates

There is an easier way to enable authors to create patterns without using code. You can use a custom post type to hold our patterns. This enables using the editor to create new patterns. Once created the plugin loops through them to register them as block patterns.

I created a plugin called Templets that demonstrates this method. It registers a new custom post type, and loops through them, and registers as patterns.

This allows you to create and edit patterns in a stand-alone way. An author can create their own patterns without needing to code. You can see an example in this video:

Feel free to use or modify to fit your needs. You can grab the Templets plugin from the WordPress repository or view the code on GitHub at https://github.com/mkaz/templets — it is a single file and relatively straightforward to follow.

Props to John Godley who originated the idea for our internal P2.