Adding block patterns to a WordPress block theme

Learn in this tutorial how to add block patterns to a WordPress block theme.

In a previous tutorial you learned how to create a block pattern and register it in a plugin or a classic theme.

In this case I’m going to explain how you can do the same for a block theme.

Here’s how:

Steps to create block patterns in WordPress

1. Create the block pattern in the editor and escape the HTML

The first part is exactly the same as the first two steps of the tutorial where I explained how to create a pattern.

In short, in step 1 you did the design part from the same block editor and in step 2 you copied that HTML and “escaped” it.

This was the design we created in the tutorial:

And the escaped HTML was something like this:

<!-- wp:cover {\"url\":\"http://osomcode.local/wp-content/uploads/2020/06/sample-blog-post-2.jpg\",\"id\":3756,\"minHeight\":600,\"minHeightUnit\":\"px\",\"align\":\"full\",\"className\":\"osom-hero\"} -->\n<div class=\"wp-block-cover alignfull has-background-dim osom-hero\" style=\"background-image:url(http://osomcode.local/wp-content/uploads/2020/06/sample-blog-post-2.jpg);min-height:600px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:heading {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":82}}} -->\n<h2 class=\"has-text-align-center\" style=\"font-size:82px\">This an osom title</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":32}}} -->\n<p class=\"has-text-align-center\" style=\"font-size:32px\">Here you can add reasons why everybody should keep browsing your website</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Contact me</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:cover -->

2. Adds the block pattern

Unlike the previous tutorial, where a pattern was created, when you want to add the pattern to a block theme you do not need to use the register_block_pattern function.

Just create a PHP file inside the /patterns/ folder in the theme root. If the folder does not exist just create it.

You can name the PHP file whatever you want, in this example osom-hero.php. This would be the content of the file:

In the header you have to include the following parts:

• Title: the title you will display in the “Patterns” section.
• Slug: a unique name (osom-hero), preceded by the topic slug (osom-theme).
• Categories: the category(ies) in which it will be displayed (featured and header in this case).
• Keywords: keywords by which it will appear when the user does a search from the block editor (Call to action and hero in this case).

Obviously, this is just an example and you can modify the different sections for your particular case.

There you have it:

In this case, the pattern will appear in the “Headers” section since you have indicated the category header but you can choose from other existing ones:

• Buttons (buttons)
• Columns (columns)
• Gallery (gallery)
• Headers (header)
• Text (text)

Another option is for you to register a custom category as I explained in a previous tutorial.

Conclusions

Block patterns are a very powerful tool. Thanks to them you can offer predefined layouts to the user/customer. And now you know how easy it is to add them in a block theme.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂