Understanding WordPress Block Patterns: What They Are and How to Use Them

First introduced in WordPress 5.5, block patterns have opened the way for the Gutenberg editor to be a full-scale page builder. They help users build complex WordPress websites with minimal time, effort, and technical expertise.

In this article, we’ll show you how WordPress block patterns work and how they differ from reusable blocks. You’ll also learn how to use patterns in the WordPress block editor to build a website from scratch easier.

An example is a call to action (CTA) block pattern from the Twenty Twenty theme. It contains the Heading, Paragraph, and Buttons blocks you can customize, from the background color to text size and alignment.

Block Patterns vs Reusable Blocks

Block patterns and reusable blocks enable users to insert a pre-made layout quickly. The main difference between these elements is what happens when you edit them.

Any changes made to a reusable block will apply to every blog post or page you’ve inserted it in. Meanwhile, the changes won’t affect previous pages or posts if you use a block pattern.

Let’s say you want to insert a CTA button in your posts. Consider using:

• Block pattern – to duplicate the basic design but personalize the CTA’s content for each post.
• Reusable block – to add exactly the same CTA for all posts. You’ll only need to edit the CTA block once to automatically update all instances.

Additionally, users can register block patterns in the Pattern directory or include them in a plugin or a theme. These pre-made patterns will give you more design options when creating post or page layouts.

Why Use WordPress Block Patterns

Once you start using block patterns, you’ll start noticing the following benefits.

Time-Efficient

There’s no need to create individual items or custom-code them repeatedly. WordPress users can directly access common pre-designed patterns for various purposes from the editor and apply them to their pages or posts.

If the default pattern doesn’t suit your taste, visit the Pattern library, or install a plugin or theme that offers multiple choices.

Professional Look

Take advantage of professional designers’ and developers’ skills by copying their patterns from the WordPress Pattern directory. There are hundreds of pre-made patterns you can use and combine without hiring a designer.

Reusability

Save patterns you regularly use, so you don’t have to recreate them every time. It’s possible to create and reuse the same pattern for different areas of a WordPress website, such as headers, footers, and sidebars. This open-source platform also lets you make categories to find patterns in the future quickly.

Customization

Unlike reusable blocks, using block patterns enable users to tweak the design or content however they like. This helps theme developers provide customizable sections instead of offering a whole demo site and confusing clients on how to redesign it.

WordPress Block Pattern Categories

The block editor comes with multiple categories to organize WordPress block patterns. Below are six default pattern categories in WordPress.

Some patterns may have overlapping categories since they include many elements. For instance, a pricing table is both under the Columns and Buttons blocks because it contains three horizontal boxes and CTA buttons.

Header

A header refers to the top section of a site page, which usually displays the website’s logo, title, navigation menus, and search button. This block pattern category has six default options with different purposes and styles.

Columns

Insert media, text, and other content types into up to three columns with a Columns block. In this category, WordPress offers five patterns with different block types, for example, two columns of text and a title or a pricing table consisting of three columns with a heading, text, and CTA.

Buttons

Buttons help WordPress users add attention-grabbing links to their content. The Buttons block patterns provide a pricing table, a simple CTA with a headline, text, a button, and social links.

Text

The Text block pattern can be a great start when you don’t know what to include when organizing content. This pattern already has a structure you can edit according to your needs. Some examples are a quote and an image in a solid color with a description on the side.

Gallery

The Gallery pattern can be useful for making an engaging portfolio fast. It arranges multiple photos appealingly, so you only need to upload images. If you don’t have any, feel free to browse the WordPress media library to access thousands of free images to complement your content.

Query

A Query block lets you display posts based on the parameters you set, such as the latest or most popular ones. These posts can be regular blog posts or WooCommerce products. Generally, a Query combines a featured image, a title, a date, and an excerpt. A Query pattern can be a good starting point to structure your dynamic page and reuse it for other pages.

How to Use WordPress Block Patterns

To use block patterns, follow the steps below:

1. Open the WordPress editor and click on the Toggle block inserter → the Patterns tab.
2. Here, you should see available block patterns. View them in different categories, such as Featured, Buttons, and Gallery, by clicking the dropdown menu.

3. Scroll down to see more of them, or hit the Explore button to see large previews in a popup. Finally, choose your preferred one.

4. Drag and drop the block pattern or click it to insert it into the page or post.
5. Once you have inserted the pattern, click on a block you want to customize to change the content or check the customization options on the right-side panel.
6. Click on the group box to personalize the pattern, like adjusting its dimensions or adding a border.
7. Add as many patterns as needed or remove them from your post by right-clicking the group box and selecting the three vertical dots → Remove.

How to Find More Block Patterns for a WordPress Site

Besides these several default block patterns, you can find more options by following the steps below.

Visit the WordPress Pattern Directory

This free block library lets users find and share block patterns across the WordPress community. Head to the website and search for patterns – view them based on categories or sort the options by date or popularity.

Click on the block pattern to see its listing page, preview it on different screen sizes, and copy it.

Alternatively, directly use it by hovering over the pattern, hitting the Copy button, and pasting it to your post or page.

Find a WordPress Theme That Offers Block Patterns

Many WordPress themes include their own block patterns. Typically, these patterns will match the theme’s aesthetic, and it’s possible to access them within the WordPress editor.

Some of the free WordPress themes with custom block styles are:

• Twenty Twenty
• Twenty Twenty-One
• Bricksy
• Naledi

Install a Plugin

Besides themes, multiple WordPress plugins provide block patterns. Redux is among the most popular options. This plugin offers 1,000+ new block patterns, which users can access from the Gutenberg editor. It also has demo sites to help them preview each block pattern.

How to Create Custom WordPress Block Patterns

While copying pre-made layouts from the pattern library or a WordPress plugin is possible, you may want to create your own block patterns to better suit your style. Below are two methods to help you create custom block patterns without coding.

Use a Plugin

The Blockmeister plugin is a popular option for making desired blocks. With it, you can create custom block patterns using its builder or select one or more blocks from the post editor. It’s also possible to categorize the patterns and add keywords to find them in the block inserter easier.

First, install the plugin, and you should see a new tab, Block Patterns, on your WordPress dashboard. Click on it → Add New to lead you to the WordPress editor and start making a pattern. Any design made here will only adjust to your block pattern repository – it won’t publish a new post or page.

Alternatively, go to a page or post where you’ve designed a custom block pattern. Next, select the WordPress blocks you want to include in the pattern and click the three dots icon on the toolbar → Add to Block Patterns.

Give a name to help you remember the custom pattern, and you can now use it like any other block pattern.

The new block pattern will default be under the Uncategorized or your blog name section. To group block patterns, navigate to Block Patterns → All Patterns in the WordPress panel. Select Edit for the pattern you want to add a category.

Click the Pattern tab on the right sidebar → Categories, then choose a suitable category for the pattern.

Create a Block Pattern via the Pattern Library

Another way to make a block pattern is by going to the Pattern directory and clicking on the Create New Pattern link.

Once signed in, you should see the WordPress block editor that looks similar to the usual one. Add blocks to make your pattern layout and play around with the customization options. Save the design as a draft if you want to keep it for yourself, or hit the Submit button to share it with the community.

Simply copy and paste the pattern from the My Patterns page to your website when you want to use it. You can manage all your custom patterns on this page, including those you’ve shared, favored, and drafted.

Before you share the block pattern, don’t forget to read the pattern directory guide, and add a description.

How to Manually Create Block Patterns

Besides installing a plugin and visiting the Pattern library, users can make new WordPress block patterns manually and add them to the theme by customizing the functions.php file.

Create your own patterns on a post or page editor, then switch to the Code Editor mode by selecting the three vertical dots in the upper right corner. Copy all code and paste it into a plain text editor like Notepad.

Next, head to the WordPress dashboard, click Appearance → Theme File Editor, and find the functions.php file.

Copy and paste the following code at the end of the file.

function function_name() {
  register_block_pattern(
    'slug',
    array(
        'title' => __( 'your pattern title', 'text-domain' ),
        'description' => _x( 'your pattern description', 'Block pattern description', 'text-domain' ),
        'content' => ‘your block content code’,
    )
);
}
add_action( 'init', 'function_name' );

Specify the pattern title and description placeholders with your own, and replace the text of your block content code with the code from Notepad. Ensure you leave the single quotes surrounding the text in place. Finally, click the Update File button to save changes.

See the results by creating a new page and clicking Toggle block inserter → the Patterns tab. Click on the dropdown menu and select Uncategorized. Here you should see your new custom block pattern.

How to Remove a Block Pattern from WordPress

You can remove or unregister a block pattern you’ve registered by copying and pasting this code on your functions.php file:

function unregister_my_patterns() {
  unregister_block_pattern('your pattern title');
}
add_action( 'init', 'unregister_my_patterns' );

In this example pattern, Free trial CTA is the pattern name we used when registering it. If the process is successful, you won’t see the pattern in the block inserter anymore.

It’s also possible to remove the WordPress core block patterns by using core as the prefix and mentioning the pattern’s name, such as:

unregister_block_pattern( 'core/Pricing table' );

If you wish to delete all default block patterns, use the following code:

remove_theme_support( 'core-block-patterns' );

Conclusion

A block pattern is a pre-designed layout consisting of one or more blocks, helping users create

WordPress websites quickly and easily. It’s not the same as a reusable block, as users can customize a pattern without affecting previous instances.

You can find default WordPress block patterns in the block editor and insert them into your page or post. If you want more options, visit the Pattern directory, install a plugin like Redux, or search for WordPress themes offering multiple patterns.

It’s also possible to make your own WordPress block patterns using the Blockmeister plugin or an editor in the Pattern library. Alternatively, design a new block pattern by inserting code in your functions.php file. Now you understand what a WordPress block pattern is, it’s time to start using it to speed up your website design process. Good luck!