Creating block patterns in WordPress

Learn in this tutorial how to create block patterns with the WordPress editor and add them to a Plugin or Theme.

WordPress5.5 introduced many new features, including the option to use block patterns in the editor.

It also included several native block patterns:

• Buttons
  • Two buttons
  • Three buttons
• Columns
  • Two columns of text
  • Two columns of text with images
  • Three columns of text with buttons
• Gallery
  • Two contiguous images
• Headers
  • Large header
  • Large header with a heading and a button
  • Large header with a paragraph
• Text
  • Header and paragraph
  • Quote

It is likely that the number and type of patterns will increase over time.

But you know what’s most interesting?

That you can create your own patterns in a simple way.

In fact, you can do all the design part in the block editor, then copy that HTML and register it as a pattern using the register_block_pattern function.

In this tutorial you will see how to create a block pattern and have it available in your child theme or from a plugin.

Here’s how:

Steps for creating block patterns in WordPress

1. Create the design in the editor

In this step you only have to create the design you want to turn into a pattern, directly in the block editor.

For this example this using:

• 1 cover block
• 1 header block
• 1 paragraph block
• 1 button block

You can use all the functionalities that the editor offers you: add a background image, position it, give a minimum height, modify the size of the texts, choose the color of the button, etc.

2. Copy the HTML from the editor and escape

Once you have the final design you just have to copy the content.

To do this, click on the top three-point menu of the all-encompassing block (in this case the cover block) and click on copy.

Note: you no longer need to go to the code editor to copy the HTML.

You will be left with something similar to this:

<!-- wp:cover {"url":"https://osomcode/wp-content/uploads/2022/02/header1.jpeg","id":591,"dimRatio":50,"minHeight":600,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:600px"><span aria-hidden="true" class="wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-591" alt="" src="https://osomcode/wp-content/uploads/2022/02/header1.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
<h1 class="has-text-align-center has-white-color has-text-color">THIS IS AN OSOM TITLE</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color">These are your awesome reasons why everybody should keep browsing your website</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">CONTACT ME</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

But before you can use it to register as a pattern you have to escape the code.

You can use either of these two online tools to do this:

• Onlinestringtools
• Codebeatify

Once it is escaped, there’ll be something like this left:

<!-- wp:cover {\"url\":\"https://osomcode/wp-content/uploads/2022/02/header1.jpeg\",\"id\":591,\"dimRatio\":50,\"minHeight\":600,\"isDark\":false} -->\n<div class=\"wp-block-cover is-light\" style=\"min-height:600px\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-background-dim\"></span><img class=\"wp-block-cover__image-background wp-image-591\" alt=\"\" src=\"https://osomcode/wp-content/uploads/2022/02/header1.jpeg\" data-object-fit=\"cover\"/><div class=\"wp-block-cover__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":1,\"textColor\":\"white\"} -->\n<h1 class=\"has-text-align-center has-white-color has-text-color\">THIS IS AN OSOM TITLE</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"textColor\":\"white\"} -->\n<p class=\"has-text-align-center has-white-color has-text-color\">These are your awesome reasons why everybody should keep browsing your website</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<div class=\"wp-block-buttons\"><!-- 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 -->

3. Register the block pattern

Now you have two options, register it through a plugin or directly in a child theme.

In both cases you will use the register_block_pattern function and define four parameters in its array:

• title > the title that will be displayed in the Patterns section.
• description > a description as specific as possible about the elements that form the pattern.
• categories > the category in which the pattern will be displayed.
• content > where the pattern’s HTML will be added.

3A. Register the block pattern in a child theme

If the pattern is for your own use you can add it directly in the theme.

To this end, add the following fragment in functions.php:

3B. Register the block pattern in a plugin

On the contrary, if you are going to create several patterns and you want to have them available in several installations it is best to register them in a plugin.

To do this, create a plugin in with this code.

You got 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.

Conclusions

The arrival of block patterns in the WordPress editor opens up many possibilities. If you want to start getting the most out of it by creating your own patterns, now you know how.

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉