Gutenberg has some native features you can make use to streamline your workflow. One of which is the ability to export and import a block. This article will show you how to do so.
Despite the existence of page builder plugins like Elementor and Divi Builder which offer a better page building experience, some WordPress users prefer to use Gutenberg to create pages of their websites. Indeed, you can use Gutenberg to create the core pages of your website, not just blog posts. You can even create a page from a pre-made template just like when creating a page with Elementor and other page builder plugins (Read: 5 Best WordPress Plugins to Get Gutenberg Templates).
Back to our topic. Gutenberg comes with a native feature to allow you to export a block into a JSON file and then import it to be used on another page, be it on the same website on a different website. At the time of writing, the feature only works for reusable blocks. In other words, you need to turn the block you want to export into a reusable block first before you can export it. You can read our previous article to learn how to create a reusable block in Gutenberg.
How to Export a Gutenberg Block
First off, you can create a page using Gutenberg just like usual. Start by adding a block and customize it accordingly. Once done customizing the block, click the three-dot icon on the block settings bar and select Add to Reusable blocks. Give your reusable block a name on the appearing window and click the Save button.
Next, go to the reusable blocks manager page by clicking the three-dot icon on the upper-right corner of the Gutenberg screen and select Manage Reusable blocks. If you can’t see this option, try to zoom out your page (by pressing the Ctrl and – keys if you use Windows).
On the reusable blocks manager page, specify a reusable block you want to export and simply click the Export as JSON link.
A little tip before turning a Gutenberg block into a reusable block and export it. You can put together some blocks as a group block. It will make your work more efficient.
How to Import a Gutenberg Block
As mentioned earlier, you can import the reusable blocks you have exported to another page. Be it on the same website or different website. To import a reusable block, you can go to the reusable blocks manager page as we have covered above. Click the Import from JSON button followed by the Choose File button to select the JSON file of the reusable block you want to import. End by clicking the Import button.
To use the imported reusable block, you can simply edit a page/post using Gutenberg just like usual. Add a new block by clicking the plus button on the toolbar area and go to the Reusable tab. You will see the list of reusable blocks you have created, including the ones you imported, on this tab. Simply click the reusable block you want to use to bring it to the Gutenberg editor.
The Bottom Line
If you prefer to use Gutenberg to create the core pages of your website instead a page builder plugin, you can make use of its native feature to streamline your workflow, including the ability to export and import blocks. With this feature, you can get a page done more quickly. Unfortunately, Gutenberg has no capability to export/import the whole page yet. It would be great to be able to export or import a page. This capability might is about to come on the next releases. Hopefully soon.