The Problem with Reusable Blocks in WordPress โ€“ And How to Solve It!

Learn how to create, manage and edit reusable blocks in WordPress – the right way!

Screen with a WordPress blog

Patrick Mitter /

14.12.2021


If youโ€™re creating WordPress websites for a living, being efficient is key. Nobody wants to waste their time on repetitive tasks when itโ€™s so much more fun to focus on the creative process. 

This is where reusable blocks come into play!

If used right, they are like a productivity boost for web creators. 

If used wrong, the consequences could affect your whole website โ€“ or even your multisite. 

In this post, youโ€™ll learn the answers to these questions: 

  • What are reusable blocks, and why should I use them?
  • How do I create and manage reusable blocks?
  • What is the problem with reusable blocks, and what is the solution?

But first, letโ€™s take a step back and ask ourselves: What the hell happened to WordPress Gutenberg, and why are more and more people choosing to work with it?

Why Users are Switching to Gutenberg

Itโ€™s fair to say that the Gutenberg Block Editor was not particularly popular among WordPress users when it was first released in WordPress 5.0. But everyone deserves a second chance, right?

According to Joost de Valk, founder and Chief Product Officer of Yoast, โ€œthe Gutenberg project and with it, the block editor is literally where all the innovation in the WordPress space is happeningโ€. He strongly advocates for users to make the switch and leave the classic editor behind. 

Gutenberg is the long-term way to go, especially in terms of page speed, creative writing (no more writerโ€™s block? pun intended!), not having to switch between the WordPress backend and a WYSIWYG editor, and last but not least: Saving you lots of time by working with reusable blocks. 

โ€œThe only car race youโ€™re going to win by using old technology, is a classic car race.โ€Source: Joost de Valk

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

Letโ€™s get into reusable blocks now.

What is a Reusable Block in WordPress?

Think of a reusable block like the ultimate efficiency hack within WordPress Gutenberg. 

According to WordPress, โ€œA reusable block is a block (or group of multiple blocks) that are saved to allow management from a central location. Changes made to a reusable block will apply to every instance of the reusable block across an entire website.โ€

I like to think of reusable blocks kind of like Gutenberg blocks on steroids, and I just love not having to repeatedly enter content manually, copy and paste code snippets, or memorize all kinds of shortcodes. No. I want efficiency. 

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

How to Work with Reusable Blocks in Gutenberg WordPress

Creating a Reusable Block in WordPress

When youโ€™re designing a page or a post in WordPress, hereโ€™s how you create a reusable block: 

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Editing a Reusable Block in WordPress

This is where it gets a bit tricky: If you make an edit to your reusable block, the edit will be visible in all instances where it was used. If thatโ€™s what you want to achieve, hereโ€™s how to do it: 

  1. Add the reusable block and edit it accordingly.
  2. Click โ€œPublishโ€
  3. Click โ€œSaveโ€
Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

But if you want to make a change only to one specific instance, hereโ€™s how: 

  1. Add the reusable block
  2. Click โ€œConvert to regular blocksโ€
  3. Edit away.
Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Now your block is independent of the original reusable block.

Exporting a Reusable Block in WordPress

Are you particularly happy with a reusable block youโ€™ve built? Would you like to use it in other projects as well? Say no more! This is how you export a Reusable Block: 

  1. Go to edit any post or page and click the three dots on the top right of the page. 
  2. Click โ€œManage Reusable Blocksโ€
  3. Hover over the reusable block you want to export
  4. Click โ€œExport as JSONโ€
Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Whatโ€™s the Difference between Reusable Blocks and Block Patterns in WordPress?

This is a good question, as both these tools help you quickly insert a premade design to your WordPress posts or pages. 

Hereโ€™s a big difference: 

  • A reusable block is intended to look the same in all places that itโ€™s being used. If you change it in one place, the changes apply to every instance of the reusable block. 
  • Block Patterns are provided by the theme author and thus intended to be customized for each use. If you change a block pattern, no other patterns are affected. 

This leads me to the fact that using reusable blocks the wrong way can be a huge headache. Hereโ€™s why: 

The Problem with Reusable Blocks

The tricky part about reusable blocks is how hard they are to spot in the depths of your content. 

Thatโ€™s right: While youโ€™re editing away unless youโ€™re actually going into the block settings, youโ€™re likely to overlook the fact that a block is reusable โ€“ and, as a result, linked to different instances. 

This can lead to especially delicate situations when youโ€™re editing the content of a website that someone else has built. Imagine this: 

You edit a block. 

The phone rings. 

Itโ€™s your client.

You realize youโ€™ve changed all the instances where the reusable block was utilized โ€“ across the entire website (weโ€™re not even getting into multisites here).

This is the face you make:

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

Taking Reusable Content to the Next Level

If you want to be on the safe side when utilizing reusable content in WordPress, youโ€™ll want to try our product GREYD.SUITE. 

Letโ€™s take the Dynamic Templates feature: Unlike reusable blocks, Dynamic Templates are easy to identify (= no more sleepless nights over accidentally changing dozens of pages). 

Depending on their structure, Dynamic Templates can be set up to be fully or only partly editable. 

This comes in especially handy when youโ€™re setting up a website for a client: You can set the design and structure of a block, and make only the content editable. 

As the name would suggest: These templates are dynamic. When you edit a Dynamic Template, it can still be used elsewhere with completely different content. 

So thereโ€™s a huge difference between using Gutenberg on its own, and using Gutenberg within our product: 

GREYD.SUITE is, at its core, is dynamic.
Jakob, UX Designer, GREYD.SUITE

What does this mean? Hereโ€™s what Jakob has to say:

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklรคrung von Vimeo.
Mehr erfahren

Video laden

Of course, Dynamic Templates and reusable blocks are fully compatible

Which leads me to some frequently asked questions about the compatibility of reusable blocks, and of Gutenberg as a wholeโ€ฆ

Reusable Blocks in Page Builder Plugins โ€“ is it a Match?

While we clearly think that Gutenberg is the way to future-proof your web design business, other page builders like Elementor and Divi are still a popular option for many agencies & freelancers. But what about reusables within page builders โ€“ can they compete? Letโ€™s see!

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

Reusable Blocks in Elementor

Weโ€™ve previously chatted about Gutenberg and Elementor, but this time weโ€™re only focusing on the topic of reusables. Elementor has its own feature, and itโ€™s called Global Widgets โ€“ and itโ€™s only available in the premium subscription Elementor Pro.

Just like reusable blocks, Elementorโ€™s Global Widgets are 100% static. They work by saving some elements you want to reuse as a widget, and then placing that widget everywhere you want to use it โ€“ via drag & drop, via the Elementor Library Widget, or by manually pasting a shortcode. 

Of course, if youโ€™d want to add something to that same page or post with a plugin thatโ€™s doesnโ€™t work with Elementor (like a horizontal scrolling plugin, or a plugin to embed a Social Media feed, etc.), youโ€™d still have to switch back and forth between interfaces.

Reusable Blocks in Divi

The WordPress theme Divi has its own version of reusable blocks, called Global Modules

Like the previously stated Elementor example, Diviโ€™s global modules are elements that can be used in multiple places across a website. If you change them on one page, they update on all of the other pages theyโ€™ve been added to. 

The same problem applies, though โ€“ whenever youโ€™d want to use a native WordPress feature, youโ€™d have to switch back to the WordPress interface.

Bottom Line

Reusable features are wonderful time-savers if used correctly. When building a website, you can utilize reusable blocks instead of repeatedly having to take the same actions across multiple pages. 

But beware: Gutenberg, on its own, makes it quite hard to spot which blocks are reusable and which ones are just regular blocks. In the name of all web creators, I urge you to be careful not to accidentally change up multiple pages (or even multisitesโ€ฆ) when you just wanted to change a single instance of a reusable block. 


By Patrick Mitter

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted Greyd’s mission to simplify work for web designers as well as agencies.

Recent in Learn

What To Do, When Your WordPress Site Got Hacked

Read more

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Use Case Tutorial: When to use a table instead of a div

Read more

greyd sustainable websites blog

10 Tips for Sustainable Websites

Read more

Scaling Content Operations (with WordPress)

Read more

an old pc showing a futuristic wordpress logo

Let’s talk about the Future of WordPress

Read more