How to Import and Export Gutenberg Blocks

Import and Export Gutenberg Blocks

Do you know that the new blocks from Gutenberg is reusable? Yes, you can reuse the blocks in the updated version of WordPress. Today I’m going to show you how to reuse the Gutenberg blocks.

So, from the last WordPress update you can see that Gutenberg block editor is set as default editor. With the changes of time this block editor has added some advanced feature. Now you can use your blocks later on your site or another site.

What is reusable Gutenberg Blocks?

You can Import and Export your Gutenberg Blocks easily. This reusable Gutenberg blocks lessen the time to reuse a special section of your site frequently. The Gutenberg blocks can be used for a call-to-action in any place of your blog post, testimonial, widget area, feedback, header, footer etc.

Now lets see how to import and export Gutenberg blocks.

Step 1: Save your blocks to use later

If you want to use a block later on WordPress, then save the blocks giving a unique name. For this, when working on a blocks click on the three dot icon above your block (see the screenshot below).

There will be a window from which click on Add to Reusable Blocks.

 

Add to reusable blocks

 

Now, input the block name in text field and save the changes.

 

Save as reusable blocks

 

So, your block is now saved as reusable which you can use as a template later.

Step 2: Export your Gutenberg block

To export a block click on the (+) sign of your blocks left to your page. From there click on Reusable.

 

Export reusable blocks

 

Now, a window will appear, from where you can search blocks or click on Manage All Reusable Blocks button.

 

Manage all reusable blocks

 

You can see all the blocks you have saved before. Click on the block which one you want to Export.

 

Export blocks as JSON file

 

Hovering mouse on the blocks you can see the Edit, Trash and Export as JSON option. Click on Export as JSON to export the blocks. From your downloaded folder see the JSON file.

Step 3: Import Your Gutenberg Blocks

To Import blocks from your HDD navigate to block section (see the first two images of Step 2). Then click on Import from JSON button. A small window will appear from where click on Choose File Button.

 

Import from JSON

 

Now, choose the file from your HDD location.

 

Choose the JSON file to Import Block

 

Finally, click on Import Button to import your block file.

Click on Import Button

 

And finally you have successfully imported block to your site.

Using this technique you can Import and Export Gutenberg Blocks to another site or reuse the blocks later on your same site. You can also see my previous article on Disabling Gutenberg Editor and Replace Gutenberg Editor with Classic Editor.