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:
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 A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
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.
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.