How to Import and Export Gutenberg Blocks in WordPress?

In past few years, Gutenberg was the major focus of every WordPress release with the introduction of new blocks or enhancing existing blocks. However, still millions of users stick to old Classic Editor interface due to the lack of knowledge of Gutenberg. There are many beautiful features available with the Gutenberg block editor which every WordPress user should try. And importing and exporting the blocks is one such hidden feature useful for those managing multiple sites. In this tutorial, we will guide you through all the steps so that you can import and export Gutenberg blocks at will and use them across your website and even on other WordPress websites.

Gutenberg Reusable Blocks

Gutenberg allows you to save any of your block as a custom block and export them to use on multiple websites. These reusable blocks are extremely useful and come in handy when you want to insert the same design or content on multiple instances. You can create an affiliate call-to-action section, banner ad, customer review or any other content sections along those lines. Just think about it, why should we reinvent the wheel and build again from scratch if the same thing is already built somewhere else? That’s exactly what we are doing here too. We are essentially just creating a Gutenberg block and making it reusable and then exporting it so that we can use the same block across other WordPress websites.

Exporting Gutenberg Block in WordPress

The first phase of this tutorial will go over the steps involved to set up a Gutenberg block to be reused and then export the block from there.

• Login to your WordPress admin portal and navigate to “Posts > All Posts” menu.
• You will find all existing posts on your site and edit the post which contains the Gutenberg block that you want to reuse across multiple websites.
• Select the Gutenberg content block that you want to import. Or demo purposes, we have created a customer review block using blockquote and show here how to import this block. Feel free to do the same with whichever content block that you want to import specifically for your websites.

• Click on the block so that a toolbar relevant to the selected block will appear. Now, click on the “Block Options” showing as a three dots icon located in the far right end of the toolbar, as shown in the image below.

• Click on “Add to Reusable blocks” once you see the dropdown options.

• Enter a name for your block and in our case, we have just named it as “Customer Review” as an example.
• Open the “Toggle Block Inserter” button located on the top-left of the page next to the WordPress logo as shown in the screenshot below.

• Open the “Reusable” tab and click on “Manage Reusable blocks” link as shown below.

• It will take you to the page where you can view all reusable blocks created on your site.
• Hover over the block that you want to export to find relevant menu items and click on the “Export as JSON” link.
• This will generate a JSON file which you can save it locally on your computer.

Importing Gutenberg Block in WordPress

JSON file is a simple file type to store data structures in JavaScript Object Notation format (JSON) which is a standard data interchange file format. You can use this exported JSON file to import the Gutenberg block on any other WordPress websites.

• Open another WordPress website where you want to import the Gutenberg block and make use of the same design.
• Login to the admin portal of the website, and then hover over “Posts” and click “All Posts”.
• Edit the post where you want to import the Gutenberg block. Alternatively, you can create a new post by clicking on “Posts > Add New” menu.
• To import the Gutenberg block, we’ll have to open the Reusable blocks page. To do so, just click on the three dots(options) icon, showing on top of the editor and then select “Manage Reusable blocks” from the menu. This will prompt you to the Reusable blocks page where you can edit, import, or export reusable Gutenberg blocks.

• Click on “Import from JSON” and select the previously exported JSON file downloaded on your computer.

• Click on “Import” button to upload the file’s content.

• Refresh the page, and you’ll see the uploaded Gutenberg on the reusable blocks list of your website.

Using Imported Gutenberg Block

The next step is to utilize this Gutenberg block and create the same customer review section on this new website.

• Hover over Posts, and then click on “All Posts” once again. Select the post where you want to include the content of the imported block.
• Edit the post and add a new block by clicking on the toggle block inserter button.
• Head over to the “Reusable” tab and select the Gutenberg block that you just imported.
• And there it is, the same Gutenberg content block that we used on the previous website has been implemented on the new site.

You can reuse the content as it is in case of call-to-action or customer review section. However, if you have long text content in the reusable block make sure to convert the block into regular block from the block options and edit the text. This will help to avoid having duplicate content repeated on multiple sites.

Final Words

Creating these reusable custom content blocks make it easy to create content quickly across multiple websites and webpages, whilst also ensuring consistency across the same. As you can see, importing and exporting custom Gutenberg blocks is a relatively simple and easy process. Another great thing is you can easily search the blocks by typing /block-name in a paragraph block. For example, in our case, we can quickly find the imported or original reusable block by typing “/customer review”. You will find the results while typing and also you can find the block under recently used blocks section when clicking on the add block + icon. Furthermore, if you ever need to change the content, you can easily do so, and the changes will be applied to all instances on the site where reusable block is used.