Want to learn how to create reusable blocks in the WordPress Gutenberg editor? This tutorial walks through the simple steps needed to make, manage, and maintain WP blocks. First, let’s look at the benefits of reusable blocks to administrators and content creators.
What is a Gutenberg Block—Exactly?
Blocks are the smart way WordPress now organises the content of your blog posts and pages. Gutenberg offers a library of pre-built, customisable blocks or elements. They’re organised by category for convenience and can be called up with a single click inside the editor.
Guttenberg block categories include:
- Common blocks
- Formatting
- Web page layout
- Widgets
- Embeds
What is a Gutenberg Reusable Block?
Gutenberg blocks are a trouble-free, fast way to create eye-catching posts and pages. They replace the need for HTML code, widgets, and manual formatting. Blocks make life much easier for content creators at any level. You can add them at any time, so why bother with “reusable” blocks? Because you no longer need to keep recreating frequently used content.
Exploit reusable (saved) blocks to insert custom items with a single click, e.g.
- Affiliate or sponsor banners to posts and pages
- Add social media follow buttons
- Add identical tables (handy for complex layouts)
- Add pre-designed forms to posts and pages
- Add call-to-action buttons
- Other
One-click convenience
You can see the power in single-click reusable blocks as a time-saving feature. There’s no need to save frequently used content to separate files, and no more copy and pasting. Instead, you save the reusable content in a custom block that you access directly from your WP editor.
This guide teaches the 5 essentials of WP reusable blocks:
- How to create WP reusable blocks
- How to add reusable blocks in WordPress posts and pages
- How to edit and update WP reusable blocks
- How to manage WP reusable blocks
- How to export & import WP reusable blocks
#1 Creating reusable blocks in Guttenberg
Creating a reusable block in the WP Guttenberg editor is a straightforward process. You can save any content block as a reusable element for later use. We’ll choose a paragraph for this demonstration and create a reusable block for some frequently used text.
Go to Posts => Add New or Posts => All Posts to open an existing one.
We’ll create a new post for this demonstration.
Click the Add New Block (+) icon in the post edit window.
Click Paragraph from the pop-up box.
Tip: Type paragraph into the search box if you don’t see the option in the pop-up.
The pop-up disappears, but the paragraph block is working in the background.
Type the text you want to recycle across the site. You have some formatting options from the pop-up toolbar. Use the block settings (right-side) if you need additional formatting options.
Our example looks like this.
We’re now ready to save the new paragraph block for future use.
Click More options (3 dots) on the pop-up toolbar, then select Add to Reusable Blocks.
A brief message appears to inform you the block has now been created.
WordPress asks you to add a name. Choose something that’s easy to recognise, especially if you plan to create multiple reusable blocks.
We’ll call this one ‘Subscribe to Newsletter.’
Click Save after entering the block’s name.
All done. You’ve now created and saved your first reusable block. Now let’s look at how to add it into any WordPress post or page.
#2 Add and edit reusable blocks in WordPress
Adding reusable blocks to WordPress posts and pages is quick and easy, and that’s the point.
We’ll create a new post to illustrate.
Go to Posts => Add New from the Dashboard side menu.
Click inside the post edit window where you want to add the reusable block.
Click the Add New Block (+) to open the available blocks.
The name of the reusable block you created earlier should appear in the block pop-up.
Tip: Type the blocks name or the word reusable into the search box if you don’t see it.
Click the reusable block to add it to the post.
Accept the block by clicking anywhere on the surrounding white space.
#3 How to edit and update WP reusable blocks
Reusable blocks first open in a simple block editor. There’s an option to Convert to a regular block as well. You can also click on the three dots to access More Settings.
Here’s what the More Settings menu looks like.
Remember to click Save after you edit any part of your reusable block.
Warning! Editing a reusable block changes it site-wide. That means the edits you save here will update the block on every other location you have it. Select Convert to a regular block from the pop-up toolbar if you only want to change it for an individual page or post.
You’re now free to make any changes you want without affecting the reusable block.
#4 How to manage WP reusable blocks
You may end up multiple reusable blocks over time. WordPress stores them together so that you can easily manage them from a central location.
Click the Add Block (+) icon on the top left of the post or page edit menu bar.
Next, select the Reusable tab, then click the Manage all reusable blocks link.
You’re now at the screen where you can manage all your reusable blocks. It’s a familiar space that shares the same format and layout as all the other WordPress manage screens.
Hovering the mouse over a block title displays a link menu that allows you to:
- Edit the block
- Send to trash (deletes from the list)
- Export the block
- Purge from cache
There’s also a search box to help find blocks in large lists quickly.
#5 How to export/import WP reusable blocks
The great thing about reusable blocks is that they’re transferrable. You can easily export and import them to and from other WordPress blogs and websites via JSON files.
JSON (JavaScript Object Notation) files?
A JSON file is a lightweight data-interchange, human-readable text-based file format. Computers easily parse and generate these files, which is why WP is using them for blocks.
Export reusable blocks in WordPress
Click the Export as JSON link under the reusable block title you want to transfer.
WordPress then sends you the file, named after the reusable block.
Save it to your computer.
Import reusable blocks in WordPress
You can import the saved file from the previous section into any WP blog or website at any time.
Click Posts or Pages from the Dashboard side menu (either is OK).
We’ll open Posts for this demonstration, but it’s the same procedure for pages.
Click Add New or a post’s Edit link to open the Guttenberg Editor.
You’re now at the Post Edit screen.
Click the Add Block (+) icon on the top left of the post or page edit menu bar.
Next, select the Reusable tab, then click the Manage all reusable blocks link.
You’re now back at the screen where you can manage all your reusable blocks.
Now click the Import from JSON button at the top of the Manage Blocks screen.
Click Choose File from the pop-up.
Locate and double-click your saved JSON file from the previous section
Click Import to complete the process.
You will see a confirmation method upon successful import.
Your newly imported reusable block is now ready to use in any WP post or page.
That’s it. You now know how to create, add, edit, manage, export, and import reusable blocks.
