The WordPress editor allows you to save your content as custom blocks and then export them to another WordPress website. This can save you a ton of time if you own multiple sites or create websites for clients.
At WPBeginner, exporting and importing content editor blocks has been super helpful. We share custom blocks with our other brands so they can improve productivity and content workflows.
In this article, we will show you how to easily export your WordPress Gutenberg blocks and import them to use on other sites.
Why Import / Export Your WordPress Gutenberg Blocks?
The WordPress block editor allows you to add content as blocks and then customize those blocks. For example, you might create a call to action using the Buttons block.
You can then make that button stand out by changing its background color, making the text bigger, and more. If you plan to use this content again, then you can save it as a reusable block in WordPress.
However, you can also export these reusable blocks and then use them on other websites. This can save you a ton of time and effort if you own multiple sites or you are a WordPress development agency that creates sites for clients.
With that being said, let’s see how you can import / export Gutenberg WordPress blocks.
How to Import / Export Your WordPress Gutenberg Blocks
If you haven’t already, then you’ll need to save the content you want to export as a reusable block. With that done, click on the ‘+’ button inside the WordPress content editor.
In the panel that appears, select the ‘Reusable’ icon.
You can then click on ‘Manage Reusable blocks.’
This takes you to a screen where you can see all your reusable blocks.
Simply hover over the block you want to export, and then click on the ‘Export as JSON’ link when it appears.
WordPress will now download the block to your computer as a JSON file.
To import the block into another WordPress blog or website, log in to that site and open the content editor. Then, follow the same process described above to open the block management screen.
This time, click on the ‘Import from JSON button’ instead. In the popup that appears, select ‘Choose file.’
You can now select the JSON file you downloaded earlier.
After that, click on ‘Import.’
WordPress will now import the reusable block.
With that done, you can use the imported block on your WordPress website in exactly the same way you use any other reusable block.
Additional Resources on WordPress Blocks
Here are some more useful guides on using and managing WordPress blocks:
- How to Use the WordPress Block Editor (Gutenberg Tutorial)
- How to Create a Custom WordPress Block (Easy Way)
- How to Bulk Convert Classic Blocks to Gutenberg in WordPress
- Best Gutenberg Blocks Plugins for WordPress (Super Useful)
- Best Gutenberg-Friendly WordPress Themes
- Ultimate Blocks Review: Is It the Right Blocks Plugin for You?
We hope this article helped you learn how to import/export your WordPress Gutenberg blocks to use on other websites. You may also want to see our guide on how to remove a block in WordPress and padding vs margin comparison.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Birgit Pauli-Haack
Last summer, “Reusable blocks” have been renamed as “Synced Patterns”
WPBeginner Support
Thank you for sharing this while we work on updating our articles
Admin
Dennis Muthomi
Thank you for this clear, straightforward article.
I had always ignored the “Export as JSON” option, because I thought it was made for developers.
After reading your post, I now understand how this feature lets me easily reuse blocks across different WordPress sites.
WPBeginner Support
Glad our guide was helpful!
Admin
Dennis Muthomi
And how can I import element blocks on page builders like SeedProd?
WPBeginner Support
You would need to check with the support for the specific page builder for if they allow you to import blocks from this method.
Thomas
Exactly where IS the ‘Block Management Screen?” I can’t find it anywhere.
WPBeginner Support
It should be visible when you click the + icon to add a new block.
Admin
Alan
Hello,
Great information. Thanks for sharing.
I have a question…
Is it possible to export an entire page made up of many blocks? I can do this in Elementor and use this feature all the time.
Thanks in advance
WPBeginner Support
You could export a page using Tools>Export and import it on to a new site if that’s what you mean.
Admin