How To Create a Reusable Block in Gutenberg

Published in WordPress.

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.

Re-promote your bests posts by making the most of them

Try Nelio Content

Don’t waste any more time and re-promote your pots on social networks automatically!

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.

Have you already done the content creation course with Gutenberg?

The block editor explained step by step.

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.

Adding a reusable block
Add a reusable block to the WordPress block library.

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

Naming a reusable block
Name the block you want to reuse 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.

Reusing a block
When you position yourself on top of a reusable block, a preview of it is displayed on the right.

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:

Have you already done the content creation course with Gutenberg?

The block editor explained step by step.

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:

Modify a reusable block
Click on the Edit button to modify the reusable block.

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?

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.

Convert the reused block to a regular block
Convert the reused block to a regular block and make the modifications you want.

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.

You haven’t signed up yet? What are you waiting for?

The block editor explained step by step.

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.

Manage all the reusable blocks
Click on Manage All Reusable Blocks to go to the list of blocks that you have created.

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.

Manage All Reusable Blocks
Manage All Reusable Blocks option of the Show more tools & options menu.

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.

List of reusable blocks.
List of reusable blocks.

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.

Editing a reusable block
Editing the reusable block that we’ve created.

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.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.