Initially, WordPress users had a sweet and bitter relationship with the block generator. Then, as we discovered in ours Gutenberg’s guide, the new editor has amazing features that make creating beautiful content easy and fun. Now some can no longer do without.
Gutenberg offers enough features to create great pages and articles without writing any code. No matter what content you want to add, Gutenberg has the right block.
Do you want to deeply modify and customize each content block? Gutenberg has a battery of customization options for this.
Do you want even more blocks than what is available in the default editor? over there tons of WordPress plugins for Gutenberg
Therefore, it is sad that many users are unfamiliar with it Reusable blocks, one of Gutenberg’s brilliant features. If you have no idea what we’re talking about, reusable blocks are just blocks contents that you create, save and use at will.
Suppose you want to add a call to action button named thank you, signature, form or anything else at the end of each post or page.
In the past, you had to save this feature to a text file on your computer. When you need it, you copy and paste into your post or page. Gutenberg alleviated this problem. Now you don’t have to use text files or create the same blocks from scratch every time.
You can create a single reusable block and use it not only in your posts and pages but also in other WordPress sites.
Whether you create multiple websites or need to add special content to each post / page, Gutenberg’s reusable blocks can save you a lot of time.
In today’s article, we will show you exactly how to create and export reusable blocks from Gutenberg to WordPress. Our goal is to help you easily transfer and reuse custom content blocks across multiple WordPress posts / pages / sites.
But before that, if you’ve never installed WordPress before, let’s find out How to install a WordPress blog in steps 7 et How to find, install and activate WordPress on your blog
Let’s go back to why we’re here.
Except : If you create a block with a WordPress plugin such as Getwid, for example, you need to install this plugin on other WordPress sites where you want to reuse the said block. Also note that your blocks may look a bit different depending on the theme, but that’s all good because Gutenberg gives you a lot of customization power.
First of all, you need reusable blocks
Unfortunately, you cannot export or import blocks regular. To export and import Gutenberg blocks, you must first create blocks reusable.
We will create a file for illustration purposes thank you which I would like to add to the end of each published article, without having to rewrite the note each time I need to add it to an article.
Has thank you note nothing complicated; just a simple paragraph block with links to twitter and facebook. Remember that your block can be anything you want – advertising bannerINn image slider, quotation, list, the latest publications, MailChimp form etc.
We’ll show you how to export it later thank you on the second WordPress site.
How to create a reusable block
Creating a reusable block is extremely easy. Go to Articles> Add to start the Gutenberg editor:
Then click the icon Add block (+), then select the content block. In our case, we added a paragraph block as shown in the image below.
Then adjust the block to your needs. We have added text, links to social media profiles and a background color. That’s what our new notebook called thank you looks like in our Gutenberg editor:
At the moment, the above note is Unit regular. We need to turn into a file there Unit real which we can export and import. To do this, click on the icon More possibilities, next add to reusable blocksas shown below.
Then give your reusable block a name and press the button Record, as seen below.
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying dearly for what you can do yourself. [Bezpłatny]
And that’s it, you’ve just created your first reusable block.
How to use reusable blocks
It’s incredibly easy to add the reusable block we just created to your posts or pages. After adding the required content to the post or page, click the icon Add a block (+), scroll to the tab Reusable blocks and select your block (Thank you in our case) as shown below.
After you’ve added a reusable block to your post or page, press the button Preview / Publish to display the results in the user interface. Here’s what we have:
The best part is we can reuse our block thank you at any time, without having to create it from scratch. we can also add it to any post type that supports Gutenberg blocks.
Discover too How to add a caption to an image on Gutenberg
Now that you know how to create and use reusable blocks, let us learn more about exporting these blocks to another WordPress site. To avoid confusion, we will be using the same block we just created.
How to export Gutenberg blocks to WordPress
Exporting a reusable Gutenberg block is easy, you’ll do it in no time.
What to do?
In the Gutenberg editor, click More tools and options icon Puis manage all reusable blocksas highlighted below:
This will take you to the screen Blocks where you can view and manage all reusable blocks:
We only have a block Thank you, but the above screen will fill in as you create more. To export, hover over the title and click the link Export to JSON displayed. See the picture below.
Then save the JSON file on your computer:
Now that we have the JSON file on our computer, it’s time to import the block into our second website.
How to import Gutenberg blocks into WordPress
Importing reusable blocks is as easy as A, B, C. First, open the Gutenberg editor. Second, click More tools and options icon later manage all reusable blocksas shown below.
On the screen Blocks then click Import from JSON, select a previously downloaded file, and then press the button. import in this order :
Are you looking for the best WordPress themes and plugins?
Download the best WordPress plugins and themes on Envato and create your website easily. Already more than 49.720.000 downloads. [EXCLUSIVE]
And that’s all ! Thus, you have successfully imported the reusable Gutenberg block into the second WordPress site.
To read also How to add a caption to an image on Gutenberg
Wasn’t it easy? Then you can use and reuse your Gutenberg block on the second website as many times as you like.
Are there any WordPress plugins for exporting Gutenberg blocks?
Oh yeah, and I found one on ThemeIsle, a reputable WordPress developer. This is a free plugin known as Export Import Blocks. Basically, the plugin allows you to skip the entire tutorial. Yes it’s true; you don’t even have to create reusable blocks.
See also our guide on How to add an animated block to your Gutenberg article
Install and activate the plugin, then open the Gutenberg editor. Design your block as you like and then click more options icon. Then click Export as JSONas shown below:
This will download a JSON file to your computer. To import a JSON file with a plugin, open the Gutenberg editor. Then click the icon Add a block Puis import blocks from JSON format under the tab widgets :
Then click choose a file to select a file from your computer and press the button. Upload :
The only problem with the plugin method is that your blocks will not be saved on your WordPress site. To save blocks to the WordPress database, you have to use the manual method. Maybe that will change in the future.
Also discover How do I know if your plug is compatible with Gutenberg?
Unfortunately I couldn’t find another plug. Still, the plugin can save you a lot of time if you are not worried about saving reusable blocks on your website.
Gutenberg’s reusable bricks save lives. They allow models to be recreated quickly because you are not starting from scratch. If you create multiple posts / pages and / or websites, learning how to export Gutenberg blocks will be useful.
Also, discover some premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize the feel of your blog or website.
We offer several premium WordPress plugins here to help you do just that.
1. Team presentation
Team Showcase is the perfect add-on designed to display team members in a beautiful grid or responsive carousel. You will be able to manage your members by grouping them into separate teams. To do this, simply select the options you want to display, select a WordPress theme and apply a predefined color to it.
Therefore, no line of code will be required for this action. Its features include: 10 special themes, 10 color schemes, 10 display options, CSS3 animation effects, the ability to insert on the page, fully responsive designEtc …
Download | Demo | hosting
ARPrice is the most flexible and complete premium WordPress plugin for creating price grids. It includes more than 300 price grid templates and provides all the tools you need to create unique and flexible price grids, as well as comparison tables. You can also easily create a beautiful business card for your team.
It’s a beautiful, intuitive and unique WordPress plugin with an impressive visual editor and real-time preview of your customizations.
see also How to download the service on your blog?
Select a template, then use simple clicks to drag and drop the tools to personalize the price grid down to the smallest detail. You will be able to add an unlimited number of columns, change colors, fonts, icons, and add your own images and ribbons to announce a discount, E.g.
Download | Demo | hosting
3. Premium SEO Pack
Premium SEO Pack is a WordPress plugin that optimizes SEO and compresses CSS to improve website loading speed. The plugin can also manage your website design in a few clicks.
Its functionalities include: CSS and JS compression, video sitemap integration and fragment, HTLM and XML file formatting, redirecting 404 and 301 pages, social network sharing, ALT label delivery, highly personalized layout.
Download | Demo | hosting
Discover other recommended resources to accompany you in building and managing your website.
Here! That’s all for this tutorial, we hope you can export and import Gutenberg blocks into WordPress. Do you still have questions or suggestions about Gutenberg blocks? Please let us know within commentaires below.
However, you can also consult our resourcesif you need more items to complete your web development projects check out our guide on Create a WordPress blog.
Don’t hesitate share with friends on your favorite social networks.