Learn in this tutorial how to create block patterns with the WordPress editor and add them to a plugin or theme.
WordPress 5.9 introduced quite a few new features, among them, the option to display block patterns in the editor contextually. That is, the user encounters the block pattern only when using a block.
In a previous tutorial I explained how you can easily create your own patterns.
In it you saw how can you do all the design part in the block editor, then copy that HTML and register it as a pattern using the function register_block_pattern.
In this tutorial you will see how once you have created that block pattern you can control where it appears suggested in the block editor.
That is, the block pattern in addition to being displayed in the block pattern section, it will be displayed when the user inspects the block transformation options.
Let’s see how you can achieve this.
Steps to display block patterns contextually in WordPress
1. Create the block pattern
Follow the tutorial instructions on how to create a block pattern to get the pattern you want.
2. Add a new property to the block pattern record
In that tutorial you used the function register_block_pattern and defined four parameters in its array:
title: the title to display in the “Patterns” section.description: the description as specific as possible about the elements that make up the pattern.categories: the category in which the pattern will be displayed.content: where the HTML of the pattern will be added.
To add the option to display it contextually just add a new property:
To see this and another 965 code snippets of this website, login or subscribe here.
This is how the example of the previous tutorial would look like by adding the property:
To see this and another 965 code snippets of this website, login or subscribe here.
In this case, you are telling the pattern to be displayed when the user checks the header block transformation options (core/heading).
You can add other blocks where you want it to be displayed, for example, to display it in the image block you would have to add core/image.
Note: Blocks containing inner blocks do not support contextual patterns at this time. Therefore, although in this example it would be nice to be able to add this contextual pattern to the “cover” block as well, for the moment it cannot be done. As soon as this limitation is solved I will update this tutorial to reflect it.
Conclusions
Block patterns are a fantastic tool to facilitate the design to the end user and now you know, not only how to create one, but also how to display it where it is most relevant to the user.
Any questions? I read you 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. 😉
