Table of contents
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.
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.
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
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:
- Add the reusable block and edit it accordingly.
- Click “Publish”
- Click “Save”
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
But if you want to make a change only to one specific instance, here’s how:
- Add the reusable block
- Click “Convert to regular blocks”
- Edit away.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
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:
- Go to edit any post or page and click the three dots on the top right of the page.
- Click “Manage Reusable Blocks”
- Hover over the reusable block you want to export
- Click “Export as JSON”
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
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.
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.
GREYD.SUITE is the world’s first all-in-one WordPress suite with native Gutenberg integration. Yes, you heard that right: GREYD.SUITE isn’t only compatible with Gutenberg – everything’s fully integrated.
Apart from numerous features that make creating professional websites a breeze, GREYD.SUITE offers various features that come into play where Gutenberg is not (yet) living up to its full potential.
If you’re designing websites for a living, take the first step to making your life easier.
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
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.
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.
