Facebook Twitter Instagram
    Facebook Twitter YouTube
    AlienWP
    • Home
    • About
    • Contact
    • Sections
      • Collections
      • Guides
      • HowTo
      • WordPress Themes
      • WordPress Plugins
      • Hosting
      • News
    AlienWP
    Home»Guides»How to Import / Export Your WordPress Gutenberg Blocks
    Guides

    How to Import / Export Your WordPress Gutenberg Blocks

    KaveriBy KaveriFebruary 9, 2020
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Gutenberg Editor Review
    Share
    Facebook Twitter LinkedIn Pinterest Email

    If you are reading this then it is very likely that you are already aware of the Gutenberg Editor and how it has revolutionized the ‘behind the scenes’ editing process of every WordPress websites.

    The reason I am here today is to tell you about a rather neat feature of Gutenberg. The blocks of content created in a website using Gutenberg can be imported from and exported to another website which is must also be built on the WordPress platform. Analyzing the possibilities of this functionality, I can tell that it is a brilliant feature that can improve productivity between sites.


    WPEngine Promo Discount Code Exclusive WPEngine Coupon Code for AlienWP Visitors!
    Get 5 Months Free & 30% Off All Plans.
    Click the coupon code to copy and open the link »

    Click Here for Deal


    Any developer or individual, if involved with more than just managing their WordPress websites, this feature is going to make your life a lot easier. Because with this feature you can move your content blocks across multiple WordPress websites in just a few very simple steps. This will save a huge chunk of your time because now you don’t need to create new blocks for every website.

    So, let’s dive in and show you how easy it is to import and export Gutenberg blocks across WordPress websites.

    Gutenberg Editor 101

    As you already know, Gutenberg is a pure block based WordPress Editor. Gutenberg launched with the fifth update of WordPress and it changed the way content is created in WordPress websites.  

    With Gutenberg, each and every content can be inserted in a separate block. Images, videos, banners, paragraphs, gallery, button, list, HTML, etc. are brought to life via a completely new block. These blocks can be adjusted across the webpage according to the liking of the creator or client. And by adjusting, I do not mean just its placement and alignment. With its amazing customization options, you can have full control over its looks as well. 

    Gutenberg Editor

    These renewable blocks are an excellent time saver when it comes to making multiple blocks for a specific type of content. Imagine that all the pages of your website require a header which is made through Gutenberg means you have to create a header block multiple times. Gutenberg saves the frequently used block for you so that accessibility becomes easy for the developer.

    With such diverse extent of editing and flexibility, each website made using Gutenberg can be potentially unique, robust, rich in content, strategically designed to connect with the users and thus a long term money maker.

    If you want to know more, read our complete guide located here.

    How to Export/Import Gutenberg Blocks

    Gutenberg’s feature list is superiorly exclusive and constantly evolving. For the current set of developers, spending few hours understanding the movement within Gutenberg will do them wonders in the future. However, for the old set of developers who are more accustomed to the Classic Editor, Gutenberg will not be a very pleasing experience at first.

    Editing blocks are not restricted to the theme which it is using for the overall feel of the site. They can be moved among other WordPress themes and remodeled to the suit the new website. So let’s go through the steps to import/export your WordPress Gutenberg Blocks.

    Step 1: Making a Reusable Block

    Gutenberg amongst all its features offers you with this brilliant time-saving feature with which you can create a block and save it to be used later. You can either use this block as it is or with a few edits to make slight or major changes to meet your requirements. All of it is possible directly from your editor. Here is how you can create this block.

    First of all, just create a new block using the ‘+’ sign on your left. Now select the block, add a name to it and save it.

    Import/Export Gutenberg Block

    After that, you can customize the block. Once the customization is completed, just click on the 3 dots on the toolbar and click on ‘Add to Reusable Blocks’ from the dropdown. This will automatically add your block to the reusable blocks group. You can pick it up at any time and use it on any new or old post that you create. Here’s showing you how to do it. 

    Click on the 3 dots on the top right corner of the Toolbar. Select ‘Manage All Reusable Blocks’ from the dropdown menu.

    https://alienwp.com/wp-content/uploads/2019/03/Export-import-gutenberg-block.webm

    Where To Find The Saved Blocks

    When you create a block that can be reused, it automatically gets saved to your list of the reusable blocks. To find them just click on the ‘+’ sign that you use to add a new block. Now You can either select the reusable block by scrolling down the small popup or use the search field to locate it.

    Here are the two ways of doing it.

    https://alienwp.com/wp-content/uploads/2019/03/using-reusable-blocks-in-gutenberg.webm

    To edit a reusable block, you can click on the edit button on the top of the block and customize it as per your needs. However, these changes will not be shown in the block you created earlier. You can save the new block again with another name if you want it to be added to the reusable block list.

    Step 2: Export your Gutenberg Blocks

    The option to export your Gutenberg blocks will be visible to you under the Reusable blocks. Just go to the block management page. Here’s a screenshot to show you where to find it. 

    Import/Export Gutenberg blocks

    By clicking on the Manage All Reusable Blocks link, you will be redirected to the page shown in the screenshot below with the following options –  Edit, Trash, and Export as JSON.

    Exporting Gutenberg Blocks 

    Now click on the Export as JSON option. This will download a JSON file of your block into your computer or laptop. Save the file properly. You can use this on any other WordPress website that you manage. 

    Step 3: Import your Gutenberg Block

    Go to the target WordPress website where you want to import the Gutenberg blocks which are downloaded in your laptop/desktop. For that go to the ‘block administration display’. You will see a button ‘Import from JSON’ at the top of the block administration display page.

    Export Gutenberg Block

    Click on the import button which will give you a pop-up box with the ‘Choose File’ button requesting you to upload the relevant file. Upload the JSON file that you downloaded from the previous website earlier. Once the upload procedure is complete, you will see an ‘Import’ button at the bottom right corner of the pop-up dialog box. Click on the Import option to proceed further.

    Now, WordPress will automatically upload the file for the new website. To verify the same, refresh the page after the upload procedure is complete. Then you will be able to see the name of the block which you uploaded (The very name that you used the save the block in the first website).

    Step 4: Access the Block in a New Website

    In the new website when you have to add blocks for editing, first you have to select ‘Add Block’, go to ‘Reusables’ and there you can find the block that you just imported from the previous website.

    To know what these blocks look like, all you have to do is hover the cursor over the block name to and look at the preview.

    Important Note:

    The block Import/Export feature will give fruitful results only if the blocks belong to the original Gutenberg Editor.

    If blocks are made using a plugin on the parent site then for a successful import/export procedure, the target sites will also require the same set of plugins that were used to design the block. Then again, the blocks design may vary from theme to theme depending on the primary location from where the CSS is applied.

    Conclusion

    So, there you have it. A full blown walk through the import/export feature of Gutenberg blocks. Well, I can never stop admiring the developers involved in the creation of the Gutenberg editor.

    Navigating through the editor makes me encounter a new feature which I did not know was there before. And these features are a time saver for the developers as well as the end user clients.

    For those who are not happy with this new way of editing, all I can say is, Gutenberg ain’t going nowhere. Though WordPress still gives an option to switch to the Classic Editor, that might not be for long. So it is a better move if everybody starts getting to know Gutenberg up, close and personal.

    Features such as the Import/Export of blocks lay hidden inside the many options of Gutenberg. So before you dive into the rabbit hole, have a quick read of this page so that your journey is smoother.

    Hope you enjoyed the post and found it helpful. If yes, then let us know your thoughts. We would be glad to hear from you.

    Related

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Kaveri
    • Website
    • Twitter

    Kaveri is a full-time freelance writer who loves writing about WordPress and Digital Marketing.

    Related Posts

    Beginner’s Guide to The WordPress Gutenberg Editor: Complete Review

    February 5, 2019

    Best Hypnosis Downloads: Improve Your Productivity, Health & Finances

    January 16, 2019

    How To Translate A WordPress Plugin In Your Language

    August 7, 2018

    How To Submit Your WordPress Plugin or Theme to the Official Directory

    March 20, 2018

    Comments are closed.

    Latest
    Video

    Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer

    By Oliver DaleMarch 27, 2023

    Summer is the perfect time for capturing and sharing memories with family and friends. Whether…

    Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe

    March 21, 2023

    Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals

    March 16, 2023

    1000+ Best Lightroom Presets: Ultimate Collection!

    March 16, 2023
    About

    Welcome to AlienWP!
    A blog about WordPress, Design, Technology & Productivity.

    Coupon Codes
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Social
    • Facebook
    • Twitter
    • YouTube
    About

    AlienWP themes and plugins rely on core WordPress functionality to achieve speed, seamless integration and simplicity of use.

    You won't find bloated options and admin panels here: Only the award-winning, intuitive interface we all know and love.

    • About Us
    • Terms & Conditions
    • Privacy Policy
    • Contact Us
    • WordPress Themes
    • Hosting Reviews
    Recent Posts
    • Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer
    • Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe
    • Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals
    • 1000+ Best Lightroom Presets: Ultimate Collection!
    • 250 Free Lightroom Presets: Ultimate Categorized Collection for Photographers
    • Monarch Social Sharing Plugin Review: Get More Shares & Follows
    • 10 Best WordPress Membership Plugins 2020: In-Depth Guide to Free & Paid Options
    Coupons
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Facebook Twitter YouTube

    Copyright © 2013 - Kooc Media Ltd. All rights reserved. Registered Company No.05695741
    Our Sites: FlowPresets / GardenBeast / GolfMonster / Blockonomi / Money Check / Vinjatek / BoatingBeast / Blockfresh/ Computing.net

    Type above and press Enter to search. Press Esc to cancel.