How To Create Reusable Blocks In Gutenberg

Gutenberg is a great page builder. You can build websites with its native or third-party blocks. One of its best features is reusable blocks.

As you know Gutenberg uses blocks to create sections on the website. It is a block builder. And it allows us to create custom blocks.

What Are Reusable Blocks

Gutenberg reusable block is a custom block that you can create, customize, save, and use anywhere on your website.

Why it is good? Because if you want to use the same section on a different page or post, you can create it once and use it an unlimited number of times.

Also Read: Best 11 Gutenberg Plugins

This makes it easier for WordPress developers to create websites faster. You can create as many reusable blocks as you want and use them on different pages.

It is very easy to create and in this tutorial I will show how you can do it.


Create Reusable Block

So, let’s say I want to have the same text at the end of all posts. You have to create it every time you publish a new post.

But with reusable blocks, you create it once and use it wherever you want. And the good thing is that every block can be a reusable block.

I use a paragraph for this tutorial. You can follow me or create a different block.

So, the first step is to add a block to the editor and add your design. Here is mine.

add the block

I create a simple paragraph with the link and added background color. I want to use it at the end of every blog post.

For that, we have to transform it and make it reusable. And it is a very simple thing to do.

Select your block, in the toolbar click on three dots, and click Add To Reusable Blocks.

create reusable blocks

On the right side, you will see the name input. Give your block whatever name you want and click Update and Save.

That’s it. You created a reusable block that can be used anywhere on your website.


Use Reusable Block

Now let’s use our custom block and see how cool and useful it is.

If you add a new block, you will see a new tab – Reusable. Go there and you will see all your reusable blocks there.

use the custom block

Now, you have your custom block and you can add it on pages or posts. You don’t have to create it from scratch every time.


Edit Reusable Block

If you want to change the custom block for a specific page, you can do it but it’s a little tricky.

For example, let’s say you used the reusable block on 5 posts. You want one of them to have a different color background. If you change it, it will change the block itself.

So, all 5 posts now will have a new background color. But there is a different way to modify blocks on a specific page.

Also Read: Speed Test – Gutenberg vs Elementor

You can convert your custom block to a regular block and then change it. The change will be applied only to that particular block.

In order to do this, add your block and in the toolbar click on the conversion icon and it will become a regular block.

edit gutenberg blocks

You can modify it and changes won’t be applied on the master block.


Manage Reusable Block

Gutenberg allows us to manage and modify our custom blocks very easily. Click Manage All Reusable Blocks under the Reusable tab and it will take you to the specific page.

manage your reusable blocks

Here you will see all your blocks and you can edit them as you edit your posts or pages. Works the same way.

Also, it allows you to export and import blocks in JSON format. So, you can export any block and upload it on a different website.

Conclusion

Reusable blocks are a great feature of Gutenberg. It allows us to create custom blocks that can be used on different pages. Also, they can be exported and used on other websites.

I highly recommend using this feature because it is very convenient and makes our work easier and faster.

Leave a Reply