When WordPress made Gutenberg its default editor, my first instinct was to install the Classic Editor plugin and pretend like nothing changed. I resisted the urge and spent the first months of 2019 experimenting with the new editor, which remains controversial in the WordPress community to this day.
It took awhile, but Gutenberg finally won me over. The tipping point was something that isn’t common knowledge among advanced WordPress users: the reusable blocks manager.
Every WordPress user I’ve told about the feature has been surprised that it exists. So don’t feel bad if you didn’t already know.
Creating reusable blocks the slow way
From the beginning, creating reusable blocks in Gutenberg was pretty straight forward, even if it was a bit clunky.
Creating a reusable block when editing a post or a page is just a few clicks. After you’ve made a block you want to reuse. Press the three dots in the right top corner of the block and select Add to Reusable Blocks.
Accessing the reusable blocks manager
As you can see, creating reusable blocks this way is incredibly easy, even for novices. If it’s just a personal blog or small business website, you can probably get away with doing it this way. But if you’re using the reusable blocks on large sites that are constantly updated, like I do, there’s a much better way.
As far as I can tell, the reusable blocks manager can only be accessed when editing a page or post. To find it:
- Click the three dots in the upper right corner
- Under Tools, select Manage All Reusable Blocks
Using the reusable blocks manager
Once you access the sitewide blocks manage, the possibilities are much greater. I’ve gotten used to using the blocks manager instead of creating them when editing posts or pages. There are so many advantages.
User-friendly editor
When adding reusable blocks the slow way, it can take several tries to make something appear correctly. That’s because Gutenberg isn’t quite fully mature yet. There are some UX issues that, thankfully, WordPress has begun addressing.
A recent core update made savings blocks as groups within posts and pages easier, but I still prefer to use the sitewide manager.
Just look at the souped reusable block I whipped up below. It took about 2 minutes, most of which was spent thinking of a video to embed. I’m 5’6″ on my best day, so of course I picked Skee Lo’s “I Wish.”
I definitely don’t recommend using the blocks editor to create stuff like this. It’s just an example.
Now that he block is created, let’s see how it looks live.
Inserting reusable blocks
Once the block is created, go to the page or post on which it should appear.
To insert the block:
- Press the + symbol in the Gutenberg editor to add a new block
- Scroll down until you see a expandable section called Reusable
- Expand the section and select the desired block
You can also search for a block if you remember what to type. I always use naming conventions on the sites I manage to speed up things even more.
Live preview
Now let’s see how it looks on the live post.
Of course it looks awful but you get the idea.
JSON
Another advantage of the reusable blocks manager is the ability to import/export Javascript Object Notation (JSON).
Import from JSON
From the blocks manager page, click the Import from JSON button in the upper left corner.
Select the text file you want to import and that’s it. It should show up in the blocks manager ready for use.
Export as JSON
Exporting blocks as JSON files is just as easy. Hover over the block you want to export and click the Export from JSON link.
Importing/exporting JSON in bulk
There doesn’t appear to be an option for this yet. There may be third-party plugins that do it but I tend to stay away from plugins unless absolutely necessary.
If I had to migrate a site and import a bunch of JSON files today, I’d probably do it manually. I’ve done mass XML imports on a few sites since I started using blocks, and the blocks never carried over using WordPress’s default exporter/importer. Neither tool mentions blocks at all.
JSON example
Here is what the hideous reusable block above looks like in JSON format:
{
"__file": "wp_block",
"title": "Look how easy this is",
"content": "<!-- wp:heading -->\n<h2>HEADING</h2>\n<!-- /wp:heading -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">CLICK HERE</a></div>\n<!-- /wp:button -->\n\n<!-- wp:core-embed/youtube {\"url\":\"https://www.youtube.com/watch?v=ryDOy3AosBw\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.youtube.com/watch?v=ryDOy3AosBw\n</div></figure>\n<!-- /wp:core-embed/youtube -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:block {\"ref\":2058} /--></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:media-text {\"mediaId\":2073,\"mediaType\":\"image\"} -->\n<div class=\"wp-block-media-text alignwide\"><figure class=\"wp-block-media-text__media\"><img src=\"https://mikekalil.com/wp-content/uploads/2020/01/empirix-website-redesign-screen-2-1-1024x512.jpg\" alt=\"Empirix Website Redesign\" class=\"wp-image-2073\"/></figure><div class=\"wp-block-media-text__content\"><!-- wp:paragraph {\"placeholder\":\"Content…\",\"fontSize\":\"large\"} -->\n<p class=\"has-large-font-size\">HEY</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:media-text -->\n\n<!-- wp:gallery {\"ids\":[1997,1963]} -->\n<figure class=\"wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img src=\"https://mikekalil.com/wp-content/uploads/2020/01/facebook-user-2-1.jpg\" alt=\"Facebook user\" data-id=\"1997\" data-full-url=\"https://mikekalil.com/wp-content/uploads/2020/01/facebook-user-2-1.jpg\" data-link=\"https://mikekalil.com/blog/facebook-bests-google-pagerank/attachment/facebook-user-2-1/#main\" class=\"wp-image-1997\"/></figure></li><li class=\"blocks-gallery-item\"><figure><img src=\"https://mikekalil.com/wp-content/uploads/2020/01/abstract-network-2-1.jpg\" alt=\"Network concept\" data-id=\"1963\" data-full-url=\"https://mikekalil.com/wp-content/uploads/2020/01/abstract-network-2-1.jpg\" data-link=\"https://mikekalil.com/blog/5g-race-customer-experience/attachment/abstract-network-2-1/#main\" class=\"wp-image-1963\"/></figure></li></ul></figure>\n<!-- /wp:gallery --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:thethemefoundry/happyforms {\"id\":\"54\"} /--></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->"
}Of course I’m not being literal. You can find it if you look hard enough. But I don’t know if I would have found the functionality by now if I hadn’t stumbled upon it.
Maybe developers don’t think it’s ready for primetime yet. Maybe they’re right but it’s still worth leveraging in 2020. Even if you don’t use Gutenberg yet,
I encourage you to get acquainted with it. If WordPress keeps the progress up, page builders will be irrelevant in a few years. With the countless free lightweight themes available, WP’s reusable blocks functionality makes it easier than ever for non-developers to create beautiful websites.
