How to Add Reusable Block in WordPress?

In this tutorial, we are going to Add Reusable Block in WordPress Admin Area, both without a plugin and using a plugin. This is the ultimate guide about Reusable Block in Gutenberg Editor aka Block Editor.

Most of us want to add a reusable block or import it from a JSON file to make our blogging experience easier with a reusable part.

We basically use the reusable block in our post or page to quickly import frequently used items like affiliate product boxes, custom table-designed banners, etc.

Moreover, in this blogpost, you will also learn more about

  • What is a Reusable Block and its use?
  • Using the Reusable blocks with and without a plugin.
  • Converting into the Regular Blocks in post and pages.
  • Downloading sample JSON files and Importing them via Reusable Block Menu.
  • Exporting Blocks to JSON file.
How to Add Reusable Block in WordPress

What is Reusable Block in WordPress?

With the rise of Gutenberg Editor also known as Block Editor, we can create a block that can be saved for the repeated use in the posts and pages.

Reusable Blocks help to quickly import the saved block in WordPress so that we don’t have to do repeated tasks frequently.

Creating and using reusable blocks is easy and you can add as many blocks that can later be converted to regular blocks for use in different posts and pages.

Importing reusable blocks to posts and pages can be done by searching your saved name in a new block or you can simply use the slash (/) sign and type the saved name.

Learn more about reusable or repeated blocks in this ultimate guide.

Why use Reusable WordPress Blocks?

There are lots of benefits of using Reusable WordPress Blocks as it helps to make the blogging process easier. Some of the benefits are as follows:

  • It helps to save your time for repeated works by using the same templates repeatedly.
  • Makes your affiliate marketing process easier by applying reusable templates.
  • It’s easier to build landing pages, custom deal pages, etc.
  • You can easily copy or duplicate the pages using reusable blocks.
  • Creating download tables is even easier including buttons.
  • Implementing shortcodes via reusable blocks is straightforward.

Add Reusable Block Menu in WordPress

Basically, there is no menu for a reusable block in WordPress Admin Area, here we are going to add a reusable block menu using two different methods in WordPress. One is by using a code in functions.php and the other is by using the WordPress plugin.

You can try any method to add a menu but use only one, I basically prefer to go with the code method rather than the plugin but it’s your choice.

Add Reusable Blocks WordPress Menu without Plugin

Right now, I am using this method on my website, the code is by Bill Erickson where you simply can add in functions.php or using a Code Snippets plugin. I prefer using Code Snippets plugin so that I don’t mess with other codes in functions.php.

  • Go to Plugins > Add New.
  • Search Code Snippets > Install > Activate the plugin.
  • Now go to Snippets > Add New.
  • Add a Snippet Title.
  • Copy and Paste the following Code.
  • Hit Activate Button.
function be_reusable_blocks_admin_menu() {
    add_menu_page( 'Reusable Blocks', 'Reusable Blocks', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}
add_action( 'admin_menu', 'be_reusable_blocks_admin_menu' );

Now you will able to see Reusable Block in WordPress Admin Area. You can easily import from JSON file or Add New Reusable Block via Block Editor and save it for later uses.

Reusable Block in WordPress Admin Area without Plugin

Adding Reusable Blocks via WordPress Plugin

If you are not familiar with a code then you can simply install and activate the plugin from WordPress Repository. It will also work the same way as the above code method. There are few plugins for reusable blocks and you can test anyone.

Reusable Block in WordPress Admin Area using a Plugin
  • Go to your Dashboard.
  • Go to Plugins > Add New.
  • Search Reusable Block Extended
  • Install and Activate the Plugin.
  • Now you will see the Reusable Blocks in the Admin Panel.

Create Reusable Blocks in WordPress

Sometimes you have to create your own re-usable blocks to make your blogging experience effective. Here we are going to create simple table format blocks that can be imported easily.

First, you can go and add a new post or page. Let’s assume you are writing a new post/page. It is simple to create blocks in WordPress.

Click on Add Block (+) icon.

Adding New Block in WordPress

Since we are creating simple table so we are going to add table in the new block.

Adding Table in WordPress

It’s a sample table so I am going to add 2 columns × 5 rows. You can choose your own format and styles.

Sample Table for Reusable WordPress Block

Now go to more options by clicking 3 dots and click on Add to Reusable Blocks and give a suitable name for the blocks and Hit Save. Later we are going to use the same blocks in different posts and pages.

Add to Reusable Blocks Option in WordPress

This is how we create reusable blocks in WordPress, you can create as many blocks with different names and styles. I simply love this features in WordPress as it helps to save time.

Also Read: GeneratePress Tutorials

Steps to use Reusable Block in WordPress Posts/Pages

After creating the reusable block, you can easily use those blocks in your posts/pages easily. For this, you need to follow some simple steps.

  • Go to your post or page where you want to use the blocks.
  • Click on Add Block (+) Icon.
  • Type Reusable Blocks in the Search Box.
  • Choose the reusable blocks that you have created earlier.
  • You can either edit the blocks or use them as regular blocks.
  • If you want to update the blocks then click on edit and Hit the Save button
  • If you want to use the blocks as a normal blog post then Click on Convert to regular blocks. Converting to regular blocks is a must in this step otherwise the reusable blocks will get updated with the current text and styles.
Convert to Regular Blocks WordPress

Import & Export Reusable Block from JSON

Here we are going to import block from the JSON file. I have offered some JSON files in my blog too, you can download one of the JSON files from this tutorial which I have created using create free Amazon Affiliate Product Box using GenerateBlocks.

Go to the above article and look for the Download button and download it, you will get a JSON zip file. Extract it.

Now, go to your WordPress Admin Area and Click on Reusable Blocks Menu.

Click on Import from JSON, click on Choose File option and browse the recently downloaded JSON file. Click on Import.

Importing JSON File in WordPress

Now you can see the imported Blocks. You can import as many as JSON files. Also, you can Edit or Trash or Export the JSON the existing files.

Reusable Blocks JSON File

You can also export the JSON file and share it among others or you also can use it in another blog. The export feature helps to save time so that we don’t have to again build blocks from scratch.

To export reusable blocks, go to the Reusable Blocks menu from the WordPress Admin area. Now hover your mouse over the block which you want to export and finally click in Export as JSON.

Export as JSON Reusable Blocks

Conclusion

We have learned to add reusable blocks in WordPress with and without plugins. Also, we learned to create, edit, update, import, export the reusable blocks.

I hope you liked this tutorial, if you have any queries please feel free to comment below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

3 thoughts on “How to Add Reusable Block in WordPress?”

Leave a Comment