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 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 blog post, 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 posts 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 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 time for repeated work 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 in WordPress Menu

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 prefer to go with the code method rather than the plugin but it’s your choice.

1. 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 snippets in functions.php or use a Code Snippets plugin. I prefer using the 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 be able to see Reusable Block in WordPress Admin Area. You can easily import from a JSON file or Add a New Reusable Block via Block Editor and save it for later use.

Reusable Block in WordPress Admin Area without Plugin

2. 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 a 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 reusable 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 a simple table so we are going to add a 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 these 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. 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 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 the 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 the 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 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 that you want to export and finally click on 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, and export the reusable blocks.

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

Share:

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

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

  1. Hello Suraj!

    Could you please kindly create a tutorial on how to remove sidebars in GeneratePress such that individual blog posts appear in full width like those in hostingmonks.com. Thanks

    Reply
    • Hi BRUNO,
      There is an option to disable the sidebar in the customizer and also in each post.
      Also, you can create a layout by modifying CSS.
      And, I may write a tutorial soon.
      Thanks

      Reply

Leave a Comment