The Problem with Reusable Blocks in WordPress – And How to Solve 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

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. 

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: 

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

Video laden

Vimeo immer entsperren

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”

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

Video laden

Vimeo immer entsperren

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.

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

Video laden

Vimeo immer entsperren

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”

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

Video laden

Vimeo immer entsperren

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:

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:

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

Video laden

Vimeo immer entsperren

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!

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.