Gutenberg editor has been part of the WordPress bundle since version 5 was launched in 2018. Ever since Gutenberg block editor was introduced as the default WordPress editor. Web developers have been both amazed and confused by its new features.
Gutenberg brought in lots of changes to how you create, edit, and manage posts, pages, and every other element and aspect of a webpage. While the learning curve presented by Gutenberg is quite small, surprisingly many are not aware of some of the coolest features and capabilities it provides to make web development efficient and easy.
The ability to import and export Gutenberg blocks is one such feature you need to try out today. Once you get the hang of it, you will notice how useful it is to reuse and efficiently manage your web development efforts.
Here is a simple guide to get you started with the import/export feature available in Gutenberg editor.
How Gutenberg Layout Works
Let’s start with the basics. Every content on a web page created or edited with Gutenberg is divided into individual blocks. There are many varieties of blocks available, each serving a particular purpose or design need. Gutenberg also provides some readymade blocks that can be added to the web page as a template and modified to suit your needs.
For instance, you need to add an image block to add media to your page and a paragraph block to add textual content blocks. You can create a wide range of web elements like lists, galleries, popups, and modals from respective blocks.
By editing the formatting and style options, you can redesign these blocks as per your web design. Blocks can be dragged and dropped to, reordered, changed in size and alignment, and arranged in a certain way to create a new layout.
Gutenberg has many interesting features like Word document to WordPress conversions, block navigation, drop cap, content structuring, reusable blocks, and so on to make your website developing more fun and less frustrating.
Importing and Exporting Blocks
Gutenberg has simplified the web building task with the help of blocks. So, it makes sense to be able to reuse these blocks in other web pages and sites as and when required.
For instance, if you had created a contact form block with all the necessary functionalities, you would want to reuse it on another website of yours. Earlier you would have to either copy-paste the entire code or create the same element from scratch for the second website as well. But by being able to export blocks from one page and then importing them into another page, you save a lot of time and leave no room for errors.
This also comes in handy when you want a certain block from a free third party theme to be included in your webpage. If the theme is Gutenberg compatible, you can simply export the particular block you like from the theme and import it to your webpage.
Thus, Gutenberg makes it extremely easy to reuse styled blocks across web pages. Doing so doesn’t even require you to be proficient in programming.
Steps To Export And Import Gutenberg Blocks
Exporting a Gutenberg block can be done with just a few button clicks. The very first step to making use of this feature is to enable the block to be a reusable block.
Step 1. Mark The Block As A Reusable
When you select a block to be exported, you have to save it as a reusable block. So start styling your block and once done with the styling, save it. While saving it, you can add it to the reusable blocks list.
One way to do so is to click the three dots on the ToolBar and then clicking the Add to Reusable Blocks option from the drop-down.
A save dialog box will appear. Give an appropriate name to the block and click on save.
Step 2. Access Reusable Block Manager
You can access the reusable block manager by searching for ‘Reusable’ under the regular Add Block page you get after clicking the Plus sign.
You can also the reusable block manager page by clicking on the three dots on the top right toolbar.
This page lets you view all the available reusable blocks and create new blocks as well.
Step 3. Export Gutenberg Block As JSON
You may be wondering how such a cool feature is not as popular as it should be. It is because the option to export is hidden and it appears only on cursor hover over the block.
To view the block export option, just place the cursor over the block name you want to export. You will be shown options like edit, trash, and export as JSON. Click Export block as JSON. The block with all the styling and content will be downloaded in the format of a JSON file.
Download the file to any preferred location in your computer drive.
Step 4. Import Gutenberg Block
To import a block, you should have the previously exported block in the form of a JSON file. This step is only necessary if you want to reuse the block on a different site. If the block has to be reused on the same site, you can simply add it from the Reusable Blocks Manager. Web Design SIM, for instance, reused their blocks on the same site using Blocks Manager.
As for importing from a JSON file, the steps are:
- Access the Manage All Reusable Blocks area
- Click the Button Import From JSON. You can find the button on the top of the page near the Blocks title area.
- Click Choose File Link on the popup, select the JSON file to be imported and click the Import button.
- You can now see the imported block in the list of reusable blocks once the import is complete. You can refresh the page to see the updated list.
Step 5. Make Use Of The Imported Block
Once the block has been successfully imported, it can be used just like any other block you already have access to.
Click the Plus sign to add a block, search for reusable blocks, and select your imported block from the list. You can also search by the name of the imported block.
Do remember to install and activate any related plugins when you import a block.
If you had previously used a plugin with a particular imported block from another site, you will have to install the same plugin in the new site as well. Otherwise, the block may not be able to function properly as you expect it to.
Reusing web blocks on WordPress websites has never been this easier. As Gutenberg follows a nest coding style and best practices, you can be assured that these native WordPress blocks are the best when it comes to the optimized performance of your web pages. You can also try to use Gutenberg compatible themes and plugins to make sure block imports and exports are smooth and hassle-free.
So, build your website now, and make the best use of Gutenberg blocks like a pro.