How to Create and Save a Reusable Block in WordPress Gutenberg

save-reusable-block-gutenberg

Gutenberg is a block based editor launched with WordPress 5.0. The folks from WordPress want to make it a fully featured website builder in the next couple of years.

So far, it’s been received with mixed feelings. I thinks that it’s way behind Elementor and I described the difference between these two earlier. The idea behind Gutenberg is great and I hope we’ll see it evolving and delivering the promised capabilities.

Anyway, today we’ll talk about reusable Gutenberg blocks and how to create and save them.

I don’t use them very much and didn’t even know about their existence until I accidentally discovered them. I’m not sure if this is a widely used feature, but it’s surely a useful one. Especially if you want to save some custom made blocks and use them on another page or even website.

Here is how to works: let’s say you need a call to action block comprised of an image, some text and a link and you need to use this block across multiple pages. Follow these steps to create and save a reusable block:

1. Create your block in Gutenberg editor

create a new Gutenberg block

2. Click on 3 dots to display more options, click on Add to Reusable blocks

Add to Reusable Blocks

3. Name your block and click on Save

Save reusable Gutenberg block

That’s it, you now have a new reusable block. You’ll be able to see it under Reusable section, when you create a new block in Gutenberg editor. You can edit the block and insert it on any page or post on your site. All the changes will be updated globally (on every page or post this block is present).

Insert Reusable block

If you want to edit your Reusable blocks, simply click on Manage all reusable blocks as shown in the image below:

Manage all reusable blocks Gutenberg

You can also import/export Gutenberg blocks and used them in other WordPress websites. Reusable blocks are exporter as JSON files and can be imported in any other website which is powered by WordPress.org.

If you want to insert a reusable block in another website, simply click on Export as JSON to export the block and then click on Import from JSON to import the block to another website.

import-export Gutenberg block

That’s it, let me know if it worked for you!