How To Import And Export Blocks From The WordPress Gutenberg Editor

As we have already discussed in this blog, the main feature of Gutenberg block editor, which replaced the classic editor of WordPress as of version 5.0, is that all the contents of posts and pages are made up of blocks.

A title, fragment of text, an image, an embedded video, etc. , are pieces or blocks that together form the content of any post or page of your website. Although the block editor still needs improvement in some aspects, you get used to it quite quickly and soon you can see its advantages with respect to the classic editor. The ability you now have to insert attractive elements and designs in your websites without adding a single line of code compensates some of the problems that still need to be fixed.

Even if the blocks you have by default with the block editor are not enough, you can always add block plugins that will greatly increase your design capabilities. In addition, you also have the option to create your own custom block styles and contents and reuse them throughout your website.

And precisely related to reusable blocks, another great functionality included in Gutenberg is the power to import and to export your custom blocks to other websites. You’ll see, as I explain in this post, that it’s very easy. But let’s review first, very quickly, how we created a reusable block.

Create a Reusable Block

The WordPress Block Editor comes with “reusable blocks”, a feature that allows you to define one specific block or a combination of blocks to be saved and reused anywhere else on the site.

For example, in the pages where you describe your products, it is very common to incorporate a call to action section where you invite your customers to try your product or service. Something like this:

If you want to reuse the previous block in more than one page or even in different posts, you need to create a reusable block as shown in the following screenshot:

And that’s it! You now have a new reusable block, just as I explained in the post about how to create reusable blocks.

Next, let’s see how to export and import reusable blocks so that you can use them not only in any page or post, but in any other website.

Nelio Unlocker

Switch to WordPress safely while keeping your design and content

Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.

Try It Now

Export A Block To Use In Another Site

To be able to export a block, we must first access the screen where all reusable blocks are listed. To do this, click on Manage All Reusable Blocks that you’ll find in the Reusable section of the block list.

Or you have the option to access the list of reusable blocks from the option Manage All Reusable Blocks found in the upper right menu in the three-point icon, Show more tools & options.

On the block management page, you’ll find a list of all the blocks you have created. There you can edit or trash any of the reusable blocks that you have created.

But as you can see in the list of blocks, you also have the option to Export as JSON.

Clicking this option will download a JSON file on your computer. Don’t worry if you don’t know what I’m talking about. Surely you have heard of the programming language JavaScript, which is a programming language interpreted by browsers that can improve the user interface of a website and dynamize it by performing complex activities. JSON stands for JavaScript Object Notation and is a lightweight, fast, and easy to analyze text format for data exchange between a server and a web application based on a set of JavaScript, but which is completely independent of it.

As I said, and leaving aside technicalities, you will have downloaded in your download folder a file with the name of the reusable block and the JSON extension.

If you look at the contents of the file with any text editor, you will see that it simply contains the description of the reused block.

Import The Block Where You Want To Use It

As you can imagine, the next step is very simple. In the place where you want to reuse the block that you had exported, you only have to do the reverse process.

First, you must access the option Manage All Reusable Blocks. But note that in the new site, if you didn’t have any reusable blocks created yet, the Reusable blocks tab doesn’t appear in the block library. This will only be available when you have created a reusable block.

So the only option to access reusable blocks is through the sidebar option that is always visible so you can go to the list of reusable blocks.

Initially, you’ll find the list of reusable blocks empty.

Click Import from JSON.

Select the JSON file that you had previously exported and click Import.

You will soon see: Reusable block imported successfully! But to view it you may need to refresh the page.

And that’s it! Now you can insert the imported block in your website in the post or page you want.

As you see, reusable blocks in WordPress are a great tool to be much more productive in creating websites.

And if you’ve found this post useful, don’t hesitate to sign up for the content creation course with the Gutenberg block editor, where you’ll learn all the tricks to master this WordPress editor.

Featured image of Leone Venter in Unsplash.