Exporting and importing Gutenberg blocks in WordPress

Nadejda

· 29th October 2020·Gutenberg

Excerpt

With Gutenberg you have plenty of options when creating amazing posts and pages, without the need of any coding knowledge. It doesn’t matter what content you wish to add, you can use Gutenberg.

Exporting and importing Gutenberg blocks in WordPress

With Gutenberg you have plenty of options when creating amazing posts and pages, without the need of any coding knowledge. It doesn’t matter what content you wish to add, you can use Gutenberg.

Thanks to a number of customisation options available in Gutenberg, you can modify and style each block as you wish.

One of Gttenberg’s brilliant features include reusable blocks. They are actually content blocks which you create, save and after that use whenever you wish.

When you create one reusable block you can use it for your posts, pages, as well as other WordPress websites.

Every time you wish to create more than one website or you need to add specific content so each page or post, you can save a lot of time with Gutenberg reusable blocks.

Today, we will show you how to create and export reusableGutenberg blocks.

Why do you need reusable blocks?

Unfortunately, it‘s not possible to import or export regular books. In order to do this, you need to create a reusable block.

How to create a reusable block?

This can be quite easy. Go to Posts – Add new from your WordPress dashboard where you can launch the Gutenberg editor.

How to create a reusable block

Now, click on Add new and choose your desired content block. For example purposes, we have added the paragraph block, as you can see below.

block

You can then style and customize the block depending on your needs. We have added some text, background colour, and social media links. This is how our reusable block looks like:

customize

Currently, this is a regular book. We now need to convert it into a reusable block which can be imported and exported. To do this, click on More options, then on Add to Reusable Blocks.

Reusable Blocks

Next step, is naming your reusable block. Click Save as shown below.

reusable

And you’re done! You have created your first reusable block.

How to use reusable blocks?

Adding the reusable block, you have just created to your posts or page is very easy. Click on Add block, go to Reusable Blocks, and choose the desired block.

How to use reusable blocks

After you’re done, click on Preview/Publish and check out your results.

Preview/Publish

The best news is you can use this block any time you wish, without the need to creating a new one. You can add it to all post types which support Guttenberg blocks.

How to export Guttenberg blocks?

Once you are inside the editor, go to More Options, click on Manage all reusable blocks, as shown below:

Manage all reusable blocks,

This will lead you to the blocks screen where you can manage all the reusable blocks.

blocks

In order to export the block hover with the mouse over the title and click on export as JSON link.

json

Now, save the file to your computer.

save the file to your compute

How to import Guttenberg blocks?

The first thing you need to do is go to the Gutenberg editor. Click on More tools and options, and then on Manage all reusable blocks.

Guttenberg blocks

You will then see the blocks screen, from where you need to click on Import from JSON, select the file you downloaded earlier and click on Import.

JSON

You have successfully imported this reusable block to your other WordPress site.

imported

Can I use plugins for exporting Gutenberg blocks?

One reputable plugin which you can use is Blocks Export Import. This plugin allows you to skip this whole tutorial. You don’t even have to create reusable blocks.

After installing and activating the plugin, Open the Gutenberg editor. Design your block any way you wish then click on More options. Next, go to export JSON, as you can see below.

exporting Gutenberg blocks

This will download the file to your computer. To import the JSON file with the help of the plugin, go to the Guttenberg editor. Click on Add block, and then on Import blocks from JSON, located in the Widget tab.

import plugin

Select Choose file and click on Upload.

Upload

Only issue you might encounter with the plugin method is that it will not save the blocks to your WordPress site. If you wish to save the blocks in your database, you need to use the manual method.

Conclusion

Reusable Gutenberg blocks are a game changer. With their help you can replicate features and templates quickly and efficiently. If you often create new pages and posts, learning how to export these blocks would be quite useful.

Nadejda
Nadejda Milanova

Get 10% off your order

UYD-772-MK5

Enter UYD-772-MK5 at the checkout to get 10% off one-time tasks or any maintenance plan.

Get started