Gutenberg block editor is known for offering reusable blocks. However, this feature is a bit tricky and you could be missing out on a great feature. Therefore, I bring you this detailed tutorial on how to create, import and export reusable blocks in Gutenberg WordPress Editor.

Gutenberg was launched with the WordPress Bebo version and had a bit of a rocky start. Despite its compelling features, it failed to impress its audience at the start. There were various reasons behind its failure to impress its audience. However, we uncovered some amazing features with our guide on what to expect from the Gutenberg editor. Here at the TemplateToaster WordPress Theme Builder blog, in this detailed WordPress Gutenberg tutorial, I will shed some light on how to create, import and export reusable blocks in Gutenberg WordPress Editor.

This editor comes with an entirely new concept of creating web pages and posts, WordPress users have a bittersweet relationship with the WordPress Gutenberg block editor. Its most powerful feature is that it allows you to create reusable blocks that you can easily create, import, and export. Before taking the advantage of a reusable block, you need to understand what exactly it is.

What is a reusable block?

A reusable block is a content block that can be saved for later use. It was the core concept behind the introduction of the Gutenberg Block editor. There was no such feature available in WordPress prior to Gutenberg. However, Gutenberg’s block functionality made it possible in many ways. Previously, users had to copy and paste the content snippet they wanted to reuse. Now, they can just save the content block and reuse it whenever and wherever they want with just one click. Here are some ways reusable blocks can be useful to you-

  • For inserting Call-to-action (CTA) buttons or sections in your posts with just one click.
  • To add ad banners in your WordPress pages and posts.
  • Allows you to add social media follow buttons at the bottom of your posts.
  • Quick insertion of pre-designed tables and forms in your posts

Without any further Ado, let’s get to how to create, import and export reusable blocks in Gutenberg WordPress Editor.

How to Manually Create Reusable Blocks in WordPress Gutenberg Editor

Just like any other WordPress tasks, there are two ways to do it: either manually or automatically with the help of a plugin. If you are an experienced WordPress user with intermediate knowledge, creating a reusable block manually in WordPress Gutenberg editor would be like a walk in the park for you. Let’s get started

How to create reusable blocks manually?

Gutenberg doesn’t allow you to reuse a regular block. Therefore, to reuse a block, you need to create a reusable block. Creating a reusable block is fairly easy and quick. To create reusable blocks manually, follow the given steps-

  1. Create a new post or edit an existing post and insert a block by clicking on the add new block icon. Just for the sake of this article, I will be creating a CTA block. Add and edit your content the way you want.
  2. Now, click on the three dot menu given on the top of the block toolbar and click on the Add to Reusable Blocks option.
  3. Now, give it a name for your convenience. I am going to name it as example CTA. ensure that the name you pick is suitable and makes the future use easy.
  4. Lastly, click on the save button and the reusable block will be created.

You have successfully created a reusable block.

How to add a reusable block to other WordPress posts manually?

To add a reusable block to other WordPress posts manually, follow the given steps-

  1. Create a new post or edit an existing post where you want to insert your saved reusable block. In the Gutenberg editor, click on the add new block option and you will see the Reusable tab given at the bottom. This tab is automatically created when you create or save a reusable content block.
  2. Under this tab, you will see the list of saved blocks. If you have a long list of saved blocks, you can even search for it with its name.
  3. Click on the block you want to insert and use into your post.

That’s it. You have successfully added a saved reusable block.

How to Create Reusable Blocks in WordPress Gutenberg Editor using a plugin

In the above section, I have explained how you can create, import and export a reusable content block in WordPress Gutenberg block editor. If you are a newbie and find that method overwhelming, there is another way to do it easily. There is a plugin for almost every WordPress task. Therefore, you can use a plugin to automatically create, import and export . If you are a beginner WordPress user with little knowledge, creating a reusable block automatically in WordPress Gutenberg editor using a plugin would be the best option for you. Since we are at it, I would like you to recommend two following plugins. They are specifically designed to create, import and export reusable blocks. All you need to do is install the plugins and they will take care of the rest!

Block Lab

Block lab

Block Lab plugin allows you to take advantage of all the great features of Gutenberg block editor. It is a well-documented plugin that opens up a whole new world for the way you build pages, posts, and websites on WordPress. It is one of the most popular plugins used for creating, managing, im port, and export reusable blocks. With the Block Lab plugin, harness Gutenberg and build custom blocks without any prior experience with WordPress content editor. Moreover, you can implement a custom design or deliver unique functionality using it. Furthermore, this plugin helps you remove your dependence on other plugins. Therefore, it eliminates the issue of site bloating due to excess plugins installed on your WordPress site. Some of its key features are as follows-

  • Intuitive experience since it allows you to work with WordPress editors.
  • Plugin does all the heavy lifting for you.
  • Clean coding and inline documentation makes it a developer-friendly plugin.
  • Easy management of your growing list of available fields.

Lazy Blocks

Lazy Blocks

Lazy Blocks is another open source and free plugin available for creating, importing, and exporting reusable WordPress content blocks. It is the most preferred visual constructor for WordPress users. Moreover, WordPress users can create  custom blocks and custom meta fields with output HTML. Moreover, add editor controls to your blocks using a drag-and-drop visual constructor. furthermore, it allows you to create post templates with predefined blocks.

Some of its key features are as follows-

  • Allows you to create custom blocks with meta custom fields
  • create custom blocks with output HTML code.
  • Offers multiple output methods such as custom PHP, template files in theme folder, and custom HTML+Handlebars
  • Endless controls available

To create reusable blocks from WordPress Gutenberg Editor using a plugin, start by installing and activating the plugin on your WordPress site. Now on your left side menu bar, you will see the name of the plugin you installed (Block Lab or Lazy Blocks). Click on it and click on Add new link on the top of the content editor. Start by giving the block a name in the Enter block name here field > Now set the properties> click on the publish button to create reusable blocks using plugin.

How to export reusable blocks?

  1. Open the block management page. To open the block management page, click on the Manage All Reusable Blocks link given inside the Reusable tab in your Gutenberg editor.
  2. Click on the ‘Export as JSON’ link given below the respective block.
  3. Next, your reusable block will be downloaded to your computer as a JSON file. You can upload this JSON to any WordPress site.

How to import reusable blocks?

Gutenberg allows you to import and export reusable blocks to use your blocks on other sites as well. To import or export a reusable block manually, follow the given steps-

  1. Similarly, to import, Open the block management page. To open the block management page, click on the Manage All Reusable Blocks link given inside the Reusable tab in your Gutenberg editor.
  2. After getting to the block management page, you will see various options including edit, delete, export, and import. Go to the reusable blocks page on your editor and click on Import from JSON button given on the top of the page.
  3. Next, you will see a file upload box. Click on the Choose File button and select the block JSON file you have saved for later use. Click on the import button to upload the reusable block on your WordPress editor.
  1. WordPress will now add your imported block in the database for later use.

That’s it. You have successfully imported/exported a reusable block.

Conclusion

WordPress offers a useful feature of reusable blocks to speed up your content creation process while standardizing the content across your website. Just create a lock and reuse it as many times as you want. Moreover, you have two methods to create and manage your reusable blocks. Use the manual method if you feel comfortable getting our hands dirty. In fact, it is an easy and suitable method for anyone familiar with the WordPress content editor. Using Gutenberg to create and manage reusable blocks is a no-brainer. Plus, you will avoid installing and activating yet another plugin on your site that can further bloat your website.

On the other hand, if you are a fairly new WordPress user and don’t feel comfortable using the manual method, you can go for the automatic method. We have also put a quick recommendation of two most popular plugins used for creating and managing reusable blocks. Moreover, they are developed using clean and best standard code to help. Therefore, it will not bloat your website and will serve the purpose as well. This comprehensive step-by-step guide will help you with both the methods. For more such tutorials, check out our blog. You can also subscribe to us for regular updates.

Hopefully, this step-by-step guide will help you create, manage, export, and import reusable blocks. If you have any query or just want to share your experience, please comment below. We love to hear from our readers!