It is often bothering to design an individual Gutenberg block to use in every WordPress page and post. That is why you require creating a reusable block using the Gutenberg editor or any alternative ways. So If you need to save time, use reusable blocks. In this situation, you should know how to create Gutenberg blocks that are reusable to everywhere?
In this post, we will share with you a guide on what is a reusable block. We will also share how to use a reusable block in WordPress posts and pages. Even you can learn the best guide on how to export/import reusable blocks to other WordPress websites.
What Is Gutenberg Reusable Block?
We are bloggers, so frequently we need to use content snippets in various posts or pages. So a reusable block of the Gutenberg editor is created for using multiple times in any WordPress post and page.
Many webmasters are interested in adding a reusable block in contents to take care of their time to design a block again and again.
So it is an extremely boring fact to use a block to copy from the computer hard drive or any website. In this process, you have to spend a lot of time to discover a usable block for using on your WordPress site.
But the WordPress Gutenberg block editor makes this process much easier nowadays. The WordPress team introduces an outstanding feature called Gutenberg reusable block.
By this block editor you can create highly customizable blocks within a quick time that can be used in any post even you can export and import to your another WordPress site.
What type of blocks can you save as reusable blocks?
There are no specific blocks that allow it to save as reusable blocks. It means you can move any custom Gutenberg block into a reusable block.
In our blog at WPBasic Pro we use so many reusable blocks in different posts or pages that were created once before. So we look at so many benefits from those custom blocks because the reusable blocks save a lot of time to redecorate.
Most common content snippets are ‘call to action button, product pricing, notification box, subscription box, special note, etc.
This is not essential for those blocks you have to save as reusable blocks but once if you know how to create a reusable block, you can convert any single block into reusable on your WordPress site.
How to Create a Reusable Block Using Gutenberg Block Editor?
Mainly there are three ways you can create reusable blocks. One is using Gutenberg editor, 2nd in block editor plugin, and 3rd in manually.
So first of all I will demonstrate how to create a block using the Gutenberg editor. So let’s start.
By default, WordPress has tons of blocks, but all are not sufficient for professional use.
So, better, you can use a Gutenberg block editor plugin. There are lots of free plugins in WordPress respiratory. One of the best is Ultimate Gutenberg block by Brainstorm Force Team, they also have developed the most powerful and SEO optimized lightweight theme Astra free and pro, initially, both are the same. So if you plan to use the best rating premium theme on your WordPress website, you can decide to buy an Astra theme pro.
Check the Astra theme special discount.
Not enough budget right now? You can try Astra free and start your online journey. When money is available, you can upgrade free to a premium that’s the good decision that we think.
Well, back to the guide.
For the tutorial purpose, today we will create a call to action reusable Gutenberg block button. For this, we will use the Ultimate Gutenberg block plugin, so install it if you do not install it ever.
Say you have installed the block plugin, now Go to Post> Add New Post then find the Ultimate Addon Blocks option, which is located to the left sidebar of the WordPress post editor. You can also search the specific block or group of blocks to write the name of the block on the search bar.
Then scroll down and click on the Ultimate Addon Blocks. There are lots of blocks that will be expanded then Click on the ‘Marketing button’ because we will redesign and customize this default call to action button for using as a reusable button in our blog post where possible.
After clicking, a default button will be opened but you will notice the button is unprofessional, now we will redesign it and make a professional one to use.
You will get all options for customizing this button on the right sidebar of the WordPress editor. So select the default button and go to the right sidebar.
First, we will work in the General section. Here you can input the button link and enable a link in the new tab if you want then set your button alignment like button center, left, and right. You can set it as you like.
Now jump to the next section named Button Icon, here you will get lots of button icons, so choose your icon and select the icon position. You can also use icon space and title button spacing from here.
Now the next step is to set a button Title and description. Go the next Content section and click on the Typography icon for both Title and description and set your button’s title and description’s font size and font family.
If you want to replace the default button text, click on the button and delete the default text and add a new one.
The next step is to design the button’s background. So go the background setting and select background color type, you can use transparent, single color or gradient color, then choose and select a color for the background, you can use custom color if you do not like the default one. Finally, choose the background hover. Besides, you have an option to set color opacity for both background and hover.
Now select your button title color, background color, and description color. After that set the Hover color of the button. You can set the custom button’s top, left, and right padding also.
Now back to the ‘Content’ Section again and set button title, description, and icon color. Don’t forget to add the button’s hover color.
Now is time to design the border area & radius of the button. So go the border section and customize all settings according to your need.
Initially your button design is complete. Now you can save it to as a reusable block.
How to save block for reusable?
The saving process of a Gutenberg customized block is pretty much easy. Simply go to the four-dot/More Option of the block then click on the “Add to Reusable blocks”.
Then enter your new reusable block name and finally click on the Save button. Your newly created block will be saved in the reusable block section that you can use anywhere of your blog posts or pages.
How to Use WordPress Gutenberg Reusable Block?
Using reusable blocks in the WordPress post/page is super easy. It is like a regular block, but you have to take an extra action for a reusable block to use in WordPress editor.
Go to the WordPress post and click on the new ‘Add block’ icon and scroll down and click on the “Reusable’ then click on the block that you want to use.
Your saved reusable blocks will be opened on the WordPress post editor, but you cannot use it until you convert it to a regular block. To unlock/convert it simply go the block four dots or More Options then click on the “Convert to Regular Block”. Now your reusable block is ready for use as a regular one.
There are many options to control reusable block here. You can check them and try yourself to know about the option’s benefits.
How To Remove Reusable Block?
If you do not want to use a reusable blog for a long time, you can remove them from your block section. The removing process is not so tough. First, add a new reusable block in your WordPress editor then click on the ‘More options’ or block four dots and finally click on the Remove from Reusable block option then confirm. Your reusable block will be removed from the WordPress posts or pages where you used it before.
How to Import/Export Reusable Blocks?
Reusable blocks are not only for using a blog where you have created. You can use it on your other WordPress sites by importing and exporting blocks.
You can export all reusable blocks from the block management section. Now, the question is how to find block management option?
To find it go to the Gutenberg plugin then click on the “Reusable Blocks”.
After clicking, you can see all saved reusable blocks. So choose one which block you want to export to use your other site.
Now click on the “Export as JSON’ then the exporting process will be completed immediately and WordPress will send it to you as a JSON file.
You can use this JSON file to another WordPress site’s block management section by importing it. So open your other WordPress site’s admin dashboard then go to the block management and upload this file using Import from JSON button.
After fining the uploading process, your reusable block is ready for using on your another WordPress site.
Conclusion of Creating Gutenberg Reusable Block
Making a reusable block is not a big puzzle. But sometimes it is very tough to create a new custom block for using in Gutenberg editor. To create custom blocks, you have to use the Gutenberg custom block plugin. The people one is Block Lab. However, We have shared this step by step guide on how to create Gutenberg block reusable everywhere. In case if you do not understand any step of this guide, please comment below. We will try to reply immediately.