How to Work with WordPress Block Patterns

Patterns are one of the coolest features that we can now work with in the WordPress block editor. They are a modular system of layout snippets that give WordPress users the opportunity to build custom page or post layouts with relative ease.

What are patterns

Patterns are small predesigned layout sections that can be provided by a theme or blocks plugin. You can have a look at our growing Aino pattern library. Patterns are built out of multiple (nested) blocks and can be as simple or as complex as the pattern designer wants them to be. The great thing about patterns is that once you have added a pattern on a page they are not defined as the pattern any longer, but are just a collection of ‘normal’ blocks on a page instead. So even if the pattern changes or is not available any more, nothing changes for you.

Patterns versus Reusable Blocks

That makes them different from Reusable blocks. Reusable blocks are connected and once you change the Reusable block, the change is reflected everywhere you included the Reusable block. An exception here is the option Reusable blocks have, that you can convert them to a regular blocks once the Reusable block is added to a page.

So the purpose of patterns is a different compared to Reusable blocks. Patterns are used to build your initial page or post layout. Patterns can also be used to create a new Page Template in block themes. Reusable blocks on the other hand are used for custom content snippets that are used multiple times on one website.

How to use patterns

When the theme or blocks plugin you have installed offers patterns, you can find them by toggling the Block Inserter sidebar. Here you can see the ‘Patterns’ tab menu. When you click on the ‘Patterns’ tab, you will find all patterns available to you.

Patterns in the block inserter.
Find the selection of patterns in the Block Inserter Sidebar.

At the top, you can filter all patterns by categories. It depends on the theme or plugin which categories you have available.

Pattern category filter
Patterns can be filtered by categories.

When you have your cursor active on a specific location in the editor, the pattern will be added there automatically once you click on a pattern. If you did not pick a specific location on your page, the pattern will be added to the bottom of your page.

Alternatively, you can also drag’n’drop a pattern from the Block Inserter sidebar to any location of your page. This option is useful if you want to add a pattern in between other blocks.

In addition to the Block Inserter sidebar, you will also be offered patterns that match a specific keyword you typed into the Search form of the Block Inserter popover.

Suggested block patterns
Suggested patterns when typing a keyword.

You can select the pattern from the popover, and it will be inserted on your page.

Once you have multiple patterns on your page, the blocks can be moved around, especially if the pattern designer grouped the pattern in a Group block. You need to click on the outer block to select it, and then use the Move up or Move down button in the Block Editor Toolbar.

Move patterns up and down
Move blocks up an down in the editor.

You can also use the Keyboard shortcuts Shift+Option+Command+T and Shift+Option+Command+Y to move blocks up and down.

Now you only need to change colors, copy and images from the pattern sample content to your own website content before you publish the page or post. The semi-optimal solution of demo content imports that themes used for a long time becomes outdated with this new approach. Patterns and block page templates and template parts will offer predesigned layout snippets out of the box. The new workflow with patterns and block templates is a lot more flexible and user friendlier.

To get started with patterns, you can search for free patterns built with WordPress core blocks in the pattern library on WordPress.org. The patterns there can be used with any theme. You can simply copy the pattern and paste it into any page or post.

Ask your questions

Do you have questions or are you experimenting any issues working with patterns? How do you like the pattern workflow, and do you have ideas for specific patterns that you would love to use? Please just write me a comment below, I would love to hear from you.

,

3 responses to “How to Work with WordPress Block Patterns”

  1. Adam says:

    How to create a layout magazine with aino?

    • Ellen Bauer says:

      Hi Adam,
      we are currently working on patterns that will allow to create a magazine layout for your front page. So of these patterns will be free and further ones will be part of our first Aino premium product, which we hope to release next months.

  2. Miriam says:

    Hi Ellen,
    how do I create and save my own patterns? Do I need php knowledge for this? I would like to have customized patterns that reflect more the style and content that I use throughout one site.
    So far I use “the reusable blocks” feature for this purpose since I can customize them to my design and content. I always break them apart once included in the page (for reasons you describe above). Thats why this workflow requires a lot of attention. Many times I end up changing the reusable block by accident. So it would be helpful to know how to customize blocks…

Leave a Reply

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