Since the release of WordPress 5.2, authors and editors can put together their own reusable content components without needing to do any programming work. This is thanks to a powerful combination of Reusable Blocks and the Group Block.
A version of this article first appeared in German on the Publishing Blog website.
I’ve been conceiving, designing and programming WordPress websites for clients at our agency Say Hello since the beginning of 2019, and all of our projects are built with complete support for the Block Editor. (Code name Gutenberg.) This allows our clients to decide which content appears where on the site.
With each new release of WordPress, they have a much wider range of control over the page layout and page content than ever before – either in the page content or in pre-defined, content-independent areas. And often without any need for us to do any technical work.
No plugin required
Creating content is easy for authors, be it someone who wants to write a simple article using just text or an editor who wants to put together a media-rich, multi-column layout. But say that I want to be able to use the same piece of content on several pages or in more than one blog post. If I change the content once, it should automatically update everywhere on the site. Can I do this without programming or using a plugin?
Yes. Here’s an example for this use case: a “teaser” which links to one of my photographic projects.
One Frame Movie
I’ve created this piece of content using nothing more than a standard element in the Editor; the Cover Block with some simple content. By changing this combination to a reusable element through the option Add to reusable blocks, I can now add this specifically-designed and linked block throughout my site. If I edit it anywhere on the site, all of the other places where it appears will be automatically updated.
(As I was writing, I added this example to a blog post from 2011 to show what I mean.)
In the following example, I’ve wrapped the original CTA with a Group block set to “wide”, so that it’s stretched horizontally. That allows me to use the CTA in a wider layout without modifying the original.
One Frame Movie
Highlighted columns block, containing my reusable call-to-action element
That’s it: by following these simple steps, you’ve just created your first “Call To Action” (teaser) with no programming, no CSS, just by using the standard Block Editor.
Because the Group Block uses the same logic as other Blocks in the Editor, it can also be customised by a developer – for example a range of pre-defined padding or margin options.
The great thing about this technique is that you can implement reusable blocks and the Group Block however you like. Providing that the Theme you’re using supports these features properly, all the work is editorial.
Once you get the hang of it, you can even build complex content with reusable blocks inside reusable blocks. It’s not difficult at all, once you’ve made a handful of simpler combinations and become used to this way of working.
Does this mean that we don’t need Custom Blocks any more?
You’ll often find that the layout you need to create is very complex, and contains such a wide range of options and settings and levels, that a combination of existing Blocks is too difficult to maintain. You might not know where to start creatively when creating a combination of reusable blocks.
You may come across cases where you need to manually adjust the margins and spacings in a way which isn’t possible using the Block Editor. Or you may need to present a piece of content which is impossible to build using existing Blocks.
That’s where asking an experienced WordPress developer to make you a custom Block may make more sense. Where a developer might need a couple of hours’ budget for a reusable customised Block, this may well save you hours or even days of work.
Two final tips.
The first is that you’ll find it easier to create the reusable content elements directly as standalone elements, rather than always creating them “on the fly” in the Page or Post you’re currently writing. This will get you into the habit of remembering that editing them will change them everywhere, and will stop you from accidentally overwriting content by mistake.
(If you don’t have permission to edit posts in your WordPress site, you will also be unable to edit these “custom posts”.)
The other tip is where to find the reusable blocks. They’re not easy to find, but there are two solutions. The first is to click on the “Add block” plus-icon at the top left of the editing screen, then scroll down to “Reusable Blocks”. Inside this section is a link to “Manage all reusable blocks”, which will take you straight there. The second is to add the following code snippet to your Theme, if you have sufficient WordPress programming know-how.
function mhm_reusableBlocksAdminMenu()
{
add_submenu_page(
'themes.php',
_x('Reusable Blocks', 'Admin page title', 'my_theme'),
_x('Reusable Blocks', 'Admin menu label', 'my_theme'),
'edit_posts',
'edit.php?post_type=wp_block'
);
}
add_action('admin_menu', 'mhm_reusableBlocksAdminMenu');