How to import and export Gutenberg blocks

How to import and export Gutenberg blocks

Abbey Fitzgerald's Layout avatar

When it comes to new web design projects, clients always seem to reach out at the same time, creating a wave of new project opportunities. It’s great to be busy, but with the increased workload, it also becomes very important to work efficiently. The good news is that the Gutenberg Editor has certainly made creating content much easier.

In a recent project, I had a chance to give these blocks a go and found that Gutenberg makes it really easy to create custom content, and really easy to repurpose that content. This was a huge timesaver for me. 

When working on the content strategy for one website, you’ll most likely find yourself using the same type of content on another site. The Gutenberg editor allows you to create reusable blocks that are easily exported, so you can repurpose a style for your other WordPress sites.

Working with a reusable content block in Gutenberg

With this powerful feature, content designers can simplify their workflow by repurposing Gutenberg blocks. This is particularly useful when working on multiple WordPress sites, because you save can save block styles instead of recreating them (which will save you a bunch of time).

To get the most out of Gutenberg, it’s important to be familiar with the process of creating a custom Gutenberg block. When working with pages and posts, you’ll use these custom blocks to create the layout of your content. If you need to do some rearranging, they’re easy to add and move around. 

When multitasking between different sites, you’ll want a more streamlined experience when creating site content. Things like social media links, pricing tables, contact information, etc. are things that come to mind when thinking of standard elements. The good news is, each content type only has to be created once and then it can be reused on all of your sites! 

This became especially useful in a recent project. I found myself needing the same type of company summary information after each blog post. 

Search for “Reusable” and you should see a link to “Manage All Reusable Blocks.”

When I was first introduced to the new block editor, finding the reusable blocks was something I didn’t catch onto right away. Go into a Post and click the “plus” sign to add a new block. Search for “Reusable” and you should see a link to “Manage All Reusable Blocks.” This will take you to the block management page, where you’ll see any existing reusable blocks you’ve made and can also create new ones. 

How to export a reusable Gutenberg block

It’s pretty easy to work with reusable blocks within a single WordPress site. When you want to use a block on a different WordPress site, you can think of it as a way of creating a template. 

Step one: Export the block

You can access your site’s list of blocks in one central place, on the block management page. (The same page from the last section.) This is where the exporting process will begin.

Click the “Export as JSON” option below the block to get started.  

Step two: Work with the JSON file

It won’t take long to download your block, which will be in the format of a JSON file. I have it set to go to my Downloads folder, but you can choose whatever location on your computer makes the most sense for you. 

It was created as an HTML block, and you can see that in the JSON file when you open the file in a text editor.

Step three: Use the JSON file on another site

Next, log into the WordPress site where you want to import that block. It’s a very quick process to upload this JSON file, so you’ll be using the new block in no time!

Again, navigate to the block management page. In this example, I’m working with a site that didn’t have any existing reusable blocks, so it’s empty.   

Look for the “Import from JSON” button.

On this block management screen, you’ll see the “Import from JSON” button at the top. 

A standard file upload box will pop up. Choose the JSON file that you downloaded in the last step. 

Choose the JSON file that you just downloaded.

That’s it! The new block has now been imported and saved to the new site’s database. If you can see it in the list, that means it’s ready to use on your site and can now be added to a post or page (or edited). 

After doing this a couple of times, I plan on making multiple block templates and saving them in a central spot. Each time I start a new website project, I’ll import these JSON files so I can start repurposing those blocks right away!

It’s great that WordPress’ reusable blocks are not just restricted for the website they’re created on. This example used is a pretty simple content block, but keep in mind that this strategy of repurposing blocks across multiple sites can work for more complex styles as well. Hopefully the quick process of importing and exporting Gutenberg blocks will save you time when creating content for your WordPress sites!


Perfect your WordPress development workflow!

Developing WordPress sites doesn’t have to be difficult. In fact, with the right tools and some simple software, your development workflow can be downright delightful! From developing locally to taking sites live, we’ve compiled our best tips and tricks for simplifying the process and maintaining sites for years to come.

Ready to streamline your workflow and speed up development? Download the free guide here!

Comments ( 0 )

Join the discussion