How to Use Patterns in WordPress Full Site Editing

The simple definition of patterns is that they are a combination of WordPress blocks. Patterns are a result of the block system and block-based themes becoming more prevalent in WordPress full site editing.  The patterns option in the visual editor gives you access to the pre-created block combinations for quick page creation.

For example, you could use patterns to create a contact page with a form, text, and social media icons pre-configured based on the pattern’s design. You could also create an about page with images, headers, and text blocks by adding that particular pattern with one click. 

• Patterns in the Site Editor
• Patterns in the Page or Post Editor

The terms for the site editor and page or post editor are used interchangeably to describe the visual editor developed through the Gutenberg project. They are the same thing as the WordPress visual editor, but they can be used to edit different parts of your WordPress site depending on where they’re opened.

Patterns in the Site Editor

WordPress block patterns were first integrated into the WordPress core in version 5.8. Patterns became more refined with the Twenty Twenty-One theme and it has eight patterns available in the Site Editor. Then, with the release of the Twenty Twenty-Two theme, twelve featured patterns were added bringing the number to twenty. This screenshot shows some of the featured patterns in the Twenty Twenty-One and Twenty-Two themes.

To access Patterns in the full site editor, click on the + sign in the top left corner of the site editor, then click on Patterns in the left column.

As block-based themes become more common, you will also see an increase in the pattern provided with each theme. You can also now copy free patterns from the WordPress.org site.

Steps for Adding Patterns in the Full Site Editor

We are using the Twenty Twenty-Two theme in this tutorial.  This tutorial adds to the existing default site using patterns.

1. Log in to the WordPress site.
2. Click on Appearance, then click on Editor.
3. Next, we want to click on the List view in the top left corner. This will let you see the structure of the existing content.  
4. Assess where you want to put the new content for your WordPress site.  The screenshot shows a zoomed-out view of the site with the default content. As you click on different elements on the page, look at the list view to see what is highlighted. For this tutorial, we will add the patterns after the post. The post is part of a group of blocks.  Click on the top-level icon for this group of blocks – it’s called a Query Loop.
   
   
   
   
   
5. When you click on Query Loop in the list view, you will see that the area in the site editor is bordered by a thin blue line.  Additionally, the list view will highlight all the blocks under the Query Loop. Click on the drop-down arrow next to Query Loop in the list view.
   
   
   
6. When you have the query loop on a single line, click on the 3 vertical dots to open a menu. This menu will have the option to insert content before or after the query loop.  Click on Insert after.
   
   
   
   
7. Once you see the blank block inserted, click on the + sign in the top left-hand corner.  Then, click on Patterns.
   
   
   
8. You will see an option to explore, or you can click on the drop-down arrow next to Featured to see the list of organized pattern types. I want to put some separation between the text of the post and the text of the footer, so I will choose the Two images with text. 
   
   
   
   
9. You can continue adding different patterns as needed.  Once you’re done, click on Save in the top right-hand corner of the page to save your changes.

Patterns in the Page or Post Editor

Adding patterns to a page or post is similar to adding one in a site editor.  The main difference is that you are simply creating or editing a post or page.  The visual editor interface remains the same.

1. Log in to the WordPress Administrator.
2. Click on Posts, then select an existing post or click on Add new.
3. It will be easier to add a pattern to a new post or one with little content as you can easily determine the blocks that may be on the page.  If you need further clarification, then click on the list view to see the blocks that have been added.  Click on the + sign in the top left corner to add a new block.  Then, click on Patterns.
   
   
   
4. In this case, I’m just going to add the Layered images with duotone pattern to the post.  Click on the pattern to add it.
   
   
   
5. In this case, I decided that I don’t like the position of the pattern.  I’m going to select it and then use the toolbar arrows to move it up above the text.
   
   
   
6. Once you’re satisfied with the addition and location of the pattern(s), then click on Update, Save Draft, or Publish in the top right corner to save your changes.

The method for adding and moving patterns is the same if you’re working on pages, posts, or the home page on your WordPress site.

Working with blocks can help you quickly flesh out your website structure or content with very little effort.  Check out our WordPress Educational channel for more tips and tricks!

Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful Gutenberg articles!