WordPress Gutenberg Patterns: The Solution for Web Design?
| December 14, 2021
Reading Duration: 7 minutes
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:
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?
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
Let’s get into reusable blocks now.
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.
When you’re designing a page or a post in WordPress, here’s how you create a reusable block:
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:
But if you want to make a change only to one specific instance, here’s how:
Now your block is independent of the original reusable block.
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:
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:
This leads me to the fact that using reusable blocks the wrong way can be a huge headache. Here’s why:
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:
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:
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…
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!
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.
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.
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.
is a Creative Consultant from Vienna, Austria. Her mission is to help awesome businesses find their unique voice, and deliver their message to just the right people.
Our Blog Topics
Register now and don’t miss any news about GREYD.SUITE & WordPress:
WordPress Gutenberg Patterns: The Solution for Web Design?
Query Loop Block: The Underdog Among WP Features
Gutenberg WooCommerce Themes: Should you use them?
How good are WordPress Full Site Editing Themes anyway?
How WordPress Dynamic Templates Make Your Work Easier
Combining WooCommerce and Gutenberg Blocks the Right Way
WordPress Full Site Editing: What to Expect From the New Editor
WordPress Gutenberg Is the Future – But Is It Ready for Responsive Design?
Simplify Your Marketing With Content Automation