Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Import / Export Your WordPress Gutenberg Blocks (2 Steps)

We manage multiple WordPress sites, so we know how tedious it can be to rebuild the same Gutenberg blocks over and over again. We used to waste hours copying and pasting content between sites until we found a better way.

After years of working with WordPress and helping beginners through WPBeginner, we’ve discovered that importing and exporting Gutenberg blocks is one of the most underutilized time-saving features in WordPress.

Let us show you our simple two-step process for transferring your Gutenberg blocks between sites. This method works perfectly whether you’re a blogger looking to reuse content or an agency managing multiple client websites.

How to export your Gutenberg blocks

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 pattern in WordPress.

Create a pattern 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 or pattern. With that done, head over to the Appearance » Patterns page from the WordPress dashboard.

You will now be taken to a new page where you can easily manage all the reusable patterns on your WordPress website.

Here, you can edit, delete, import, or even export your blocks to another website. Simply hover over the block you want to export, and then click on the ‘Export as JSON’ link when it appears.

Exporting a WordPress block as a JSON file

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.’

Choose file to import block in Gutenberg

You can now select the JSON file you downloaded earlier.

After that, click on ‘Import.’ WordPress will now import the reusable block.

However, if you use a block theme, then the process will be a bit different. In that case, visit the  Appearance » Editor page from the WordPress admin sidebar.

This will open the full site editor, where you must click the ‘Patterns’ tab in the left column to expand it.

Choose Patterns tab

On the new screen, switch to the ‘My Patterns’ tab and select all the reusable blocks that you have created using the check box below.

After that, click the ‘Export as JSON’ link to export these blocks.

Click Export as JSON

Now, to import these blocks into another website using the full site editor, open the FSE and head to the ‘Patterns’ tab.

Then, click the ‘Add New Pattern’ button. This will open a dropdown menu from where you can select that ‘Import Pattern From JSON’ button.

Go ahead and choose your downloaded file to import the reusable blocks.

Click Import Pattern as JSON

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:

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

10 CommentsLeave a Reply

  1. 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

  2. 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.

  3. 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

  4. 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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.