WordPress Block Pattern 101: What Are They? And how to use them

Do you want to save time and create more professional designs in the WordPress block editor? If so, learning WordPress block patterns might be just what you need.

With block patterns, you can insert a ready-made design, customize it to your needs, and get started right away. This is a big time saver. And if you’re not a designer, block patterns are also helpful because they allow you to use more unique designs even if you don’t have the knowledge to create those designs from scratch.

In this post we will cover everything you need to know about WordPress block patterns:

What are WordPress block patterns?

WordPress block patterns are essentially just templates made up of blocks.

They can contain a single block or multiple blocks arranged in specific layouts. In addition to the blocks themselves, the block patterns also contain the settings for those blocks (B. Configuring a button with a specific color).

You can find block patterns for full-page templates. Or more commonly, you’ll find block patterns for specific sections that you might want to use on a page. You can then assemble multiple block patterns together like Legos to create your design.

Let’s say you want to create a section that contains an image background, some heading text, and a button. You can set this up manually using the block editor. But with a block pattern, you could insert a premade design with that layout and then just customize it to fit your content.

As I mentioned above, the main benefits of using WordPress block patterns are:

1. You save time.
2. They make it easier to create more complicated designs as you may not have the knowledge to create certain types of designs yourself.

Block pattern vs. reusable blocks

Now that you know what WordPress block patterns are, you might be thinking that they sound a lot like WordPress reusable blocks, which are a core feature introduced before block patterns.

A reusable block is also a collection of one or more blocks that you can easily insert into your content.

They are similar in that both allow you to quickly insert a pre-made design, but they have one major difference:

• Block patterns are a starting point for your design. You can use them to import the basic design you want to use, but you will customize them each time and each instance of a block pattern will be different.
• Reusable blocks will be the same in every single instance. Each instance of a reusable block is always the same, and if you update the design of the reusable block in one place, those changes are automatically applied to each instance of the reusable block.

Here’s an example of when you might use each:

First, let’s assume you have a special format for including quotes in your content. So when you include a quote, you want to use the exact same arrangement of blocks to keep things consistent.

If you want each quote to be different, you should use a block pattern for that. You can paste the block pattern to set up the basic formatting and then add the unique quote text.

Now let’s say you have a call to action (CTA) for people to join your email list that you want to include at the bottom of each blog post. You want that CTA to be exactly the same every time, and you want to be able to update it in the future.

For this use case, you want to use a reusable block. The reusable block ensures that every instance of your CTA is the same. And if you ever want to change the CTA, you only need to update the reusable block once, and those changes apply to every instance.

How to use WordPress block patterns

You can insert block patterns using the same interface you use to insert blocks.

First, open the editor for the content where you want to add a block pattern. Then click the plus Icon in the upper left corner to open the paste content interface.

In the sidebar that appears, click the Pattern Tab. You can then use the drop-down menu to filter out different types of patterns.

When you find a pattern you like, all you have to do is click on it to insert it into your content:

Once you’ve pasted the block pattern, you can edit each individual block as if you were creating the design manually:

And that’s it! If you want to add another block pattern, you can simply repeat the same process. The block pattern is inserted where you positioned your cursor in the editor.

How to find and use new WordPress block patterns

To help you find new block patterns, the WordPress team has created an official block pattern library at WordPress. You can Access it by clicking here.

You can use the filters to search all block patterns and click on a result to preview it. When you find a block pattern you like, just click on it copy pattern Button to copy the pattern to your clipboard:

Now open the editor for the content you want to add the block pattern to and paste it just like you would paste regular text – either right-click and select Paste or use a keyboard shortcut like Ctrl + V (or Command + V on the Mac).

And that’s it – you should see the full block pattern wherever you pasted it:

Besides the official block pattern library on WordPress.org, you can also find third-party directories like ShareABlock and the Gutenberg Hub template library (which uses the same copy/paste approach as the official library).

You can also find a number of plugins that will allow you to insert block patterns and templates, although they may use their own custom solution rather than using the native block pattern feature. Either way, the end result is the same. Check out our post on Gutenberg template plugins for some of the best options.

How to create your own WordPress block patterns without code

As of now, you can’t create your own block patterns using the core WordPress block editor unless you know how to code, which is a bit of a shame.

Luckily, as you would expect from WordPress, there are plugins that fix this.

My personal favorite is the free one by Justin Tadlock Block pattern generator plugin. Essentially, this plugin allows you to create your own design using the block editor and then save it as a block pattern. So you can design your pattern with the editor, save it as a pattern, and then just paste it like any other pattern.

To be honest, it’s a little odd that this feature isn’t included in the core WordPress software, but it’s not a big deal as you can solve it simply by installing a free plugin.

First, install and activate the free Block Pattern Builder plugin from WordPress.org. I’m using Justin Tadlock’s plugin mentioned above, but there is one Plugin of the same name from BlockMeister which seems to offer the same functionality with a little more features.

Then open the regular editor and create the design you want to save. Next, select all the blocks you want to include in your block pattern and click three points Symbol. Then select the option to Add to block patterns:

You can then give it a name:

And that’s it – you can now paste it like any other block pattern. By default, it’s in the Uncategorized section:

In addition to working with the editor, you also get a dedicated one block pattern Tab in your WordPress dashboard to manage and create block patterns.

Get started with block patterns today

Using block patterns is pretty easy – you paste them in like you would a block. And once you’ve inserted them, you can edit the blocks in the pattern as if you created the design yourself.

To give you more flexibility, there are a few ways to access new block patterns:

1. You can use the official block pattern library on WordPress.org or one of the third-party library websites. All you have to do is copy and paste between the libraries and the WordPress editor.
2. You can use any of the Gutenberg template plugins that we have collected. These plugins don’t all use the native block pattern feature, but they serve exactly the same purpose and function.
3. You can design your own block patterns using the editor and a plugin like Block Pattern Builder. Once you save your designs, you can easily reuse them in the future.

For more ways to improve your work in the Block Editor, check out our guide to getting the most out of the Block Editor and our collection of the best block plugins.