Home Contact Scroll Top

How to Use WordPress Block Patterns – A Step-by-Step Guide

When you are new to WordPress, creating your website can sometimes feel overwhelming. WordPress block patterns can help speed up the process of creating content for your site by accessing ready-made design layouts.

With the release of WordPress 5.8, WordPress block patterns were introduced along with the WordPress Block Pattern directory.

In this guide, we will outline how you can speed up your content creation by taking advantage of using WordPress block patterns. In this step-by-step guide, we will:

  • Explain: What are WordPress block patterns?
  • Teach you: How to use WordPress Block Patterns.
  • Show you: How to customize them.
  • Bonus: Create a Reusable Block from a WordPress Block Pattern.

NOTE: TarttWeb is reader-supported. This means that we may earn a small commission at no additional cost when you make a purchase through referral links on our site.

If you’d like to jump to the section you’re looking for, a hyperlinked table of contents is available.

What are WordPress Block Patterns?

WordPress block patterns are premade groups of blocks that you can insert into your website to help speed up your content creation. You can insert them into headers, footers, posts, pages, and wherever the WordPress block editor is used.

Block patterns are individual content blocks like headings, paragraphs, images, buttons, and other block types that you can customize with your content. These blocks get grouped into predefined layouts and can be used repeatedly throughout your website.

Using WordPress Block Patterns is as easy as selecting a pattern you like, inserting it, and editing it with your own content. This allows you to create pages and posts with complex layouts quickly.

How to use WordPress Block Patterns

There are two different ways you can use to access WordPress Block Patterns. One is by using the block inserter panel in your WordPress website. The other is by visiting the WordPress Block Pattern directory website. Below we’ll take a look at how to do each one.

Using Block Patterns from the Block Inserter Panel

You can access Block Patterns directly in a post or page using the Block Inserter panel. In this example, we will be using a WordPress post.

Step 1. Navigate to the Post Edit screen

Navigate to the Post Edit screen. You can either create a new post or edit an existing one.

Step 2. Click on the Block Inserter Toggle

Now click on the block inserter toggle, then click on the Patterns option.

WordPress block inserter block patterns

Step 3. Use the Dropdown to Select a Pattern

Clicking on the pattern category dropdown will allow you to select from a variety of patterns.

WordPress block patterns category dropdown

You can also click the Explore button next to the dropdown to get a larger view of each pattern.

WordPress block patterns inserter explore

Step 4. Click on the Block Pattern you want to insert

Either click on the pattern you want to insert or drag and drop the block pattern into your content. Clicking the block pattern will insert it into the location of your cursor.

Adding a text block pattern to a WordPress post

And that’s how to use a WordPress Block Pattern. Keep reading to learn how to use the block pattern directory and customize your block pattern.

Using the WordPress Block Pattern Directory

The WordPress Block Pattern directory contains many well-designed block patterns created by WordPress.org and WordPress users. For this part of the guide, we will be using a WordPress post for our example.

However, WordPress block patterns can be used in pages and anywhere else the block inserter is used.

Step 1. Navigate to the WordPress Pattern Directory Website.

First, you will need to navigate to the WordPress Pattern Directory website.

Step 2. Locate a Block Pattern you want to use

Now locate a pattern you are interested in using. You can do this by searching for keywords in the search box or browsing the various tabs.

Navigating the WordPress Pattern Directory

Step 3. Hover over or Click on a Pattern

Once you have found a block pattern you want to use, hover over it, then click Copy.

Hover over a block pattern to copy

Alternatively, you can click on the pattern you are interested in, which will take you to a new screen. Now click the Copy Pattern button in the top left corner.

Another method to copy a block pattern

Step 4. Paste the Block Pattern into a WordPress Post

Now that you have successfully copied a block pattern from the pattern directory, open the post you want to use it in.

Then insert the block pattern by right-clicking on the page and selecting paste. A quicker way is to press ctrl + v on your keyboard. You should see the new block pattern show up in your post like the image below.

Paste the block pattern into your post

Alright! You now know how to insert WordPress block patterns using two different methods. Now let’s look at how you can customize them to your needs.

How to Customize WordPress Block Patterns

Customizing WordPress block patterns is just as easy as inserting them. Once you insert a block pattern, you can customize it the same as any other block. Click on any block to edit the content within the block.

Now simply select a block within the pattern and edit it just like any other block.

Customizing a WordPress block pattern

You now know how to customize a WordPress block pattern with your own content. Pretty easy, right!

How to Create a Reusable Block from a WordPress Block Pattern

To start, click on the List View option and select the pattern group. The List View option provides a much better way to navigate blocks on a page.

WordPress Block Editor List view

Then click the Kobra menu (three dots) and select the Ungroup option.

Ungroup WordPress block pattern

Now that the pattern is ungrouped, select the first block, then hold down shift on your keyboard (or cmd for Mac) and select the last block. Doing this should select all the blocks.

Once all the blocks are selected, click the Kobra menu (three dots) on the toolbar, then select Add to Reusable blocks.

Add blocks to WordPress reusable blocks

After clicking on Add to Reusable blocks, enter a Name for the reusable block, then click Save. You now have a reusable block that you can use repeatedly.

It is also possible to remove and add blocks to your reusable block.

To learn more about WordPress reusable blocks we recommend reading our complete guide on: How to Use WordPress Reusable Blocks.

Wrapping Up!

In this guide, we showed you two step-by-step methods of how to use WordPress block patterns, including how to customize them. We also included a bonus way to turn block patterns into reusable blocks.

Hopefully, this guide has helped you understand how WordPress block patterns can help you speed up and improve your content creation.

If, you found this article helpful, let us know in the comments section, follow us on social media, or subscribe to our newsletter for more. If you need a guide or article written, contact us and select article request in the dropdown.

TarttWeb Favicon Logo Cropped
Editorial Team

The Editorial Team at TarttWeb is a group of passionate people that love to help others, led by Jeff Tartt.

Subscribe to our Monthly Newsletter

Get our latest guides delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *