WordPress Reusable Blocks: How to Import, Export, and Create Them

One of the more useful (and underused) features of the WordPress block editor (also known as Gutenburg) is the Reusable Block. If you’re familiar with Divi or other page builders, Reusable Blocks fill the same function as Global modules. These are blocks (or groups of blocks) that you set up once, but can then reuse. You can insert them on multiple pages and posts without the need to edit again. And, if you do want to edit them again, the changes can be site-wide, saving you hours over the lifetime of a site. So let’s dig in on all the ways you can manage your WordPress reusable blocks.

Subscribe To Our Youtube Channel

How to Create a Reusable Block in WordPress

Creating a reusable block in WordPress is relatively simple. Inside any post that you are editing with the Block Editor (which is default in WP 5.x unless you’re using the Classic Editor plugin), you can make any block you want reusable. Click on the three dots dropdown in the block’s hover settings and select Add to Reusable Blocks.

The editor will prompt you to name the new block for retrieval later. Make sure that you name it something memorable for the function it will serve on your site. Such as Related Posts or Cover Image for Blog Posts or something equally descriptive.

If you make a mistake when you create the reusable block (or simply made a mistake in creating it), you can click on the dropdown settings again and click Remove from Reusable Blocks. This option clears the entire block from the database, and you can repeat the process above to re-add it to the collection if so desired.

Additionally, you can simply click the block itself once it has been saved to find the Edit button.

For the Paragraph block in this example, it gives you the option to rename it. Each block’s adjustments will be different, however. For an image block, you get additional options such as inserting another file from your media library or uploading a new one, as well as alignment or linked URL.

This process works with all reusable blocks you create. But keep in mind that any edits you make to a reusable block in this manner applies 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 the Reusable Blocks in WordPress is actually very easy and simple. Inside the block editor, you can click on any instance of the + inside a circle to find the Reusable tab. The + button appears to the right of any block, below any block, and in the upper-left part of the screen.

As you insert the reusable blocks you create into different Posts and Pages, they may also appear in the Most Used tab, too, that appears at the top of the list each time the + button is pressed.

These will change as you use different blocks, but if you use the same Reusable Block, say, as a footer for each blog post, they will appear here pretty commonly.

How to Manage All Reusable Blocks in WordPress

At the bottom of the Reusable tab, you will find a Manage All Reusable Blocks link. Clicking this link will take you to a familiar-looking page where each and every reusable block you have created is listed. The list will look pretty much exactly like the default WordPress list of Posts and Pages.

Viewing the list, you see a few important options. Import from JSON, Export as JSON, and Edit.

Using Edit is exactly the same as above in editing a block. Only instead of being inside a particular post, the block appears in its own post-like editor in which you can update it and only it. Again, all changes made to this block will be applied site-wide to each instance.

For Export as JSON, clicking the button (3) will give you a dialogue (depending on your browser settings) to choose a location to download the generated JSON file. The file itself is straightforward JSON. It shows the file type (a block), the title you gave it in editing or creation, and then the actual HTML that will be inserted by WordPress to render the block and its contents on the site’s front end.

Import from JSON is just as easy: you find the JSON file on your computer, upload 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 by the same name (in this case Reusable Block 1), the newly imported one will not be renamed. You must do that manually to differentiate them.

Why Import and Export Reusable Blocks?

There are a number of reasons to import and export them, but the primary ones are for backup purposes and portability. You will probably want to keep a backup of any blocks and content that you feel are worth spreading across your site. Portability, sharing, and sales also matter.

If you need to use a block on a different site. To share with a teammate. Or to sell on its own as a reusable block for your customers. Much like our weekly layout packs for Divi, importing and exporting blocks gives you the option to extend the builder in a number of ways. Additionally, when you use the Group Blocks option (see below), you can import and export entire page templates and layouts as reusable blocks in JSON format.

How to Create Groups of Reusable Blocks in WordPress

Creating a group of reusable blocks is helps make the entire feature of reusable blocks shine. Instead of having a single image or paragraph or heading that you can globally insert, you can also group Gutenberg blocks together and save them as a single Reusable Block. This means that you could, for instance, group a heading block, a paragraph block, an image block, and a Custom HTML block together to have a global email opt-in form for all your Block Editor posts.

To create a group of reusable WordPress blocks, simply shift-click any blocks to add them to the group. Any blocks selected will be highlighted with a blue border.

Then you will press the Transform button (2) and select Group from the dropdown (3). At this point, you will see the blocks merge into a single block. You then transform the group block into a reusable block in the same way that you do above with any other, single block.

This new group will then appear in the list of all reusable blocks and under the Reusable tab when you add a new block to a post or page.

How to Create a Reusable Template

We discussed earlier that a reusable block in WordPress is a Global item. Meaning that any changes made to one instance of the block will affect all other instances. If you change a reusable block’s text or image, that change will be site-wide. However, you can utilize reusable blocks as templates that can be edited individually. Again, much like our Divi layouts, the Block Editor has a way that you can insert the general block (or group of blocks) from your library and then edit the content on an individual Post or Page (or even block-by-block) basis.

To do so, insert a reusable block into the editor, like we discussed above. Press the + in a circle, navigate to Reusable, and then select the block you want to insert.

When the block appears, click the three dots to open the dropdown menu. Select Convert to Regular Block. Note: do not select Remove from Reusable Blocks.

Convert to Regular Block applies to this single block only. When you use Convert to Regular Block, you are telling WordPress that you want this (and only this) single block to be independent from global, site-wide edits. Any change that you make to other reusable blocks will not apply to a converted block, nor will these edits apply globally.

Selecting Remove from Reusable Blocks deletes everything from the global directory. The blocks you’ve inserted already will remain where they are, but they will no longer share any global traits. Nor will you be able to insert them again from the Reusable tab (which may be obvious). Doing so would defeat the purpose of having the reusable block be a template, so we do not suggest doing this.

However, by 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 the global standards, making the original reusable block function as a template for other Posts and Pages. You can see this feature in effect in our tutorial about adding reusable Divi Layout blocks to blog posts.

Conclusion

Reusable blocks are one of the Gutenberg Block Editor’s top and most versatile features. From being able to share blocks and content between sites and friends and using them as templates for common elements across your site, taking advantage of the reusable blocks function can take your Post and Page creation and design into new levels of utility, creativity, and user experience.

How have you used Gutenberg reusable blocks to enhance your website?

Article featured image by Helga Khorimarko / shutterstock.com