Did you know that you can export your personalized content blocks using WordPress’s new Gutenberg block editor and use them on other WordPress sites? Particularly if you’re creating websites for clients, this nifty little feature can come in very handy and save you a lot of time. So, in this article, we will show you how to import/export Gutenberg blocks.
But, before we get into that, let’s clear some basics first. So, what is the Gutenberg editor? What are Gutenberg blocks? And why would we need to import/export Gutenberg blocks? Let’s find out.
What is Gutenberg Block Editor?
Gutenberg, also known as the WordPress block editor, replaced the WordPress TinyMCE-based Classic editor as the default editor in WordPress 5.0 and later versions. It made its first appearance in WordPress 5.0, which was released on December 6, 2018.
Gutenberg is a block editor that relies heavily on the concept of blocks to create beautiful layouts. Every site element is an individual block, and Gutenberg allows you to quickly insert, update, and rearrange each content block even if you have no technical or coding experience.
With Gutenberg, you can create beautiful designs for different sections like the hero section, about area, etc., and even full-page layouts. The possibilities are endless. In short, Gutenberg provides a block-based editing system that makes generating rich content for your website and pages easier and simpler.
What are Gutenberg Blocks?
As we said earlier, with Gutenberg, everything is a block, including all the different site elements. For instance, there are blocks for headings, paragraphs, images, galleries, buttons, forms, and many more. You can drag and drop these blocks to add them to a webpage and customize your content.
Gutenberg comes with a wide array of feature-rich blocks out of the box that you can use to create stunning-looking websites. It allows you to insert, rearrange, and style your content however you want. Gutenberg arranges its blocks into multiple categories for easier access. We get six categories out of the box; however, there are numerous block library plugins to extend the default blocks set of Gutenberg.
Some of the default Gutenberg blocks include:
- Text: Paragraph, list, heading, subheading, table, classic editor, quotes, shortcodes, and more.
- Media: Image, video, gallery, audio, and other forms of media are under the media section.
- Design: Buttons, columns, rows, spacer, table of contents, and so on.
- Widgets: Archives, calendar, most recent posts, comments, etc.
- Theme: Includes theme elements like site title, tagline, navigation, posts list, query loop, and more.
- Embeds: Embeds from social media sites like YouTube, Facebook, Twitter, WordPress, etc.
So, basically, you can add anything you can think of in a blog post, article, or web page using Gutenberg Blocks. This brings us to the next question, why do we need to import/export Gutenberg blocks? Let’s find that out.
Why may we need to import/export Gutenberg Blocks?
So, basically, Gutenberg allows you to save content blocks by exporting them as JSON files which you can later import to any other WordPress website. Just this nifty little feature can potentially boost your productivity manifolds.
With Gutenberg, you can easily import/export blocks between WordPress sites by just following a few simple steps. You no longer need to recreate similar blocks for each website and instead reuse the ones you have already created. That way, you will be able to save a lot of your time.
In simple words, importing and exporting blocks this way simplifies the entire website creation process. Following are some advantages and scenarios in which reusing blocks can be time-saving:
- You can avoid repeatedly creating similar blocks. You no longer need to copy the contents of a block and then and then paste them into a new post or page every time.
- Reusable blocks are excellent for adding content to articles at their beginning or end.
- Many websites need call-to-action text and buttons, so you may create a personalized call-to-action button and reuse it on any WordPress site.
- You can easily reuse tables via a simple import/export because creating a table from scratch each time is somewhat complicated.
- Import/export survey forms to use on multiple WordPress sites.
I hope this gives you a good sense of why importing/exporting Gutenberg blocks can be really beneficial while creating WordPress websites. So, let’s now get into the process of how we can import/export Gutenberg blocks.
How to Import/Export Gutenberg Blocks?
Before we can import/export Gutenberg blocks, we need first to create some reusable blocks as we cannot directly export blocks from the editor. So, let’s first start with creating a reusable block.
Step 1: Creating a Customized Reusable Block
Go to the Post Editor, and insert a new Gutenberg Block by clicking on the (+) icon. Once you have added a block, you can go ahead and make your changes(add content or change color) to the block. After you’re done, click the three dots icon that appears above the block you have just created. You will see the Add to Reusable Blocks option in the menu. Click on it as shown in the screenshot.
A new dialog box will appear, prompting you to give the block a Title/Name. Once you have given a name to the block, hit the Save button.
That’s it. Your reusable block is created and ready for future use. For further details about creating and managing reusable blocks, check out our dedicated guide on creating reusable blocks in Gutenberg.
Step 2: Accessing Manage All Reusable Blocks
Once you have completed the previous step, go to your Post Editor and select the Add New Block option. You will see that a new Reusable tab is now visible. Under the Reusable tab, simply select the Manage All Reusable Blocks option to redirect to the Reusable Blocks page in the Admin Dashboard.
On the Reusable Blocks management page, you can view every piece of content you’ve saved from the Gutenberg Editor.
Here, you can modify the reusable blocks you’ve created, and with just a few clicks, you will have the opportunity to import/export your content. If you see closely, we have a button labeled Import from JSON. So, what is JSON? Let’s find that out first.
What is a JSON FILE?
Let me explain what a JSON file is if you’re not a programmer like me. JavaScript Object Notation or JSON is a computer language used to enhance a website’s user interface. Browsers interpret it to display dynamic content to the user. JSON is a quick and simple language format to understand when exchanging data with the server via a JavaScript-based Web application.
See, JSON is not rocket science. It is an easy format to transfer files. Let’s move ahead to know how we can import/export Blocks via the JSON file.
Step 3: Export Gutenberg Blocks
To export a block, you must first go to the Reusable Blocks page, where all reusable blocks are listed. Here, you can edit, delete, import, and export your Gutenberg blocks. To export a reusable block, hover over the desired block and choose Export as JSON. Your JSON file will be downloaded shortly after.
Step 4: Import Gutenberg Blocks
The subsequent step is simple. In the Gutenberg editor, click on the (+) icon, which will reveal the list of all the available blocks. Go to the Reusable tab and click on Manage Reusable Blocks. It will take you to the Reusable Blocks page, where you can manage all the reusable blocks you have created.
Here, you will see the Import from JSON button right next to the Reusable blocks heading. Clicking on the button reveals a popup that asks you to upload a file. Click on the Choose File option, and upload the JSON file that you downloaded earlier. Now click on the Import button to start importing the block from the JSON file.
Please note that you might need to reload the page after seeing the Reusable Block Imported Successfully message to see the block in the list. That’s all, then! You have now successfully imported a Gutenberg block into another WordPress website. After that, you are free to use and reuse these blocks wherever you like.
Import/Export Gutenberg Blocks using a Plugin
We get that manually importing and exporting Gutenberg blocks is a tedious process. So, are there plugins to export Gutenberg blocks, you might wonder? Turns out, yes, there is one. ThemeIsle, one of the most popular WordPress developers, has created a free plugin called Blocks Export Import to make exporting/importing blocks easier. The plugin essentially lets you skip the entire tutorial. That means you don’t even need to create reusable blocks.
Step 1: Install the plugin
From your WP Admin Dashboard, go to Plugins > Add New. In the search bar at the top-right of the screen, type blocks export import. Look for the Blocks Export Import plugin and click on the Install Now button to install the plugin. Once the plugin is installed, click on the Activate button to activate the plugin on your site.
Once the plugin has been activated, go to Plugins > Installed Plugins from the Admin Dashboard. Hover over the plugin you just installed, and click on Settings. There, you will find all the configuration settings for the plugin.
Step 2: Import/Export Gutenberg Blocks
Now. open the Gutenberg editor and create your block however you like. Afterward, click on the Three Dotts icon to reveal a sub-menu. In the sub-menu, you will find a new entry Export as JSON. Click on it, and your JSON file will start downloading.
Now, go to your second WordPress website and also install the Blocks Export Import plugin there. After that, open the Gutenberg editor and click on the (+) icon to add new blocks. Find the Import Blocks from JSON block and drag it to the page area to add it to your webpage.
Once the block is added to your webpage, click the Upload and Choose the JSON file you have recently downloaded. This will upload the contents of your JSON file to the block.
That’s it! That’s how easy it is to import/export Gutenberg blocks using the Blocks Export Import plugin. Similarly, you can create, import, and export as many blocks as you wish.
Conclusion
All in all, importing and exporting customized Gutenberg blocks is very speedy and straightforward. Creating these reusable custom blocks makes it simple to reproduce content for many websites and webpages while guaranteeing consistency throughout. Additionally, if you ever need to update the content, you can do it quite effortlessly, and the modifications apply to all instances of the reusable blocks on the same site.
To sum up, in this article, we have learned the different ways to import/export Gutenberg blocks. We started off by creating custom reusable blocks. Then we saw how we can manage all the reusable blocks in one place. Next up, we went on to export the blocks from one WordPress website and then import it into another. Lastly, we saw how we can import/export blocks using a simple plugin which makes the process more quick and intuitive.
We hope this article was informative and showed you how to quickly export and import Gutenberg blocks. Have you already started making your own reusable Gutenberg blocks? How do you find the experience? Let us know in the comments below.
Moreover, if you liked this article, you might also be interested in the following guides: