How to Create Reusable Blocks in Gutenberg Editor
Last Updated: August 12, 2021 in Guides
The Reusable Blocks is an amazingly useful feature in Gutenberg that allows you to save blocks to reuse in any posts or page later. It's also is one of the features included in the FSE (Full Site Editing) from Gutenberg. This feature helps you save a great chunk of time, effort as well as restrict mistakes of copying content manually. We will share a tutorial on creating, managing, and importing/exporting data in reusable blocks in Gutenberg editor.
First, let’s see practical applications of this feature to make sure you need it on your website.
Applications of Creating Reusable Blocks
You might take advantage of reusable blocks in storing regularly used content like:
- Company slogan
- Call-to-action phrases to buy products, like fanpage, share a post,...
- Product technical parameters
- Explanation of specialize term
- Button or table
- ....
For example, I will create a Paragraph block with content to call people to follow the company's social media, then convert it to a reusable block.
There are 3 steps:
Step 1: Create a Block
First, go to any post or page and add a new block by clicking the plus (+) and choose a block type to create. You can choose any type of block, it does not matter.
Next, enter the content into the block. E.g. I write a sentence to urge people to follow my Youtube channel to watch other tutorial videos.
Step 2: Convert the Regular Block to Reusable Block
After creating a block with your wanted content, convert it to a reusable block by going to Block > Click on the three dots > Add to Reusable blocks.
After that, you can configure your reusable blocks by clicking on three dots, then click Manage Reusable blocks.
A new screen appears, then you can edit or customize your reusable blocks.
For instance, you can rename the reusable blocks to make them easy to remember and distinguish. I renamed my reuseable block to Follow Youtube.
Note: You also can import or export the reusable blocks to move them to another website. It will help you to save a lot of time.
Step 3: Add Reusable Blocks to a Post or Page
In a post editor, click on the plus (+) sign, switch to the Reusable tab, and choose the block you want.
Your block will be created full of content inside. Here is the result:
The Last Words
Reusable blocks save you a lot of time and effort in creating the same blocks again and again. You can create reusable blocks to call viewers to follow your social channels as I’ve done above, even insert a button to make it pretty (like adding Gutenberg icon). There are many cases of using it.
Good luck to you!