About Gutenberg Block Editor?

Gutenberg is a block-based content management tool that works with WordPress. It is alternatively known as the “WordPress block editor” or just the “WordPress editor,” & that is a fully block-based WordPress editor where it is simple to create custom content, and really easy to repurpose that content. Gutenberg offers you enough features to create remarkable pages and posts, without writing code. we can put different blocks in the right place. Gutenberg editor has the default system to export and import blocks.

So, using a styled block to a different website is possible. You just need to export the blocks and import them to the site you want.

Gutenberg isn’t only Content editor

In July 2021, Gutenberg is still just a content editor (for the most part). But the long-term goal for Gutenberg is to move it towards something called Full Site Editing.
By using it, you’ll be able to design 100% of your website. With Gutenberg, every element in your content is a block, which allows for easy manipulation of the content. Each paragraph is a block, each image is a block, each button is a block.

Key Benefits of Gutenberg Editor?

• • Gutenberg’s Block-Based Approach
  • Reusable Blocks
  • Ease of use for non-developers
  • Quickly set up a multi-column design or insert a Button, Image, Text & Other Blogs.
  • Visual editing, Styling options, Full-width alignment

Gutenberg Editor versus Page Builder Plugins

• • Drag & Drop Features
  • Theme Support and Compatibility
  • Live Editing vs Backend Editor
  • Widgets and Blocks

Gutenberg Block editor allows the blocks to be exported and then imported to other websites. This is specifically helpful if you work on client websites and need to recreate the same info over and over. Technically, you can even sell your one-of-a-kind Gutenberg block, but that is for another time.

How to Export and Import Blocks

Firstly, You Need Reusable Blocks

Add a block

We need to Add Block on Page or Post or Custom Post type. Click on Post and select the New Option.
Then Top Left Side Click on the “+” icon and select a block that you want to make reusable.

Here, This Image Indicates You can Add Different types of Blocks and some customization.

Customize a block

You have various customization options to choose from:

• Heading Blocks – You can add the headings of the paragraphs with this one.
• Paragraph Block – You can use it to create a template to add content, social media links, etc.

Then Click on the Three dots of a chosen block, and select the Add to Reusable blocks option.

The block will now be available in your reusable block library, which means you can now export it.

Export a block

WordPress Gutenberg blocks are not prohibited on a single side. You can export these blocks to use on other WordPress sites.

1. Page/Post Edit Options -> Find the Block Management Section in the Editor

Open the Particular Post/Page and its right side top three buttons,
Inside the editor click on the “Manage All Reusable Blocks”, link inside the “Reusable” tab in your content editor.

After Clicking on That, We should Redirect the Reusable Tab. And Then We should Export it as a JSON file.

2. Export as JSON

In Reusable Tab, you can edit, delete, export, and import your WordPress Gutenberg blocks.

Once you click on “Export as JSON” your block will be downloaded to your computer as a JSON file. Now, you can upload this JSON to any other WordPress site and use the block over and over.

Import a Gutenberg Block

1. Log In Another Website and Go To Reusable Block Section

First You need to login into another Website & Where you have other available Reusable Blocks.

2. Import JSON File

In That Reusable Section, You can see the Import From JSON button at the top of the section. Click on that button and You Can Choose the Previous website Exported JSON file & then Click on Import Button.

Now, Import your new Reusable Block & it’s saved in the Database.
Then after you can use that block on Your website where you want to add.

Using the Block Export Import Plugin

1. Install & Activate Blocks Export Import Plugin

Go to Dashboard Left Side Admin Panel > Click on Plugins and select the Add New option.
Go to the Search box >Search for Block Export Import > Select the highlighted one from the result.

Install Blocks Export Import Plugin & Activate That.

You can Download & Upload the Plugin file.
For Download that Plugin Click on https://wordpress.org/plugins/blocks-export-import/

2. Export as JSON (Blocks Export Import Plugin through)

There are many plugins that have no Additional Settings and Customization.
Just Install & activate to use them directly.

Now Go to the Post/Page > Add a block Whatever you want to add.
When All things are done, click on the three dots and select the Export as JSON option.

Click on That, You can download it as a JSON file and reuse it on another website.

3. Import Blocks from JSON (using Blocks Export Import Plugin)

To Import a particular Block in the Post/Page, Go to the Top Left Corner > Click on the “+” icon > choose the Import Blocks from JSON.

Choose the Previously Exported JSON File and Click on the Upload Button.
You can Reusable Block Other Websites or other Pages/Posts.

This example uses a pretty simple and reusable content block import & export.
Using this quick process of importing and exporting Gutenberg blocks can save you time while creating content for your WordPress sites.

Also Read: Remove Additional CSS from the WordPress Customizer

Thank you for checking out our blog. We believe you’ve found valuable insights in our ideas and processes. Erudite Works Pvt Ltd is a top IT consulting and services provider, focusing on delivering outstanding results. Our dedicated team of experts understands our clients’ unique needs, enabling us to offer customized solutions for substantial business growth. With a successful track record in projects, we’re committed to helping clients achieve their goals in the dynamic digital landscape. For more about our services, feel free to reach out. Contact Us.