5 Easy Steps To Export And Import Gutenberg Blocks

May 13, 2019 • Blog • Views: 330

5 Easy Steps To Export And Import Gutenberg Blocks-1 (1)

Do you know that you can export and import Gutenberg blocks to other WordPress websites? The new default editor has introduced block-based page building to the users of the open-source CMS. Whether you are converting a site to WordPress or building a new one, you can do so by adding blocks for different content types. The best part is you can create a custom block on one interface and then export it to another. This can be helpful in integrating elements like lead generation forms and call to action buttons. In this tutorial, we will show you how to export and import reusable blocks. However, you must keep a couple of things in mind before transferring the modules. The first is that if blocks were generated through a plugin, it must be activated on the target interface also. Secondly, when blocks are used on different themes, their design will depend on the method of CSS application.

1. Save A Customized Block To Reusable Category

Gutenberg lets people build their own custom blocks which can be used again in the future. A big advantage is that the slabs can be used on other WordPress interfaces as well. However, a block can be exported only if it has been saved in the “Reusable” category. The first step, therefore, is to create a module and save it in that specific section. Take any block and modify it according to your preferences. Once you have complete the styling, click the three dots icon in the toolbar. A new set of options will open up now. Locate “Add to Reusables Blocks” in the dropdown menu and select it.


You will be asked to provide a name for the block being saved. Enter a term of your choice and press the “Save” tab. The customized module will now be saved in the “Reusable” category.Picture2

2. Access The Block Management Page

The new default editor of the CMS has in-built features for exporting custom blocks. In order to transfer the chosen module to another website, we will need to access the block management section. In this section, you will be able to edit and delete the personalized content slabs apart from exporting/importing them. Navigate to the “Reusable” tab in the menu of your editor. Click on it and you will find a link named “Manage All Reusable Blocks”.Picture3 (1)Hit it to open the page with the block management options. This will open a new screen from where you can conduct all the desired modifications. Once you have opened the block manager successfully, move to the next step.

3. Export The Customized Gutenberg Block

In this step of our guide to export and import Gutenberg blocks, we will export our personalized block. On the block manager screen which you accessed in the previous step, you will see a list of reusable modules. However, you will not find any option for exporting the blocks. In order to see more modification options, you need to hover the cursor over an item in the list. Move your mouse over the name of your selected module and you will see some extra links. These options will be visible below the name of the block. The three links which you can see now are “Edit”, “Trash”, and “Export as JSON”. This will download your chosen block to your system in the form of a JSON file. In the next step, we will discuss how this file can be used on another website.



4. Import The JSON File To Another Website

Let’s see how you can access the module with custom styling on another website. For this, you will need to access the admin dashboard of the second interface. Access the control panel of the target website by entering your username and password. Open the Gutenberg editor and as explained in the previous steps go to the “Reusable” section. You will now need to access the block management screen by hitting the “Manage All Reusable Blocks” link. This will open a screen just like the one you accessed in the preceding step. Right on top, you will see a button named “Import from JSON”. Press this tab and you will be asked to choose a file. Locate the JSON file downloaded in the previous step and click “Import”.Picture5

Reload the page and the block will now become visible in the section.Picture6

5. Access The Imported Block In Your Editor

Now, you must access the newly-imported block in the Gutenberg editor to check how it works. Open the editor and select “Add Block”. Scroll down to “Reusables” and open it to locate the imported module. Select it and the block will become visible in the editing screen. You can now check how the content slab is functioning in the new interface.Picture7







6 Professional Dating App


You must now have understood how to export and import Gutenberg blocks to/from other interfaces. This will help in speeding up the development process and improving your efficiency.

Share this Article