One of the most useful (and underused) features of the WordPress block editor (also known as Gutenburg) is the reusable block. If you know Divi or other page builders, reusable blocks serve the same function as global modules. These are blocks (or groups of blocks) that you configure once, but can then reuse.
You can insert them across multiple pages and posts without having to edit them again. And, if you want to change them again, the changes can be site-wide, saving you hours over the life of a site. So let's explore all the ways you can manage your WordPress reusable blocks.
How to create a reusable block in WordPress
Creating a reusable block in WordPress is relatively straightforward. In any post you edit with the Block Editor (which is the default in WP 5.x unless you are using the plugin Classic Editor ), you can make any block you want reusable. Click on the dropdown list à three points in the block hover settings and select Add to reusable blocks .
The editor will ask you to name the new block for later retrieval. Make sure to name it something memorable for the function it will serve on your site. Such as related articles (Intergovernmental Panel on Climate Change) and the cover image for blog posts or something just as descriptive.
If you make a mistake when you create the reusable block (or just made a mistake while creating it), you can click on the parameters in the drop-down list again and click on Delete reusable blocks . This option erases the entire block from the database. data and you can repeat the above process to add it back to the collection if you want.
Additionally, you can simply click on the block itself once it has been saved to find the button. Edit .
For the Paragraph block in this example, it gives you the option to rename it. The adjustments for each block, however, will be different. For a picture box, you get additional options like inserting another file from your media library or uploading a new one, as well as alignment or linked URL.
This process works with any reusable blocks you create. But keep in mind that any changes you make to a reusable block in this way apply to all other instances of that block on your site . So if you change the image in one block, the new image will appear everywhere.
How to insert reusable blocks
Using reusable blocks in WordPress is actually very easy and straightforward. Inside the Block Editor, you can click any occurrence of the + inside a circle to find the tab Reusable . The + button appears to the right of any block, below any block, and at the top left of the screen.
When you insert the reusable blocks you create in different posts and pages, they may also appear in the tab The most used , which appears at the top of the list each time you press the + button.
These will change as you use different blocks, but if you use the same reusable block, say, as the footer for each blog post, they will appear here quite often.
How to manage all reusable blocks in WordPress
At the bottom of the tab Reusable you will find a link Manage all reusable blocks . Clicking on this link takes you to a familiar looking page where every reusable block you have created is listed. The list will look pretty much exactly like the default WordPress list of posts and pages.
When viewing the list, you see some important options. Import from JSON , export in JSON format et change .
Use Edit is exactly the same as above for editing a block. Only instead of being inside a particular article, the block appears in its own article-type editor where you can update it and only it. Again, any changes made to this block will be applied site-wide to each instance.
For export in JSON format , click on the button (3) will give you a dialog (depending on your browser settings) to choose a location to download the generated JSON file. The file itself is simple JSON. It shows the file type (a block), the title you gave it when editing or creating, and then the actual HTML code that will be inserted by WordPress to render the block and its contents on the front-end of the site.
Import from JSON is just as simple: you find the JSON file on your computer, download it like any other attachment or file.
Once you press Import , it will appear in your list of reusable blocks. However, note that if you already have a block with the same name (in this case the reusable block 1 ), new pad imported will not be renamed. You have to do it manually to tell them apart.
Why import and export reusable blocks?
There are a number of reasons to import and export them, but the main ones are for backup and portability purposes. You will probably want to keep a backup of all blocks and the contents that you consider useful to publish on your site. Portability, sharing and sales are also important.
If you need to use a block on another site. To share with a teammate. Or to sell alone as a reusable block for your customers. Just like our layout packs weekly for Divi , importing and exporting blocks gives you the possibility to extend the generator in several ways. In addition, when you use the option Group blocks (see below), you can import and export entire models and layouts as reusable blocks in JSON format.
How to Create Reusable Block Groups in WordPress
Creating a group of reusable blocks lets the full functionality of reusable blocks shine. Instead of having a single image or paragraph or header that you can insert globally, you can also group Gutenberg blocks and save them as a single reusable block. This means that you can, for example, group a title block, a paragraph block, an image block and a custom HTML block to have a online form global email membership for all your block editor posts.
To create a group of reusable WordPress blocks, just click while holding the Shift key on the blocks to add them to the group. All selected blocks will be highlighted with a blue border.
Then you press the button Transformer (2) and select Group in the drop-down list (3) . At this point you will see the blocks merge into one block. You then turn the group block into a reusable block in the same way you do above with any other single block.
This new group will then appear in the list of all reusable blocks and under the tab. Reusable when you add a new block to a publication or page.
How to create a reusable template
We discussed earlier that a reusable block in WordPress is a global element. This means that any modification made to one instance of the block will affect all other instances. If you change the text or image of a reusable block, that change will apply to the entire site. However, you pouvez use reusable blocks as templates that can be edited individually. Again, just like our Divi layouts, the block editor allows you to insert the general block (or group of blocks) from your library, then modify the contents on an individual post or page (or even block by block) basis.
To do this, insert a reusable block in the editor, as we saw above. Press the + in a circle , go to Reusable , then select the block you want to insert.
When the block appears, click on the three dots to open the drop-down menu . Select Convert to normal block . Note: don't select Delete reusable blocks .
Convert to normal block only applies to this unique block . When you use Convert to standard block , you tell WordPress that you want this single block (and only this one) to be independent of overall site-wide changes. Any changes you make to other reusable blocks will not apply to a converted block, and those changes will not apply globally.
The selection of Delete reusable blocks removes everything from the global directory. Blocks that you have already inserted will stay where they are, but they will no longer share any global traits. You will also not be able to reinsert them from the tab Reusable (which may be obvious). This would defeat the purpose of having the reusable block as a template, so we don't suggest doing this.
However, using Convert to regular block , you can insert the base template for the block (or group of blocks) and remove only that particular instance of it from Global Standards, making the original block function reusable as a template for other publications and Pages. You can see this feature in effect in our tutorial onadding reusable Divi layout blocks to blog posts .
Conclusion
Reusable blocks are one of the main features of Gutenberg Block Editor. From the ability to share blocks and content between sites and friends and use them as templates for common elements on your site, taking advantage of the reusable blocks feature can take your post creation and design to the next level and of your page to new levels of utility, creativity and user experience.
