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:

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:
To see this and another 919 code snippets of this website, login or subscribe here.
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.
To see this and another 919 code snippets of this website, login or subscribe here.
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.
To see this and another 919 code snippets of this website, login or subscribe here.

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