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.
At the top, you can filter all patterns by categories. It depends on the theme or plugin which categories you have available.
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.
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.
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.