Do you often use the same code snippets in your multiple WordPress blog posts? Then you’re going to fall in love with reusable blocks. In Gutenberg block editor, WordPress has introduced a new feature called Reusable Blocks. And this new feature can save your tone of time from making the same design over and over.
In this article, we are going to learn what Gutenberg Reusable Blocks are, How to create them, How to use them, What are its use cases and much more about them. We will also be going to take a look at the differences between reusable blocks and block patterns. So let’s begin!
Table of Contents
What is a Reusable Block in WordPress Gutenberg Block Editor?
I am pretty sure by now you are familiar with WordPress block editor and blocks in general if not then take a look at our definitive guide on Gutenberg. Basically, the reusable block is a block or a collection of blocks that can be saved and reused across the website.
Many bloggers or website owners need to have certain fields used repeatedly in their multiple posts such as social media links, some sort of call to action button, and so on.
Traditionally, to reuse something you need to make it, again and again, or if you are a pro user you use a hack by copying the text snippet of our content and save it locally as a text file on your computer. When you have to reuse it you paste it into your post. That is very tedious and still not as efficient as it should be.
Gutenberg Block Editor tries to solve this problem by introducing Reusable Blocks, so you can use your designs over and over without having to re-write them or doing some hack to get it done.
Basically, you can think of you are still saving your text snippet but not in your local machine but inside of WordPress itself. With the added bonus of getting a preview of your text snippet and easily accessible right inside your editor.
Another great thing about Reusable Blocks is when you make changes in the reusable blocks it will affect all the other instances of that reusable block that you have used before in your other post. If you don’t want that then there are a couple of ways you can avoid them which we have mentioned below in the article.
How to Create a Reusable Block?
Now let’s understand how we can create a reusable block, it’s a fairly easy process so let’s see how exactly we can do this.
The reusable block is basically a block or group of blocks and to convert any block into a reusable block we first need to create a block. To create a block, we need to create a new post or page, you can also edit your already published or drafted post or page.
Now on your post or page create a design you wanna use, for this example we are creating this ebook downloader section you are seeing in the above image.
Now to add this design into a reusable block you first need to group them if they are not already in the group.
Now select the group, and click on the three-dot icon from the quick action toolbar.
Select the Add to Reusable blocks.
Now in the dialog box type the name of your block and click on save to save it. Your reusable block will be created and your current design is also now a reusable block.
How to Use Reusable Blocks?
Now let’s take a look at how we can use these reusable blocks. You can use reusable blocks anywhere on your site where Gutenberg block editor is available. Either it’s a page or a post. To add your reusable blocks to your post or page follow the following steps:
Go to your page or post in edit mode.
Click on the plus icon and select Reusable in the left sidebar.
Select the block you want to add to your post or page, you’ll see a preview of a block when you hover over it as shown in the image above.
Selected reusable will be added to your post or page.
Note: After adding a reusable block if make any changes in your reusable block will affect all the reusable block instances you have used in your other posts.
When you make changes in your reusable block, you’ll see a white dot before Publish button as shown in the image above that indicates you have made changes in your reusable block.
When you click on it Block Editor will show you a message that your changes will also affect the other areas of your website. This means the changes will take effect in all the other instances of reusable blocks. If you click on save then changes will be saved and all the other reusable blocks will become like the one in the post.
How to Edit & Manage Reusable Blocks?
Now let’s see how we can edit and manage reusable blocks. One way of editing you already know as we have discussed above if you make any changes in a reusable block in any of your pages or posts then after saving it will modify your reusable block.
There’s another way of editing it. When you navigate to your reusable block, you’ll see this link called Manage reusable blocks. I believe in the future there will be an easier way to access this menu.
When you click on this link you’ll be redirected to the list of reusable blocks page as shown above.
From here you can perform multiple actions on your reusable blocks. You can edit your block, you can trash them, or you can export them as JSON and use it on other websites.
In that same section, you’ll see the option to import or create a new reusable block too.
How to Edit the Reusable Block Without Changing Other Blocks?
You may be wondering can you make changes to your reusable block without affecting other instances of that reusable block? then the answer is yes you can.
And doing so is also very simple just add the block in your post or page.
Select the block from the top toolbar.
Now click on Convert to normal blocks. Now your changes in the block won’t affect your other blocks.
But a better way of doing something like this is to use Block Patterns, If you don’t know what block patterns are then just think of them as a close relative to block patterns. Basically, block patterns will let you use the same design in your multiple posts or pages while not affecting other pages. By the way, we have written a well-detailed article on this topic click on the link Definitive Guide on Block Pattern to check it out.
If you do know about block patterns then let’s take a look at the difference between both of them and also their different use cases.
Difference Between Reusable Blocks and Block Patterns
Reusable blocks and block patterns are similar in many ways but also a lot different from each other too. However, there is only one major difference between them other differences are pretty smaller.
The main and major difference between both of them is when you make changes in your reusable block it affects all the instances of that block wherever you have used it. On the other hand, Block patterns are independent and changes you make in it won’t affect its other instances.
Another minor difference in both is on reusability perspective across different websites. To use reusable block in other websites you need to export it as JSON and import it onto another website. On the other hand, you can simply copy-paste your block pattern across different websites.
Now let’s take a look at the use cases of both of them, to better understand which one to use when.
You should use reusable blocks in your post or pages when you want something to stay the same across the entire website that you don’t wanna change or when you change it all the instances of it should change. For example link to your social media, some affiliate links, and posters, or other similar things.
Another use case for reusable blocks is some score chart or price table that changes often so when you make an edit in one all should update altogether.
On the other hand, you should use Block Patterns when you want to keep your design consistent across the website but want the content to be changed on every page. For example hero section of pages with the same design but different content.
Conclusion
Now I believe I have answered all your questions and doubts about Gutenberg Reusable Blocks and now you should be able to take full advantage of it and make better websites. If you think we have missed something or you want to add some more from your end do share that in the comment below.
And while you are here make sure to check our other articles on Gutenberg Block Editor, these are very well-detailed articles made with a lot of hard work and love. You’ll surely find useful info from it.
