How to Create a Reusable Block in WordPress Gutenberg Block Editor

Looking for an efficient way to run your WordPress Website? How about not wasting time on creating a Content Section over and over again for multiple-page use. For example, why not create the CTA button that you place on each and every page of your Website only once and save it for later use. Similar to the CTA button, you might also have a News-letter pop-up that appears on every Web page on your Website. And maybe after reading the first few lines of this blog, you have already listed out other such sections on your website that you use over and over again. That’s good. Because we are going to show you how you can create all these common sections on your Website as Gutenberg Reusable Blocks and use them as many times as you want.

How to Create a Reusable Block in WordPress Gutenberg Block Editor 1

What is Gutenberg Reusable Block?

If you have a WordPress Website, you might have to use similar content sections on different Web pages. Such Content Sections can be a CTA Button, a Subscription Form, an Affiliate Referral Banner and so on. But it’s not very wise to create them individually for each of the pages you want them on. Neither is it doable to try and recreate similar content sections over and over again. You might be a very skilled designer and it might not be a big deal for you to design the same CTA Button for multiple Web-Pages. But how efficient is it? If you have created a CTA section that you want to use across different Web-Pages, why should you have to create it multiple times? Why not create once and use the same section over and over again as many times as you want.  Yes, that’s exactly what is possible with Gutenberg Reusable Blocks. 

How to Create Gutenberg Reusable Block?

Open your WordPress Dashboard and create a new post. Once you are inside the Editor, pick any element and start editing. For this illustration, we are going to create a CTA button that we are going to reuse across multiple WebPages.

How to Create a Reusable Block in WordPress Gutenberg Block Editor 2

Once you are done editing the element, click on the three-dots and hit the Add to Reusable Block section. And that’s it. You have saved the CTA Button as a reusable block. Now let’s learn how you can use this block on a new WordPress page.

How to use Gutenberg Reusable Blocks?

Open a new WordPress post and click on the Plus icon, scroll down until you see the option Reusable. Under that section, you will see all the Reusable Blocks you have on your WordPress Website. As you hover your mouse over the saved block, you will see a snippet of it displayed right beside it.

How to Create a Reusable Block in WordPress Gutenberg Block Editor 3

Any change you make to the original block will be updated to all the places it has been used across your Website. So we recommend whenever you are using a Reusable Block, limit that practice to only inserting the block into new pages. However, if you want to make changes to the block, make sure you are aware that once you save the new changes, the Reusable Block will be updated on every page it has been used inside.

Wrapping Up!

Gutenberg Reusable Blocks comes with the convenience of not having to create the same content over and over again. But is it only limited to only one Website? No. You might have multiple WordPress Websites. And for very obvious reasons, you might want to use the same Block on a different website that you have created on another one. To do so you have to export the Gutenberg Reusable Block. And once you import the Block to a new WordPress Website, it will be saved as a Gutenberg Reusable Block.

How to Create a Reusable Block in WordPress Gutenberg Block Editor 4

To export Reusable Blocks, simply navigate to the Reusable Block Management Section and export it as a JSON file. Later on, open your other WordPress Website and upload this JSON file and you are good to go. If you want further assistance in exporting and importing Gutenberg Reusable Blocks across multiple WordPress sites, do make sure to read our blog on that topic. 

Afshana Diya

Afshana Diya

Afshana Diya is CMO at WPDeveloper. She is helping the company to create a dynamic team and sustainable business from the scratch. When she is offline from the digital world, she must be traveling to find natural beauty in remote places.

Share This Story

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.