At first, WordPress users had a sweet and bitter relationship with the block generator. Then as we discovered in our gutenberg guide, the new editor comes with amazing features that make creating beautiful content easy and fun. Now some can no longer do without.
Gutenberg gives you enough features to create great pages and articles, without writing any code. No matter what content you want to add, Gutenberg has just the right block.
Do you want to modify and customize each block of content in depth? Gutenberg has a battery of customization options for this.
Do you want even more blocks than what is available in the default editor? It exists a ton of WordPress plugin for Gutenberg
That is why it is sad that many users do not know the Reusable Blocks, one of Gutenberg's brilliant features. If you have no idea what we're talking about, reusable blocks are just blocks content which you create, save and reuse at will.
Suppose you want to add a call to action button called thank you note, signature, form or anything else at the end of each post or page.
In the past, you had to save the feature to a text file on your computer. When you needed it, you copy and paste it into your post or page. Gutenberg reduced 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 on other WordPress websites.
Whether you build a lot of websites or need to add special content to every post / page, Gutenberg's reusable blocks can help you save a lot of time.
And in today's article, we show you exactly how to create and export reusable blocks from Gutenberg to WordPress. Our goal is to help you easily move and reuse custom content blocks across multiple WordPress posts / pages / websites.
But before that, if you've never installed WordPress let's find out How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
Except : If you create a block using a WordPress Plugin such as getwid, for example, you must install this plugin on the other WordPress websites where you want to reuse said block. Note, too, that your blocks might look slightly different from theme to theme, but this is 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.
For illustration purposes, we will create a thank you note which I would like to add at the end of every article we publish, without having to rewrite the note every time I need to add it to an article.
Ma thank you note did nothing complex; just a simple paragraph block with links to Twitter and Facebook. Keep in mind that your block can be anything you want - a banner adInn image slider, a quote, a list, the latest publications, a MailChimp form, etc ...
Later we will show you how to export this thank you note in a second WordPress website.
How to create a reusable block
Creating a reusable block is incredibly easy. Go to Articles> Add to launch the Gutenberg editor:
Then click on the icon Add block (+) then choose your content block. In our case, we've added the paragraph block as shown in the following image.
After that, customize your block according to your needs. We've added text, links to social media profiles, and background color. This is what our new notepad named please looks like in our Gutenberg editor:
At this time, the above note is a pad regular. We have to turn it into one pad reusable that we can export and import. To do so, click on the icon More options, then add to reusable blocks, as shown below.
Then, give your reusable block a name and press the button Record, as can be seen below.
And that's it, you've just created your first reusable block.
How to use reusable blocks
Adding the reusable block we just created to your posts or pages is extremely easy. Once you've added the required content to your post or page, click the icon Add a block (+), scroll to tab Reusable blocks and choose your block (Thank you note in our case), as shown below.
After adding the reusable block to your post or page, press the button Preview / Publication to display your results in the front-end. Here's what we got:
The best part is we can reuse our block thank you note at any time, without having to create it from scratch. we can also add it to any post types that support Gutenberg blocks.
See also 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 website. To avoid any confusion, we'll be using the same block we just created.
How to export Gutenberg blocks to WordPress
Exporting a reusable Gutenberg block is easy, you'll be doing it in no time.
THINGS TO DO
Inside the Gutenberg editor, click the More tools and options icon, and manage all reusable blocks, as we highlight below:
This takes you to the screen Pads where you can view and manage all your reusable blocks:
We only have the block Thank you note, but the screen above will fill up as you create more. To export, hover over the title and click on the link Export to JSON displayed. See the image below.
Then save the JSON file to your computer:
Now that we have the JSON file on our computer, it's time to import the block to our second website.
How to import Gutenberg blocks into WordPress
Importing your reusable blocks is as easy as A, B, C. First, open the Gutenberg editor. Second, click the More tools and options icon, then manage all reusable blocks, as shown below.
In the screen Pads that follows, click Import from JSON, choose the file you downloaded earlier, and then press the button. Import in this order :
And that's all ! Just like that, you've successfully imported a reusable Gutenberg block to your second WordPress website.
Also read How to add a caption to an image on Gutenberg
Wasn't it easy? Afterwards, you can use and reuse your Gutenberg block on the second website as many times as you want.
Are there any WordPress plugins to export Gutenberg blocks?
Oh yeah, and I found one on ThemeIsle, a reputable WordPress developer. This is a free plugin known as Blocks Export Import. Essentially, the plugin lets you skip this 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, then click the more options icon. Then click Export as JSON, as shown below :
This downloads the JSON file to your computer. To import the JSON file using the plugin, open the Gutenberg editor. Then click on the icon Add a block, and import Blocks from JSON under the tab Widgets :
After that click on Choose file to select the file from your computer and press the button. upload :
The only problem with the plugin method is that your blocks will not be saved to your WordPress website. To save blocks to your WordPress database, you need to use the manual method. Maybe that will change in the future.
Discover more How do you know if your plugin is compatible with Gutenberg?
Unfortunately, I couldn't find another plugin. Still, the plugin can save you a lot of time if you don't worry about saving reusable blocks on your website.
Gutenberg's reusable blocks save lives. They allow you to quickly reproduce models since you are not starting from scratch. If you create a lot of posts / pages and / or websites, learning how to export Gutenberg blocks will come in handy.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Team Showcase
Team Showcase is the perfect addon, designed to display your team members in a beautiful responsive grid or carousel. You will have the ability to manage your members by grouping them into separate teams. To do this, simply select the options you want to display, choose a WordPress theme and apply a predefined color to it.
No line of code will therefore be required for this action. Its features include: 10 special themes, 10 color sets, 10 display options, CSS3 animation effects, the possibility of being inserted in a page, a fully responsive designEtc. ...
Download | Demo | Web hosting
2. ARPrice
ARPrice is the WordPress Plugin the most flexible and complete premium in the creation of price grids. It comes with over 300 pricing grid templates and provides all the tools you need to create unique and responsive pricing grids and comparison tables. You will also be able to easily create a beautiful showcase for your team.
It’s a WordPress Plugin beautiful, intuitive, and one of a kind, with its impressive visual editor, featuring a real-time preview of customizations.
See also How to charge a service on your blog?
Choose a template, and then with simple clicks, drag and drop tools to personalize your 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 for announce a discountEg.
Download | Demo | Web hosting
3. Premium SEO Pack
Premium SEO Pack is a WordPress plugin that optimizes your SEO and compresses CSS to improve the loading speed of your website. The plugin can also manage the design of your website in a few clicks.
Its functionalities are among others: compression of CSS and JS, video sitemap integration and snippet, the formatting of HTLM and XML files, redirection of 404 and 301 pages, sharing on social networks, providing the ALT label, highly customizable layout.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- 7 WordPress plugins to embed a Google Maps on your website
- How to add a Beach Slider on a WordPress form?
- 5 WordPress plugins allow users to publish content
- 6 WordPress plugins to add auto-completion to your forms
Conclusion
Here ! That's it for this tutorial, we hope it will allow you to export and import Gutenberg blocks into WordPress. Do you still have questions or suggestions about Gutenberg blocks? Please let us know within Comments below.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
Do not hesitate to share with your friends on your favorite social networks.
...
