How to create reusable blocks in Gutenberg editor

How to create reusable blocks in Gutenberg editor

WordPress has already made it easier for people to make beautiful websites. Moreover, with the introduction of the new Gutenberg editor, it has gone way beyond people’s imagination. When it comes to functionalities and ease of uses, Gutenberg editor is far more advanced than the previous Classic editor. The new block editor lets you create pages and posts with plenty of blocks. Most interestingly, you can not only use & style blocks but also reuse the created blocks again and again. Today, we will learn how to create reusable blocks in Gutenberg editor.

What are the reusable blocks?

Gutenberg has a whole set of default blocks to shape up your posts and pages. While styling different blocks, you may decide to use them again and again. If so, The Gutenberg editor lets you save your styled blocks and use them on any page or post of your choice. It’s a wonderful relief from creating the same block again and again.

The blocks you save to Reusables can not only be accessed from any post and pages but also be exported and imported to be used on other WordPress sites. It’s such an adorable feature that the previous Classic editor didn’t have.

Create content, and save it for you and other contributors to reuse across your site. Update the block, and the changes apply everywhere it’s used.

It saves you time, and you don’t have to type the same text and format them repeatedly. Most importantly the contents of your site will be consistent all across the pages and posts. Your site will look more professional with similar design and type of blocks.

Suppose, you created a CTA button for a particular product you showcase/sell on your site which may be required to be inserted on plenty of pages and posts. In that case, a saved CTA button block will do fine. You can do the same for any type of block.

Create reusable blocks in Gutenberg editor

Creating reusable blocks in the Gutenberg editor is quite easy. It is all about using a block and saving that to Reusables. Let’s know the entire process in some simple steps.

Step 1. Create and style a block

You know what to do if you are familiar with the Gutenberg environment. Whether you are creating a page or post, you can take a block, style and save that to Reusables.

reusable blocks

Click on the (+) plus sign on your left, type the block name in the search bar,

Step 2. Add the block to the Reusables

Once you have created and styled the block it’s time you added that block to Reusables.

reusable blocks

To do that, you have to click on the three dots above the block and find Add to Reusables Blocks in the dropdown. The block will be created instantly.

Step 3. Save the block with a name

Now, you have to give this block a name. Upon clicking on the Add to Reusable Blocks, the system will take you to block name field above.

reusable blocks

Give your block a name and click on Save on your right.

Step 4. Mange reusable blocks

By saving the block, you are completely done with creating a reusable block. Now if you ever need to edit, modify, and style block, you can go to Manage all Reusable Blocks and do whatever you wish to.

reusable blocks

Click on the three dots on the Top Toolbar, find Manage all Reusable Blocks option in the dropdown, and click on that to access all saved blocks.

reusable blocks

Step 5. Access reusable blocks

Accessing reusable blocks is even easier. It is just like the way you take a regular block. Click on the (+) plus sign, type block name in the search bar or go to Reusables category at the bottom and pick the block you want.

reusable blocks

The block preview is also available upon hovering over the block names.

There’s a lot to love about Gutenberg editor. The reusability of the blocks is just one of them. Most interestingly, the process completes in some quick and easy steps which we’ve covered here. Hopefully, you now know how to create reusable blocks in Gutenberg editor with this detailed step by step guideline.

WordPress developers are also extending Gutenberg editor by adding custom blocks to it through plugins. You may also read our roundup of 10 Best WordPress Gutenberg blocks plugins. Do visit Virfice for more of such essential tutorials and suggestions.

Leave a Reply

Close Menu
shares

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their uses. To find out more, including how to control cookies, see here: Cookie Policy