How To Create a Reusable Block in Gutenberg

The Gutenberg block editor, which came with version 5.0 of WordPress replacing the classic editor, changed our paradigm of creating posts and pages. Each of them is composed of sets of content or blocks of a certain type: text, headline, cite, list, file, table, image, cover, image gallery, media and text, button, embedded, etc, from which you can customize some properties quickly creating very striking designs.

So, for example, to insert the section I show you below is as easy as inserting a new cover block, in which I have superimposed a 100% opaque filter of orange color and I have added the messages and button that I liked.

All this from the Gutenberg block editor, and without having to leave the post nor need to copy and paste or edit the HTML code. This was unthinkable with the classic WordPress editor. If you want to know more details about the different possibilities the cover block offers, you will surely be interested in reading this article on the differences between the featured image and the cover block.

With the block editor you have many new design possibilities based on combining all kinds of elements. And I assure you that it compensates to dedicate a little of your time to know the different possibilities offered by each of the blocks you have available to be much more creative and productive in the design of pages and posts.

One of the great advantages of the block editor is that not only you can create the variety of contents offered by all available blocks, but you can also reuse blocks.

You already know that the reuse of code, content, and design is a basic principle of efficiency for all web developers to take advantage of previous work, save time, and reduce redundancy. It also helps you maintain a uniform image or style throughout your entire website. You only have to browse our website to see a set of very similar sections between them, with the same style but different content, with different calls to action or testimonials from our clients.

Let’s see below how the creation of a reusable block works.

Create a Reusable Block

Any block you’ve created in an post or page can be converted into a reusable block. To do this, simply select the block in question, click on the three-point icon, and select Add to Reusable blocks.

You are asked to enter a name for the block you want to add and save it.

Reuse a Block

Now, whenever you want to use one of your reusable blocks in a post or page, it is available in your block library in the Reusable section.

After selecting it, the block is inserted. The effect is the same as if you had duplicated that block in the same post that created it:

Modify a Reusable Block

Note that a reusable block cannot be modified like any other normal block—you can only modify it by clicking on its Edit button:

When you edit a reusable block, you’re not just modifying the instance that appears in your current post, but the block itself, everywhere. In other words, any modification you make in a reusable block will also apply to all the posts and pages where you have added the reusable block.

Surely you ask yourself, how do I do it just to make a change in the block I just added, but not in the rest of the created blocks?

Nelio Content

I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.

Panozk

WordPress.org

View Plans

Convert to normal block

If you just want to change the reused block that you just added without modifying all the instances of the block that you have in the rest of your website, you always have the option to convert the block you just added into a regular block.

As of this moment, the reused block becomes again a block of the original type. In this case, the block is converted back into a cover block and I can now make any changes I want without changing the reusable block.

Manage Reusable Blocks

For each reusable block you create, a new custom content type of block type is created in your database, with the name you specified. But at any time you can go directly to modify or delete any of the reusable blocks created as if they were any other post type.

To do so, click on the option Manage All Reusable Blocks that you have available at the end of the block library in the reusable blocks tab.

Or you also have the option to access the list of reusable blocks from the option, Manage All Reusable Blocks, which you can find in the upper right menu in the three-point icon, Show more tools & options.

In both cases, you will be able to visualize the list of reusable blocks that you have created and for each one of them, you can modify it or delete it just as you would with any post or page.

Keep in mind that any modification you make to a reusable block will automatically be applied to all the posts and pages that use it.

Likewise, if you delete it, the reusable block will also be automatically deleted in all those pages where you added it (and you didn’t reconverted it to a regular block again).

And here’s the essential for you to be much more productive and efficient reusing all sections of your website making sure you keep the same image and style throughout it.

In a next post I will also explain how you can export and import blocks with Gutenberg. But you know that my recommendation is that you learn many more tricks about Gutenberg by signing up for the Content creation course with Gutenberg ?

Photo by Nicola Fioravanti on Unsplash.