At first, WordPress users had a bittersweet relationship with WordPress block-based builders. Then, as we discovered in the Gutenberg guide, the new editor has amazing features that make it easy and fun to create beautiful content. Now, some people cannot get enough editors.
Gutenberg provides you with enough features to create great pages and posts without writing code. No matter what you want to add, Gutenberg has it.
Want to extensively modify and style each content block? Thanks to a series of customization options, Gutenberg supports you. Want more blocks than are available in the default editor? There are a large number of Gutenberg add-ons.
This is why many users do not know the regret Reusable block, One of Gutenberg’s brilliant features.If you don’t know what we’re talking about, the reusable block is just content Blocks you can create, save and reuse at will.
Suppose you want to add a call to action, thank you letter, signature, form, or anything else at the end of each post or page.
In the past, you had to save the function in a text file on your computer. When you need it, you can copy and paste it into your post or page. Gutenberg has alleviated this problem. Now you don’t have to use a text file every time or create the same block from scratch.
You can create a reusable block that can be used not only in your posts and pages, but also on other WordPress sites.
Whether you create multiple websites or need to add special content to each post/page, Gutenberg reusable blocks can help you save a lot of time.
In today’s post, we will show you how to create and export reusable Gutenberg blocks in WordPress. Our goal is to help you easily move and reuse custom content blocks on multiple posts/pages/WordPress sites.
Beside: For example, if you use a plugin such as Getwid to create a block, you must install the plugin on other WordPress sites where you want to reuse the block. Also note that your blocks may look slightly different depending on the theme, but this is all fine, because Gutenberg provides you with a lot of customization features.
By the way, have a cup of coffee and enjoy reading.
First, you need reusable blocks
Unfortunately, you cannot export or import Regular Piece.To export and import Gutenberg blocks, you must first create Reusable Piece.
For illustrative purposes, I will create a Thanks for your attention I want to add to the end of every article I publish. You know, I don’t need to rewrite the notes every time I need to add it to a post🙂
mine Thanks for your attention Nothing complicated; just a simple block of paragraphs with links to Twitter and Facebook. Remember, your block can be anything you want-banner ads, image sliders, quotes, lists, latest posts, MailChimp forms, etc.
Later, I will show you how to export notes (read, block) to a second WordPress website. It sounds pretty good? Great, let’s get started.
How to create reusable blocks
It is very easy to create a reusable block.navigation Posts> Add new Start the Gutenberg editor:
Next, click Add block (+) Icon and select your content block. In our example, I added paragraph blocks, as shown in the image below.
After that, customize and design your block according to your needs. I added some text, social media links and background colors.This is our new block aka Thanks for your attention View in my Gutenberg editor:
Very good John Doe. very good. Now, I might follow your blog on social media 🙂 Keep going fast.
Currently, the comment above is Regular Blocked.We need to convert it to Reusable We can export and import blocks.To do this, click More choices Icon, then Add to reusable block, As follows.
Next, name your reusable block and click save Button as shown below.
That’s it, you just created your first reusable block. Good friends along the way.
How to use reusable blocks
It is very easy to add the reusable block we just created to your post or page.After adding the required content to the post or page, click Add block (+) Icon, scroll to Reusable block Tab and select your block (thanks for your attention in our case) as shown below.
After adding the reusable block to your post or page, click Preview/release Button to view your results on the front end. This is what I got:
My test site is running the “Twenty Twenty” theme.
The best part is that I can reuse my Thanks for your attention Block at any time without having to create from scratch. I can add it to all post types that support Gutenberg blocks.
Now that you know how to create and use reusable blocks, let us learn more about exporting these blocks to another WordPress website. To avoid confusion, I will use the same block we just created.
How to export Gutenberg blocks in WordPress
Exporting reusable Gutenberg bricks is a matter for fourth graders, and you will finish it soon.
What should I do?
In the Gutenberg editor, click More tools and options Icon, then Manage all reusable blocks, As we emphasize below:
Doing so will lead you to Piece Here you can view and manage the screen of all reusable blocks:
We only have Thanks for reminding Blocks, but when you create more, the screen above will fill.To export, hover over the title and click Export to JSON The link that appears. See below.
Next, save the JSON file to your computer:
Now that we have the JSON file on your computer, it is time to import the block into our second test site.
How to import Gutenberg blocks in WordPress
Importing reusable blocks is as easy as A, B, C. First, open the Gutenberg editor.Second, click More tools and options Icon, then Manage all reusable blocks, As follows.
exist Piece The following screen appears, click Import from JSON, Select the file you downloaded previously, and click import Buttons in this order:
That’s it! That’s it, you have successfully imported the reusable Gutenberg block into your second WordPress site:
Isn’t that easy? After that, you can use and reuse your Gutenberg block as many times as you want on the second website.
Is there a plugin for exporting Gutenberg blocks?
Oh yes, I found ThemeIsle, a famous WordPress developer.This is a free plugin called Block export and import. Essentially, the plugin allows you to skip the entire tutorial. Yeah, that’s right; you don’t even have to create reusable blocks.
Install and activate the plugin, then open the Gutenberg editor.Design the block as needed, then click More choices icon.Next, click Export JSON, As follows. This is the screenshot:
Doing so will download the JSON file to your computer. To import a JSON file using the plug-in, open the Gutenberg editor.Next, click Add block Icon, then Import blocks from JSON under small tools Label:
After that, click Select a document Select the file from your computer and click Upload Button:
The only problem with the plugin method is that your blocks will not be saved to your WordPress site. To save the block to your WordPress database, you must use the manual method. Maybe this will change in the future.
Unfortunately, I cannot find other plugins. Nonetheless, if you don’t care about saving reusable blocks on your website, this plugin can save you a lot of time. You will have the block as a JSON file on your computer.
Reusable Gutenberg bricks are a lifesaver. They allow you to quickly copy templates and functions because you don’t need to start from scratch. If you have created a lot of posts/pages and/or websites, learning how to export Gutenberg blocks will come in handy.
Have questions or suggestions about Gutenberg bricks? Please let us know in the comments below.