WordPress Block Patterns

WordPress Block Patterns

WordPress Block Patterns

In this tutorial, you will learn about using WordPress Block Patterns – a collection of predefined blocks and layouts that you can insert into posts and pages and customize with your own content.

Refer to the tutorials below if you need help with this section:

***

What Are Block Patterns?

Block Patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content.

Using a Block Pattern can reduce the time required to create content on your site and are a great way to learn how different blocks can be combined to produce interesting effects. To find more patterns, you can also use the Block Pattern Directory.

The Block Pattern Library

The WordPress Pattern Directory is the home of a wide range of block patterns built to save you time and add to your site’s functionality. You can edit them as you see fit. So if you need something different in the header or footer of your theme, you can swap it out with a new one in just a few clicks.

The WordPress Pattern Directory
The WordPress Pattern Directory

With a nearly full-screen view that draws you in to see fine details, the Pattern Explorer makes it easy to compare patterns and choose the one your users need.

Patterns
WordPress Block Patterns

Notes:

  • After searching and finding a pattern you like in the Block Pattern Directory, select “Copy” to save it to your clipboard. You can then return to your page or post and use the paste function to add the pattern into your content.
  • You can use the default images provided within Block Patterns on your own site as these images are free to use. However, because these images are referenced from an external source (i.e. they are not added to your site’s Media Library), there is always a chance these could change or be removed. For this reason, we recommend replacing block pattern images with your own content.

For more information about using the Block Pattern Library, see this Pattern Library video in our WordPress 5.9 updates article.

How To Add A Block Pattern

To insert a block pattern into your content:

Click the [+] icon (Add block or Toggle Inserter tool) to add a new block, (1) then click on the Patterns tab. (2)

Add a block - Patterns tab.
Open the Toggle Inserter tool and click on the Patterns tab

Use the dropdown menu to view and select patterns by category…

Patterns - Category dropdown menu.
Use the dropdown menu to view patterns by category…

Or click Explore to open a modal that displays a larger view of each pattern.

Patterns - Explore button.
Click the Explore button to view and select patterns.

Either click on the selected pattern to insert it where your cursor is located or drag and drop the pattern where you would like to add it to your content.

Adding Block Patterns
Adding Block Patterns

Note: The patterns displayed in the Add block > Patterns menu are based on your site’s currently active theme.

How To Customize A Block Pattern

After inserting a Block Pattern, you can edit the blocks within the pattern just like any other block by clicking on the block to edit its settings and content.

Block Pattern
A Block Pattern is just a collection of blocks, so you can edit the blocks to edit the pattern.

For example, the screenshot below shows a pricing table pattern created with different blocks, including a Columns block.

So, to edit the block pattern, edit the Columns block and its content and settings.

Block Pattern - Pricing table
A pricing table block pattern created using the Columns block.

Tip: When editing patterns, use the List View. This will make it easier to see where you are in the pattern and what block or block element you are editing.

Block Patterns - List View
Use the List View to make editing block patterns easier.

Notes:

  • You can add multiple blocks (and Block Patterns) to your page and place these anywhere you want.
  • New Block Patterns are continuously being added and existing Block Patterns can change or be removed. However, once you add a Block Pattern to your site, there is no link to the original pattern in the Add Block menu, so any subsequent changes made to the pattern in the Add Block menu will not impact any pattern added to your site’s pages or posts.

For more information on using the Block Editor, see this tutorial: The WordPress Block Editor

How To Find Contextual Patterns

Some blocks have patterns built into the settings of the block itself. For example, the Social Icons block and Query Loop block have this functionality built-in.

To find the contextual patterns for the Social Icons block, select the transform menu in the block toolbar and navigate to Patterns at the top.

For the Query Loop block, patterns are shown as part of the configuration of the block itself.

Query Loop Block - Built-in Patterns.
The Query Loop block uses built-in patterns.

Learn more about the Query Loop block.

Block Patterns – Additional Information

Congratulations! Now you know how to use WordPress Block Patterns.

Block Patterns
Block Patterns

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top