How to Create Reusable Blocks in WordPress?

WordPress introduced Gutenberg block editor with the version 5.0. It has many blocks that you can insert on the content area and create beautiful layouts. Besides those individual blocks, what makes Gutenberg outstanding is the ability to convert any individual or group of blocks into a reusable block. In this article, we will explore how to create reusable blocks in WordPress Gutenberg editor.

What is a Reusable Block?

Let us explain with an example. Affiliate marketing is popular in WordPress bloggers as you can easily insert affiliate links with the help of plugins. However, now you can do this with Gutenberg blocks. Say you have a button with an affiliate link that you want to use on all posts on your site with similar appearance and hyperlink.

Earlier with Classic editor, you have to copy the button code from your old posts and paste on new post whenever required. Alternatively, you can use shortcode or plugins to paste the button code. This is a time consuming task and the bigger problem is that you have to go to all posts one by one and modify the button style or link.

Reusable block option in Gutenberg editor takes all these hassles away. It allows you to create a single block that you can use wherever you want. You can modify the content one time to update all the occurrences. In this way, you can actually embed a custom reusable content inside each post and update centrally.

Creating Reusable Blocks

Login to your WordPress admin panel and go to “Posts > Add New” section. This is the same way normally you will create your post content. First, let us create a paragraph with a custom color and style. Click on the + icon and insert a paragraph block.

Add your content and customize paragraph with background and font colors.

When you are ready with the content, click on the three dots option icon on the block. Select “Add to Reusable blocks” option from the dropdown.

Enter a unique name for your reusable blocks. Choose something you can easily remember like “My First Affiliate Block”. Click on “Save” button and you will see a notification message saying “Block updated”.

Now that your first reusable block is ready. You can delete the block by going to three dots option button and choose “Remove Block”. If needed, you can also keep the reusable block on the current post and publish it.

Inserting Reusable Blocks in Other Posts

Now create another post or edit any of your old post to insert the reusable block you have created. Click on the + icon and type the name of your reusable block in the search box. In our case, we type “affiliate” to filter the “My Affiliate Block” that we have created. Click on the block to insert on your post.

As you can see, reusable blocks are available throughout your site. You can insert on any post, page or custom post type similar to other default blocks.

Editing Reusable Blocks

There are two ways to edit reusable blocks. One is to change the content of the block so that it will change on all occurrences. Other is to apply changes to only the current post.

• Click on the “Edit” button and modify the content of your reusable blocks. Save your changes so that it will instantly visible on all the places where you have insert the block.
• In many cases, you may need to change the content of a reusable block only on current post. After inserting a reusable block, click on the three dots option and select “Convert to Regular Block” option.

This will change the reusable block into a regular block. Now you can edit the content and publish that will be visible only on the current post. Remember, your reusable block will be still available with the original content.

Managing Reusable Blocks

WordPress does not have a menu item for managing reusable blocks. This is one of the main reasons many bloggers are not aware of reusable block feature in Gutenberg. However, you can access all reusable blocks in two ways.

• One is by clicking the “Manage all reusable blocks” link when you insert a block.
• Other way is to click on the three dots settings icon on the top right of Gutenberg editor and choosing “Manage all reusable blocks” option.

Tip: Click on the “Options” to disable unwanted meta boxes from the editor. This will help you to focus on the content and have distraction free writing.

Make sure to save or publish the post, as clicking on the link will take you to outside the editor. You can view and manage all the reusable blocks similar to post and pages on your site. It is also possible to export your blocks to JSON file and import on another site.

In fact, you can directly access all reusable blocks using the URL “https://www.your-website-name.com/wp-admin/edit.php?post_type=wp_block”. As you can see, WordPress stores reusable blocks as a custom post type with a name as “wp_block”. If you are a developer, you can make use of all custom post type features and play around with reusable block feature.

Points to Remember in Creating Reusable Blocks

• We explained with a paragraph block for the sake of understanding. Actually, you can convert any of the existing block into a reusable block.
• In fact, you can use “Group” block to combine columns, button and other elements to create a custom layout and use the entire layout as a reusable block.
• You can delete the block after adding it as a reusable block. Basically, you are defining the block as reusable so that it is possible to insert on any other posts.
• WordPress allows you to create as many as reusable blocks.
• You can delete a reusable block anytime. However, we recommend you to delete a block after removing all embedded occurrences. Otherwise, you will see block not available or deleted message when editing the post. Fortunately, there will be no message displayed on the published post.

• You can view reusable block used on the posts in navigation structure as a single component. You will not the block details inside the reusable block.

Final Words

Many bloggers still hold on to old Classic Editor without moving to Gutenberg. In addition, bbPress and WooCommerce plugins are still using Classic Editor. However, with beautiful features like reusable blocks we hope all users and plugins will start using Gutenberg. You can create call to actions, product block or mini layouts using reusable blocks and embed inside any post. With a single click, you can modify the content of the block and update throughout your site.