{"id":139818,"date":"2019-09-05T11:03:07","date_gmt":"2019-09-05T16:03:07","guid":{"rendered":"https:\/\/getflywheel.com\/layout\/?p=36746"},"modified":"2025-11-25T09:43:34","modified_gmt":"2025-11-25T15:43:34","slug":"how-to-import-and-export-gutenberg-blocks","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/","title":{"rendered":"How to Import and Export Gutenberg Blocks"},"content":{"rendered":"\n

Editor\u2019s note: This article was written by Abbey Fitzgerald<\/a> a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

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\u2019s 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<\/a> has certainly made creating content much easier.<\/p>\n\n\n\n

In a recent project, I had a chance to give the editor, also called the Block Editor<\/a>, 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. <\/p>\n\n\n\n

When working on the content strategy for one website, you\u2019ll 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.<\/p>\n\n\n\n

Working with a Reusable Content Block in Gutenberg<\/h2>\n\n\n\n

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). <\/p>\n\n\n\n

To get the most out of Gutenberg, it\u2019s important to be familiar with the process of creating a custom Gutenberg block. When working with pages and posts, you\u2019ll use these custom blocks to create the layout of your content. If you need to do some rearranging, they\u2019re easy to add and move around. <\/p>\n\n\n\n

When multitasking between different sites, you\u2019ll 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! <\/p>\n\n\n\n

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

\"screenshot
Search for \u201cReusable\u201d and you should see a link to \u201cManage All Reusable Blocks.\u201d<\/figcaption><\/figure>\n\n\n\n

When I was first introduced to the new block editor, finding the reusable blocks was something I didn\u2019t catch onto right away. Go into a Post<\/strong> and click the \u201cplus\u201d<\/strong> sign to add a new block. Search for \u201cReusable\u201d<\/strong> and you should see a link to \u201cManage All Reusable Blocks.\u201d<\/strong> This will take you to the block management page, where you\u2019ll see any existing reusable blocks you\u2019ve made and can also create new ones. <\/p>\n\n\n\n

How to Export a Reusable Gutenberg Block<\/h2>\n\n\n\n

It\u2019s 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. <\/p>\n\n\n\n

Step One: Export the Block<\/h3>\n\n\n\n

You can access your site\u2019s 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.<\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

Click the \u201cExport as JSON\u201d<\/strong> option below the block to get started.  <\/p>\n\n\n\n

Step Two: Work with the JSON File<\/h3>\n\n\n\n

It won\u2019t 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. 
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"the
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.<\/figcaption><\/figure>\n\n\n\n

Step Three: Use the JSON File on Another Site<\/h3>\n\n\n\n

Next, log into the WordPress site where you want to import that block. It\u2019s a very quick process to upload this JSON file, so you\u2019ll be using the new block in no time!<\/p>\n\n\n\n

Again, navigate to the block management page. In this example, I\u2019m working with a site that didn\u2019t have any existing reusable blocks, so it\u2019s empty.   <\/p>\n\n\n\n

\"in
Look for the “Import from JSON” button.<\/figcaption><\/figure>\n\n\n\n

On this block management screen, you\u2019ll see the \u201cImport from JSON\u201d<\/strong> button at the top. <\/p>\n\n\n\n

A standard file upload box will pop up. Choose the JSON file that you downloaded in the last step. <\/p>\n\n\n\n

\"screenshot
Choose the JSON file that you just downloaded.<\/figcaption><\/figure>\n\n\n\n

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

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\u2019ll import these JSON files so I can start repurposing those blocks right away!<\/p>\n\n\n\n

It\u2019s great that WordPress\u2019 reusable blocks are not just restricted for the website they\u2019re 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!<\/p>\n\n\n\n

Learn more about creating content with WordPress here<\/a>, or speak to a WP Engine representative<\/a> for answers to your questions.<\/p>\n","protected":false},"excerpt":{"rendered":"

Editor\u2019s note: This article was written by Abbey Fitzgerald a UX software engineer and web designer who loves the art of crafting code. 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\u2019s great to be busy, but with the increased…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":141122,"template":"","resource-topic":[1396,901],"resource-role":[1397,896],"resource-type":[916],"class_list":["post-139818","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Import and Export Gutenberg Blocks<\/title>\n<meta name=\"description\" content=\"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Import and Export Gutenberg Blocks\" \/>\n<meta property=\"og:description\" content=\"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-25T15:43:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/Import-G-Blocks_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/Import-G-Blocks_1200x627.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/\",\"name\":\"How to Import and Export Gutenberg Blocks\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2019-09-05T16:03:07+00:00\",\"dateModified\":\"2025-11-25T15:43:34+00:00\",\"description\":\"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Import and Export Gutenberg Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Import and Export Gutenberg Blocks","description":"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Import and Export Gutenberg Blocks","og_description":"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-11-25T15:43:34+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/Import-G-Blocks_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/Import-G-Blocks_1200x627.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/","name":"How to Import and Export Gutenberg Blocks","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2019-09-05T16:03:07+00:00","dateModified":"2025-11-25T15:43:34+00:00","description":"Simplify your workflow with reusable content. Learn how to import and export your own custom Gutenberg blocks with this informative guide!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-import-and-export-gutenberg-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Import and Export Gutenberg Blocks"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/09\/import-export-blocks-grid-343x245-1.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer","topic":"<strong>Topics:<\/strong> Design, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/141122"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139818"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139818"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139818"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}