Reusable Blocks will change the way you create WordPress websites

Have you ever heard about reusable blocks in the new WordPress Block Editor (Gutenberg)? If you think you know what they are but you never actually used them, then you are missing out on one of the most powerful features in modern WordPress.

I don’t want to bore you with long stories and explanations. Let’s start with real examples which I hope will get your brain racing with ideas.

I recommend that you watch my video on this topic below.

Reusable Blocks Example: Food Recipes Blog

For my first example, let’s imagine that you manage a food recipes blog.

In some of your posts you would like to have a special call to action somewhere in the content of your post. Maybe it is a newsletter subscription form, or information about your new book, or a section promoting some affiliate products.

The important part is that this call to action needs to be mixed with the rest of the content.

The traditional approach would be to use shortcodes, but then you would need to use plugins or write custom code to manage them.

All that is in the past. The Block Editor makes this trivial with the help of Reusable Blocks.

I’ll edit one of my recipes and create some blocks for my call to action. A heading for the title, a short paragraph and maybe something extra.

I can group these blocks and then add a background color to the whole section, to make it stand out a little bit more.

Now I want to include this call to action in my new posts and maybe some older posts. I could Copy/Paste it, but that’s a very bad idea. In the future I don’t want to have to edit old posts to make some changes to this call to action.

Reusable Blocks to the rescue. I can select this group block, click on the three dots and then select Add to Reusable Blocks.

Give it a clear name, for example Call to Action: Newsletter and click on Save.

Now when I create a new post or edit an older one, I can add the same reusable block.

I can do that by clicking on the plus sign and switching to the Reusable panel. I can even see a preview of my reusable block.

Or you can type forward slash for the inline menu and type the name of your reusable block, but in this case you don’t see a preview.

Now for the very important part that many don’t understand about reusable blocks.

This reusable block exists as a single piece of content, even if you use it across hundreds of pages.

What this means is that if you edit it in one place, it is automatically updated on all pages that contain it.

Basically it functions as a classic widget, where only a single copy is displayed everywhere.

While you’re processing this information, allow me to show another example.

Reusable Blocks Example: Hotel Website

This time we have a hotel website. As is customary for many hotels, you have a list of rules, like your check-in and check-out times, the cost of breakfast and so on.

You could copy/paste these rules to all your room pages and your policy page, but then you would have to remember to always update all these pages.

But if you convert these rules into a Reusable Block, you can edit the block once and have it updated on all pages instantly.

You can do the same with your room rates. It could be a simple Table block or even a Custom HTML block with some unique code that you have.

Convert this to a Reusable Block and you can add it to many pages. Never worry again about forgetting to update your room rates on some deeper page.

Reusable Blocks Example: Sports News Website

Or maybe you have a sports news website where you write about your favorite football teams.

You could create a reusable block for the latest match score for each team. This way you could have some dynamic content in your older posts about this team.

Reusable Blocks & Custom Block Patterns

Now let’s take this up a notch.

Imagine that you are using a theme with Custom Block Patterns, like my Foundation theme.

This custom pattern with links could be used on dozens of pages. You could have many reusable blocks based on the same block pattern, but with different links for different sections of the website. Updating all these links becomes a lot easier when you have to do it only once.

More Tips & Usage Ideas

OK, now let’s look at some technical aspects that you should be aware of.

Empty or Placeholder Reusable Blocks

You can have empty placeholder reusable blocks. This way you can mark some sections on your pages, but add or remove the content at a later time.

If your reusable block is empty, there will be no trace of it on the front-end, not a single character. So there is no real harm in having empty reusable blocks.

Nested Reusable Blocks

Reusable blocks can be nested inside of other reusable blocks. For example you could create a reusable block with social media icons, and then have these icons be part of more complex reusable blocks.

How to Manage Reusable Blocks in WordPress

As of WordPress 6.0, there is no quick way to access your list of Reusable Blocks.

You have to open the Edit Screen for any page, then click on the Plus button, open the Reusable panel and then click on the Manage Reusable Blocks link.

Or you can click on the three dots in the top-right corner and select Manage Reusable Blocks in the Tools section.

Either way, you could bookmark this page (/wp-admin/edit.php?post_type=wp_block). It exists as a standalone admin page, but it doesn’t have a direct link anywhere in the main menu.

How to edit multiple Reusable Blocks at the same time

I came up with a different way to quickly edit many reusable blocks that may be scattered throughout a website.

A client of mine has a website with many tables with product prices, about 10 tables in total. These tables are a little too complex for the Block Editor, so they are added using the Custom HTML Block.

To make it easier for my client, I created a regular page that serves as a container for all these reusable blocks.

The page’s visibility is set to Private or it can even be Password Protected. The only requirement is that the page is actually published and not a draft.

My SEO plugin of choice (The SEO Framework) allows me to exclude this page from indexing and from any search queries on the website.

Now my client can edit this one page with all the necessary reusable blocks.

What do you think about this approach? It gets the job done with little room for user mistakes.

How to convert Reusable Blocks to Regular Blocks

Even though it defeats the whole purpose of reusable blocks, you can add one to a page and then convert it back to Regular Blocks.

This will allow you to make unique changes to it on this particular page. These changes will not be applied to other copies of this reusable block.

You could do this as a way to mimic the behavior of block patterns.

How to use Reusable Blocks with the Classic Editor

And finally, let’s get even more technical.

If you like the prospect of Reusable Blocks but you prefer the Classic Editor, that is also somewhat possible.

You can use the Block Editor to create your reusable blocks. After that, edit a page containing your reusable block using the Classic Editor in Text mode.

The markup for a reusable block is very simple, it’s only one line. You can copy/paste it into other pages using the classic editor.

A word of warning: when WordPress finds any markup for the Block Editor, it will no longer add the HTML paragraph tags around your text. If you add the markup for reusable blocks, you will have to add the HTML markup for your paragraphs yourself.

In Conclusion

I think that reusable blocks can radically change the way we plan the structure of our WordPress websites.

Reusable blocks can be a great tool for A/B testing on your WordPress website.

After 15 years of working with shortcodes, widgets and custom fields, we finally have a new and exciting way to create engaging content.

If I managed to convince you that it is time to embrace the Block Editor, you might be interested in my upcoming video about the basics of using the Block Editor.