How To Import And Export Blocks From The WordPress Gutenberg Editor

Published in WordPress.

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:

Have You Already Done The Content Creation Course?

The Block Editor Explained Step By Step

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:

Add a reusable block
Add a reusable block to the WordPress block library.

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.

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.

Manage all the reusable blocks
Click on Manage all the reusable blocks to go to the list of blocks that you have created.

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.

Manage All Reusable Blocks
Sidebar option to manage reusable blocks.

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.

List of reusable blocks.
List of reusable blocks.

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

In the list of blocks, you have the option to Export as JSON.
In the list of blocks, you 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.

File downloaded when exporting a reusable block to JSON.
File downloaded when exporting a reusable block to JSON.

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.

Content of the cover-with-cta.json file.
Content of the cover-with-cta.json file.

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.

List of type of blocks available
Types of blocks available by default in the Gutenberg editor.

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.

Manage All Reusable Blocks
Sidebar option to manage reusable blocks.

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

Empty list of reusable block
While you have not created or imported any blocks, an empty list of reusable blocks will be displayed.

Click Import from JSON.

Select the JSON file you want to import.
Select the JSON file you want to import.

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

Import JSON file
Import JSON file.

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

List of reusable blocks.
Reusable block imported from another website.

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

Reusing a block
When you position yourself on top of a reusable block, a preview of it is displayed on the right.

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.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.