Reusable Blocks vs Block Patterns in WordPress

With the arrival of WordPress 6.0, Full Site Editing has become a fully palpable reality in the CMS. Being able to create our own templates and, by extension, practically being able to create a complete theme from the editor, is now possible. Everything that has been built over the years with the new block editor makes this possible. But what is also possible is that among so many new options and tools, many of us have doubts about what specific aspects and situations each of them is used for . One of the most common being the differences between reusable blocks and block patterns.

Some time ago we talked about reusable blocks , and how they were used to build a set of blocks with certain elements inside the editor and save them, to be able to use said reusable block in any post or page later. When block patterns were introduced later, at first glance it seemed like a kind of rework of reusable blocks , but they had an external catalog that we could use on our personal website.

But of course, we could also make block patterns for internal use, which we could use in any input and page of our website. What on paper looks like a reusable block. So, do they serve the same purpose but have a different name? Is WordPress duplicating functionality? Not quite. Although they are quite similar, these two tools are designed with different purposes , which we are going to try to explain in this article.

To do this, we are going to explain how each one of them is used and, from there, we will be able to check for ourselves in which situations it is better to use a reusable block, and in which block patterns.

Using reusable blocks

The first thing is to open our editor (either as a new page or post), and we are going to design something simple. In our cases, a banner to access our contact page:

Once this is created, to transform it into a reusable block it is as easy as going to the upper toolbar of the block that houses all the design we have made, clicking on the three points and selecting Add to reusable blocks , and we give it the name what we want

With this, we already have our reusable block saved and we can use it wherever we want. So let’s do it. We open a new page, find our reusable block we just created, and add it. so far, all correct. Let’s put ourselves in the case that we already have our reusable block added, but we want to make another one with the same elements, but linking to the team page. That is, we want to keep the general design and its blocks, but modified : changing the texts, the background color and the link a little. If we edit the reusable block, and save the page, we will see this warning:

That is, the reusable block will be completely modified, and also in the rest of the posts and pages where we have inserted it . This is a problem, because we only wanted to change it in this one. To solve this, we already saw that there was a solution: convert the reusable block into a normal block. This makes us detach from the original reusable block and we can make changes without affecting it.

This is where we can see the true potential of reusable blocks . Any changes to the original reusable block will automatically update the rest of the web. With the consequent saving of time. And at the same time this is his big problem. If we use WordPress together with other people, there is a chance that someone will inadvertently modify a reusable block. So it’s going to change there whether we inserted it.

Using block patterns

By default, WordPress will offer us different block patterns that it has in its repository , although, as we said before, we can create our own . This is something that we will see in another article, and that we will explain in more detail. For now, we’re going to use one of the block patterns we have ready to go.

Once added in our editor, we can make any changes we want : modify text, add or remove blocks, change alignments… And that’s what we’re going to do, change it completely to create a two-column block to show the team members of our website :

And here comes the good stuff. Even if we save, if we look for the block pattern we used in the catalog again, it will be intact. If we add it again, we will verify that everything remains the same. This is important in several respects. As developers and designers, it will allow us to create designs that the end user (or other web users) will not be able to modify the original and, therefore, transform the base design. Something that, as we saw with the reusable blocks, we always had that danger.

Conclusions – When is it better to use one or the other?

Once explained what each type of block consists of, we can summarize it in:

• Reusable blocks – when we want to create a set of blocks that we are going to use in different parts of our website, but that are not going to have modifications between each of their copies. And that we want each of the copies to automatically update when we change the original scratch block. It is very simple to create, since we do it from the editor itself. Of course, it has a problem: it is relatively easy to edit the original reusable block by mistake, and that all the copies that we have inserted on our website are changed.

• Block patterns – it will allow us to create a design using blocks that we can add and modify without problems, since the original design will always remain immutable. Ideal when we want to give the end user a pattern with all its blocks, dimensions, spacing, etc., so that he only has to add his own content. To create a block pattern, we will need to handle code and edit files on the server where we host WordPress.

We hope that after this text, we have clarified a little the existing doubts between reusable blocks and block patterns. And it is that at first they may have several similarities, each one offers different options, and using one or the other will depend on what we want to achieve and the way we work.

As always, you have comments available to send us your doubts, suggestions and experiences with this type of blocks and patterns in WordPress. Surely those of you who are regulars to the new editor, will have used them on more than one occasion.