Reusable Blocks and Patterns

Two of the features that make the WordPress block editor a thing of niceness. They save time and prevent inconsistent formatting in the content of your pages and posts. But how and where are they best used?

Reusable Blocks

A reusable block is an element you can create on the fly while editing a page. It lets you name and save a block to repeat it elsewhere. For instance, I have a reusable block to insert my subscription form within the text of a post. A few keystrokes can insert this wherever — it works with either the “insert block” control or the forward-slash shortcut for selecting a block type.

This is convenient and time-saving. The greatest strength of reusable blocks is that I can edit the contents of the block and when I save the post, the block updates everywhere it’s been used previously. This is also its greatest weakness, because that makes it too easy to accidentally change the block everywhere.

To create a reusable block, it has to be a single block. So if there are multiple paragraphs, for instance, create a Group block and put them in it. Then look for the “Add to Reusable blocks” choice on the block’s toolbar.

While editing a page, there’s an option under the “…” menu at the upper right to “manage reusable blocks”. Save any changes first, because this navigates away from the editing screen. Yes, this is stupid.

To change just one occurrence of the reusable block, insert it into your post first convert it to regular blocks, creating a copy.

Generally, though, I don’t do that. I insert the reusable block and leave it connected. For something I’ll need to customize each time I use it, it’s better to use a pattern.

Block Patterns

This seems to be a little-known feature. Like the reusable block, a WordPress block pattern is a predefined block you can use anywhere, but it doesn’t remain connected to the other copies. You insert and then customize it. Generally it’s some kind of container, with a place to add images and text, but it can be whatever you want.

This gives a quick way to insert formatting elements that match you site design. For instance, if you’ve created an emphasis box with special styling, you can make that a block pattern and…

It’s not as easy to create block patterns as it is to create reusable blocks. The capability to use them is built in to the base WordPress code, but to create them you need a plugin. I use Blockmeister by BlockMeister, but I have no reason to think it’s the best — it was just the first one I tried and it works fine. Search the plugin directory for “block pattern” and choose one that gets good reviews and is updated recently, so you know it’s still being maintained.

The plugin should add a dashboard screen for block patterns. Create one much the same way you’d create a page. It has a title — to search for to insert into a post — and contents, which is what gets inserted.

To insert the pattern while editing, the “forward slash” shortcut unfortunately does not work. You have to browse all block types and search for it. Click a “+” button to insert a block, and click Browse. Or use the blue “+” at the top left of the editing screen.

Then search for the pattern by name.

Using patterns effectively

Your pattern might employ a container block that has enough settings on it to get the appearance you want. Block collections such as Genesis Blocks include a variety of containers and columns and the like with more settings than the default “core” blocks.

However, if you know enough CSS to be dangerous, this ability also combines nicely with patterns. When you know how, it’s often easier to write a simple CSS rule in Customize and reference that class name in your pattern.

The down side to that is, the editor doesn’t apply custom CSS rules while you edit, so you can’t see that formatting until you preview. That’s why I like to use a combined approach to at least highlight the text in the editor in some reasonable way.

Let’s look at my “Callout” pattern as an example. I used Customize to add a CSS rule for the “callout” class defining rounded corners and dotted border. The editor won’t show those, but whatever properties are supported in the editor, I use those properties because I can see them while editing. In this case I used the built-in background color property to at least highlight the emphasized text with color. That’s enough so I can tell which text has special formatting. For everything else I can use the CSS rule.

There’s a lot going on in this screenshot — click to enlarge it. This is a screen from the Blockmeister pattern editor. The list view is open to show the structure of the contents on the left — a Paragraph contained in a Group block. I used the properties of the Group block (on the right) to set its background color. That shows in the editing area in the middle as just a colored rectangle under the text. Also in the properties of the Group block, I applied a CSS class name, “callout”, to the block. Here’s the rule I’m referencing:

div.callout {
    padding: 7px;
    border: 2px dotted #345890;
    border-radius: 9px;
    background-color: #FBE6A8;
}

Whether you write your own CSS or use a more capable container than the built-in Group block, the pattern is a time saver. I don’t need to remember the class name or refer to a list of a gazillion settings to insert a consistently formatted section of blockage anytime I need it.

Another nice thing to bear in mind is, if your pattern includes media, you don’t have to specify which media when you design the pattern. Insert an Image block and set its properties (border, rounded corners, …) then save the pattern without specifying which image. The person editing the page will see the controls to upload or select from media library — or they can delete the Image block if they don’t need it.