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’s New In WordPress – WP 5.9
- The WordPress Block Editor
- How To Use WordPress Blocks
- WordPress Block Themes
- The WordPress Site Editor
- Video Course – WordPress Gutenberg
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.
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.
- 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.
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)
Use the dropdown menu to view and select patterns by category…
Or click Explore to open a modal that displays a larger view of each pattern.
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.
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.
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.
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.
- 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.
Learn more about the Query Loop block.
Block Patterns – Additional Information
- For a video introduction on the Pattern Library, see this Pattern Library video in our WordPress 5.9 updates article.
- For a short workshop on using Block Patterns, go here: Introduction to Block Patterns
Congratulations! Now you know how to use WordPress Block Patterns.
Updated: April 9th, 2023