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.

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)

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.

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.

Learn more about the Query Loop block.

WordPress Block Patterns – FAQs

Here are frequently asked questions about WordPress Block Patterns:

What are WordPress Block Patterns?

Block Patterns are predefined collections of blocks that users can insert into their pages or posts and then customize with their own content.

How do I use Block Patterns?

To use Block Patterns, simply select the block you want to add and choose a pattern from the available options. You can then customize the pattern to suit your needs.

Can I create custom Block Patterns?

Yes, you can create custom Block Patterns by combining different blocks and saving them as a pattern for reuse. This allows for consistent design and layout across your site.

Are Block Patterns available on self-hosted WordPress sites?

Yes, Block Patterns are available on self-hosted WordPress sites using the Gutenberg block editor. Users can access and use Block Patterns to streamline their content creation process.

How can Block Patterns enhance my website’s design?

Block Patterns provide users with pre-designed layouts and structures, saving time and effort in creating visually appealing content. They offer versatility and consistency in design across various pages and posts.

Do Block Patterns affect website performance?

Block Patterns themselves do not directly impact website performance. However, using excessive or complex patterns might affect page loading times. It’s essential to use Block Patterns judiciously to maintain optimal site performance.

Can I customize existing Block Patterns?

Yes, you can customize existing Block Patterns by adding or removing blocks, adjusting styling, or modifying content to better fit your needs. Customization provides flexibility in adapting patterns to specific requirements.

Are there accessibility considerations when using Block Patterns?

Yes, it’s crucial to ensure that Block Patterns adhere to accessibility standards to make content usable for all visitors, including those with disabilities. Designing patterns with accessibility in mind enhances user experience and inclusivity.

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: July 5th, 2024