WordPress Block Patterns: What Are They? And How to Use Them

WordPress block patterns enable you to add pre-made designs to your posts and pages. Therefore, they’re a great way to quickly help your site look more professional. Like any unfamiliar feature, however, they may seem challenging to use at first glance.

Fortunately, this tool is simple to learn and use. With just a little practice, you can become a block patterns expert. You’ll know how to use existing patterns, find additional designs, and even create your own block patterns in the WordPress Block Editor or Site Editor. 😎

In this post, we’ll take a closer look at WordPress block patterns. Then we’ll show you how to use them on your website. Let’s get started!

📚 Table of contents:

What are WordPress block patterns
How to use WordPress block patterns
How to find more WordPress block patterns
How to create your own WordPress block patterns

What are WordPress block patterns? 🤷‍♂️

The WordPress Block Editor enables you to create posts and pages using pre-built elements called blocks. In turn, the Site Editor (formerly known as full-site editing) lets you use blocks to create template parts like headers and footers.

However, you might be in a hurry to create your layouts. In addition, if you lack design skills, it can still be difficult to achieve a professional-looking design by yourself.

In these scenarios, you can use WordPress block patterns to simplify your work. By default, WordPress comes with a collection of pre-made layouts that are accessible through the Block Editor (or the Site Editor):

Here, you’ll find patterns such as calls-to-action and header layouts, which you can easily customize using the block settings.

Many themes provide their own block patterns, so you may have access to additional options. You can also find more block patterns through WordPress.org, and even create your own designs.

Block patterns come in two types:

Synced patterns (formerly reusable blocks) – these are patterns that are the same in each post. If you edit the synced pattern in one spot, that change will automatically apply to every piece of content where you’ve included it. You can also think of them as “global” patterns, which is the terminology that some other plugins use.
Unsynced patterns – these are patterns that you want to be unique in each post. If you edit an unsynced pattern, it doesn’t have any effect on other places where you’ve used it.

Again, synced patterns used to be known as reusable blocks. However, WordPress has now ditched the separate terminology and only calls them synced and unsynced patterns.

How to use WordPress block patterns 🧑‍💻

As we mentioned earlier, WordPress provides access to a collection of block patterns that you can access through the editor. Your WordPress theme may also offer its own designs.

It’s important to note that you can use WordPress block patterns with both classic themes and block themes.

Whatever theme you’re using, in order to access WordPress block patterns, open the page or post where you want to create a new layout. Then click on the Toggle Block Inserter button in the top-left corner of the screen, and switch to Patterns.

There you can view all available patterns, which are organized into different categories. For instance, if you want to display lots of images, you might want to use a gallery block pattern:

Meanwhile, you can insert pre-made headers or create an attention-grabbing featured section. Alternatively, click on Explore all patterns to see large previews of the designs:

Once you find a pattern you like, all you have to do is click on the design to add it to your layout. Then you can customize the pattern using the block settings.

How to customize WordPress block patterns

When you insert a block pattern, it is made up of multiple individual blocks. So if you want to make changes, simply click on any block within the layout to customize its content.

If you’re familiar with editing WordPress blocks, the process is much the same. For example, if a header pattern contains a cover block, you can use the block settings to apply a background image or change the cover color:

If the block settings don’t immediately open when you add the pattern to your page, just click on the Settings icon in the top-right corner.

You can also delete a block from the pattern. Make sure you select only the relevant block, then click on the three-dots icon in the toolbar and select Remove (block):

If you want to remove the entire block pattern, make sure you’ve highlighted the whole thing. Then select Remove Group.

How to find more WordPress block patterns 🔎

While you can access default WordPress block patterns (and any provided by your theme) through the editor, you might require more options. If so, you can find additional choices in the WordPress.org Pattern Directory:

There, you can view a huge library of extra designs to add to your layout. Again, the patterns are organized into categories, which you can switch between using tabs.

You can also search for specific templates or filter the results. If you change the Curated drop-down menu to “Community”, you’re able to browse patterns that have been submitted by members of the broader WordPress community.

When you find a block pattern that you want to use on your site, hover over the design and click on Copy:

Then return to your WordPress site and open the post or page where you want to include the design. Right-click within the editor, and select Paste.

How to create your own WordPress block patterns (two options) 🖱️

In the section above, we showed you how to find block patterns that have been submitted by other WordPress users. You can also create your own WordPress block patterns, either for your use or to share with the community (or both!).

Creating block patterns on your site using the Block Editor or Site Editor

The easiest way to create a block pattern is via the Block Editor or the Site Editor.

The basic process is the same via either editor. We’ll show you how it works in the Site Editor, but you can follow the exact same steps in the regular Block Editor (which also lets you create block patterns in themes that don’t support the Site Editor).

To get started, open your preferred editor and build your custom layout using blocks. Once you’re happy with the design…

Select all of the blocks that you want to include in the pattern. It could be a single block or multiple ones.
Click on the three-dots icon in the toolbar.
Select Create pattern/reusable block:

Now, give your pattern a name and determine whether it will be a synced pattern or not:

Again, synced patterns used to be known as reusable blocks. This means that each time you edit the pattern, the changes will be applied to every post or page where you’ve added it.

However, if you choose not to sync, you’ll create a standard WordPress block pattern. Changes you make will only apply to the specific pattern you’re editing, and won’t affect any other instances on your website.

Next, click on Create. If you want to insert or edit a pattern, you’ll find it under My Patterns in the Patterns section in the Site Editor, or the pattern inserter in the Block Editor.

Here, you can preview patterns and check the syncing status. You can also launch the pattern editor to start working on your designs, just as described above.

Creating and sharing block patterns via the Pattern Directory

To build a pattern to share with other WordPress users, first visit the WordPress Pattern Directory. Make sure you’re logged into WordPress, otherwise you won’t be able to save your pattern. If you don’t have an account, you’ll need to create one at this stage.

Then, click on Create a new pattern:

This will lead you to the Block Pattern Editor. All you have to do is use the available blocks to create your pattern.

Alongside blocks, you can access royalty-free images when you use a media block such as a cover or a gallery:

Once you’ve completed your design, you can either save the pattern as a draft or submit it to the Pattern Directory. It’s a good idea to read through the Pattern Directory guidelines before you submit your creation.

If you’re saving the design as a draft, first switch to the pattern settings to give it a title, description, and category:

After you’ve created at least one block pattern, you can manage your designs through the My Patterns link:

Here, you can view all the layouts that you’ve shared or marked as favorites. Plus, you can access your draft patterns.

If you only want to create patterns to use on your own website, you can leave them as drafts. Then copy and paste the pattern into your WordPress post or page, just as we did in the section above.

How to create and register block patterns manually

If you’re a more experienced user, you might prefer to create and register blocks using code. While you can edit your theme’s functions.php file directly, this can be risky. In most cases, it’s better to use a plugin like WPCode.

Once you’ve installed and activated the plugin, open a page or post and create your custom layout using blocks. Click on the Options icon, and switch from Visual editor to Code editor:

Highlight all of the code on the page, right-click, and select Copy:

You can paste this code into any plain text editor (such as Notepad) to store it for the next step.

To register your WordPress block pattern, you’ll need to add code to your custom snippets plugin. So, head to Code Snippets → Add Snippets in your dashboard.

Hover over Add Your Custom Code (New Snippet) and select Use snippet:

Give your snippet a memorable title, and use the Code Type drop-down menu to select PHP Snippet. Then paste the following code into the Code Preview section:

register_block_pattern(
‘my-plugin/first-block-pattern’,
array(
‘title’ => __( ‘title of the pattern’, ‘my-plugin’ ),
‘description’ => _x( ‘description of the pattern’, ‘Block pattern description’, ‘my-plugin’ ),
‘content’ => “block content goes here”,
)
);
}
add_action( ‘init’, ‘my_plugin_register_my_patterns’ );

This code registers a block pattern named “my-plugin/first-block-pattern“. Naturally, you can change the title and description values to reflect your own pattern. You’ll also need to add your own block content in the “content” line, using the code you copied earlier.

In the Insertion section of the plugin, make sure Auto Insert is selected. Meanwhile, keep the Location set to Run Everywhere. Then, use the toggle to activate the snippet and click on Update:

🤩 Now you should be able to access your newly-created block pattern from the editor.

Get started with WordPress block patterns today 🏁

You can access block patterns straight through the editor, and customize their designs using the block settings. Plus, you can find additional patterns in the WordPress Pattern Directory. If you like, you can even create your own patterns in the directory, use the Block Editor or Site Editor to build them, or register patterns using code.

For some other ways to level up your block skills, you also might be interested in our Block Editor tutorial or our roundup of the best block plugins.

Do you have any other questions about how to use WordPress block patterns? Let us know in the comments below!