• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

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:

Example of a block pattern for a header section (or hero)
Example of a block pattern for a header section (or hero)

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:

To see this and another 883 code snippets of this website, login or subscribe here.

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:

category-headers-pattern-blocks-WordPress
New block pattern in the header category.

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. 🙂


Block Editor HTML PHP WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?