Did You Know About Reusable Blocks?
Posted by download in Software on 24-02-2021
Created by Joen Asmussen, @joen
The WordPress block editor (a.k.a. Gutenberg) comes with a feature called “reusable blocks.” They are blocks, saved for later, edited in one place.
Have you ever wanted to:
- Re-use the same snippet of text across posts and pages?
- Save complex layouts to spare you having to copy/paste from one post to another?
Reusable blocks can do these things.
Like templates, you mean?
Not quite. Think of reusable blocks as snippets of globally synchronized content that are personal to you. You can edit all your reusable blocks in one place, and any post or page you inserted that block into, get the updated version as well.
Where you might use templates to structure your website, you can use reusable blocks to structure your content. For example:
- A testimonial on your homepage and your product page.
- A “this post is part of a series” box that you insert part-way through your article.
- A “Follow me on social media” section you can weave into the prose of your popular article.
- Complex but static blocks, such as a “Subscribe to my newsletter” box, a contact form, a survey, quiz, or polls.
Key properties are that reusable blocks are unbeatable when you want to reuse a snippet of content, edit it in one place, and have the changes propagate to every instance.
Show me how
To create a reusable block, open the block editor and create the content you want to reuse:
Now select the content you want to turn into a reusable block, then click the three-dot “More” menu and choose “Add to Reusable blocks.”
Voilà, you’ve now created a reusable block. From now on, you can find this block, and any other you create, in the “Reusable blocks” tab in the block library:
This is also where you can insert the newly created block on any of your posts or pages.
Where do I edit my existing reusable blocks?
To edit a reusable block, select it and make your edits. When you make an edit, the Publish button will have a little dot indicator:
This dot indicates you’ve made a global change that potentially affects posts beyond just the one you’re editing, the same as when you’re editing templates. This lets you confirm the change was intentional.
Another way to edit your reusable blocks is to click the global three-dot “More” menu and selecting “Manage all reusable blocks”:
This takes you to a section letting you edit, rename, export, or delete every reusable block you created.
What else can I do?
Here are a couple of tips and tricks you can leverage to get the most out of reusable blocks.
Give them a good name
When you name a reusable block, you are essentially choosing your search terms, as the name is what you search for in the block library (or when you use the “slash command,” typing / in an empty paragraph):
Avoid names such as “Gallery” or “Image,” as that’ll be annoying when you just want to insert one of those. You can avoid that with a unique name, such as “My author biography.”
Insert in the best place of your content flow
One obvious benefit of reusable blocks is that they are just blocks, just like everything else in the block editor. That means you can insert it anywhere in your content. You might want your rich author biography to sit at the top or bottom of the post, but This post is part of a series box that might sit well two or three paragraphs not to disrupt the reading flow.
Layouts can be hard; provide yourself a shortcut
Maybe you created a complex layout you’re happy with, a call to action with the right image and buttons, and it took a while to get it just right. Go on and save it as a reusable block: even if you mean to insert it only to convert it to a regular block, it might still save you a minute.
To convert a reusable block to regular (blocks, select it and click the “Convert to regular blocks”:
Design by Beatriz Fialho.
Tip: You can also find some nice patterns on Gutenberg Hub or ShareABlock.
Take it with you
Need to move to another site? You can both export and import reusable blocks. Go to the Manage all reusable blocks section from the global three-dot “More” menu, hover over the block you want to export, and click “Export as JSON”:
The downloaded file can be imported on any WordPress 5.0 or newer website.
Try it
Create a draft post and play around with Reusable Blocks to see how you might start using them. You can always delete them when you’re done playing.
You can test importing and using a small reusable block I created as an example. It’s a “Further reading” block that shows the four latest posts from the category “Featured”:
It might work well as a highlight in an article, giving the reader something new to read or awareness of your other content.
Download the block from this gist, import it to your WordPress site, then customize to make it yours.
