How to Create a Reusable Block in Gutenberg?

0
create reusable blocks in gutenberg

Do you often use the same content snippets in your WordPress posts? If you do, then you will love the Reusable Block feature in the new Gutenberg block editor. It lets you save any content blocks of your post and reuse them in other posts and pages of your website.

In this article, we will show how you can create a reusable block in the WordPress block editor. We will also show you how to add the reusable block on your WordPress posts and export them to use on your other websites.

What are Reusable Blocks in Gutenberg?

Reusable blocks in Gutenberg are those content blocks that are saved individually for later use.

Many bloggers often use same content snippets in multiple articles like CTA at the end, or social media links below the article.

Since classic editor does not have the option to store these content snippets, you will need to manually save them as text files on the computer and then copy/paste them when needed.

However, the new WordPress block editor solves this problem by the introduction on reusable blocks.

Now, you can save the commonly used content snippet in your WordPress editor and then instantly reuse them anywhere you require.

Here are some conditions where you can use the reusable block to work more efficiently:

  • Add social media follow links at the end of each article
  • Add CTA buttons in your WordPress posts or pages
  • Save tables and reuse them
  • Add feedback forms to your pages
  • Manually add inline affiliate banners

With that being said, let’s take a look at how you can create a reusable block in Gutenberg block editor:

Create a Reusable Block in Gutenberg Editor

All the Gutenberg blocks are individually content elements in WordPress editor and they can be saved individually as a reusable block.

The first thing you need to do to create a new post or edit an existing one.

On the post edit screen, click on “Add New Block” button and then choose a block type according to the content that you are going to save.

After adding the blocks, you need to add the contents that you want to reuse. You can use the styling and formatting options in the toolbar and block settings.

Here, we have added a paragraph block with few lines of texts.

Once you are done editing, click on the three-dot menu in the toolbar and select “Add to Reusable Block” option.

You will be asked to enter a name for the reusable block. We recommend you to use a name that helps you identify the block and what it does.

Then, click on the “Save” button to store your reusable block. Your block will be stored on the WordPress database with all the settings you have applied to it.

Adding Reusable Block on Other Posts and Pages

Now that you have learned how to create a reusable block in Gutenberg, let’s see how to add the reusable block on your WordPress posts and pages.

Once again create a new post or edit an existing post where you want to add the reusable block.

On the post edit screen, click on “Add New Block” button.

Your reusable block will be located in the “Reusable” tab. You can also find it by typing the name in its search.

You can view the preview of your reusable block by hovering the mouse over it.

If everything is alright, click on the block to insert it.

Your block will appear in the post editor.

You can also edit your reusable block by clicking in the edit button in the block.

However, you need to keep in mind that changing a reusable block will edit it in all location where you have used it.

If you want to make changes on the block that appeared on the particular post, then you need to convert it to the regular block.

Click on the three-dot menu in the block toolbar and select “Convert to Regular Block” option.

This will convert your reusable block into a regular block and you will be able to make changes to it without affecting the original reusable block.

Managing Reusable Blocks in WordPress Editor

After using reusable blocks for a while, you may have some blocks that you don’t use anymore or some block that you want to rename.

Gutenberg block editor easily lets you manage all the reusable blocks.

To manage your blocks, click on the “Add Block” button and locate the reusable tab. You will see a link to manage your reusable block page.

Click on it to go to the management page. From here, you can edit, delete, export and import any of your blocks.

Export/Import Reusable Blocks

Reusable blocks can not only be used on the website that they are created but can also be used on other websites.

You can export the blocks from the block management screen. Simply click on the export button below a block and WordPress will send it to the JSON file.

Now you can switch to the admin area of another website. Go to the Block Management Screen and click on “Import from JSON” button.

This will show a file upload box. Click on the file that you want to choose and click on the “Import” button to proceed and save the imported block in the database.

Conclusion:

We hope this article helped you to learn how to create and use a reusable block in Gutenberg block editor. You may also want to check out the article WordPress Gutenberg Keyboard Shortcuts to help you work smart and save time!

Elegant WordPress Themes

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.