How to Create Reusable Blocks

Description

In this lesson, you will learn how to use Reusable Blocks in the WordPress block editor. If you often use the same content blocks in your WordPress Posts, then Reusable Block can help you. It allows you to save blocks and reuse them in other posts, pages, and also you can export them to use on your other WordPress websites.

Objectives

After completing this lesson, participants will be able to:

  • Create and customize Reusable Blocks.
  • Export-Import Reusable Blocks and use on other WordPress websites.
  • Demonstrate how to use Reusable Blocks.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Are you familiar with WordPress Admin Dashboard?
  • Do you know how to create posts and use blocks?

Materials Needed

  • A local install of WordPress.
  • Theme files downloaded or beneficial if installed (We are using twenty twenty-one for demonstration).

Notes for the Presenter

  • Understanding of block editor and creating blocks
  • Any example or concept for which Reusable Blocks are going to create.

Lesson Outline

  • Explain what block is and how to create them.
  • Explain the use of the Reusable Blocks.
  • Give an example by creating Reusable Blocks.
  • Show how to use them to another post/page.
  • Show how to export and import them into other WordPress websites.

Exercises

Make sure participants know about creating Blocks before beginning this.

  • Create blocks and make them Reusable Blocks.
  • Create another post and use created Reusable Blocks.
  • Export created Reusable Blocks, import them to other websites and use them by creating any post.
  • Demonstrate your Reusable Blocks.

Assessment

Can you export-import your Reusable Block to use into other WordPress websites?

  1. True
  2. False

Answer: 1. True

Where can you use Reusable Blocks?

  1. Posts
  2. Pages
  3. Custom Posts
  4. All of the above

Answer: 4. All of the above

Additional Resources

  • What are Blocks?

Example Lesson

This lesson will walk you through creating Reusable Blocks. A Reusable Block in WordPress editor is a content block that you create, save and reuse later.
For example, if you want to create social icons, call-to-action, thank you note, feedback forms, tables, or any type of banner. Then you can use this reusable feature of the block editor.

  • Log in to the WordPress Administration Panels.
  • Create a new post or edit an existing one. On the post edit screen, click on add new block button (inserter) and then choose a block type according to your content that you are going to save.

Add new block
  • Click on the block which you want to make the Reusable Block and then click on the three-dot menu (Kobra menu) and select the “Add to Reusable Blocks” option.
Single Reusable Block
  • If you want to make a set of blocks as Reusable Blocks, then select all the blocks that you want to make reusable. Now same as above, click on the three-dot menu and select the “Add to Reusable Blocks” option.
Reusable Block
  • Save the block by insert name and click on save, it will save your Reusable Block into the directory, and then you can use it later.
Save Reusable Block
  • Create another post/page where you want to insert it. Click on the plus icon in the top-left toolbar, visit the “Reusable” tab and insert a required Reusable Block here (what you have created earlier).

Insert Reusable Block
  • Make sure to convert it to a Regular Block, and you can find this option above your inserted block or in the top toolbar.

    Tip: If you don’t convert Reusable Block into a Regular Block and make changes, then the changes will reflect globally.

Convert to Regular Block

  • You can manage (add, edit, view, delete) all your Reusable Blocks. Simply visit the three-dot menu (Kobra menu) on the rightmost in the toolbar. Click on it, and you find an option as “Manage all reusable blocks“, or you can visit this link directly,
    Your-domain-name/wp-admin/edit.php?post_type=wp_block/
Manage all Reusable Blocks

Export-Import Reusable Block to use into other WordPress websites

You can also Export-Import Reusable Blocks to use this into other WordPress website.

  • Go to the “Manage all reusable blocks” page (which is mentioned above), where you find the export-import feature.
  • Hover on the Reusable Block post which you want to export, and export the file by clicking on the “Export as JSON” link option.
Export Reusable Block
  • Go to the website where you want to import that Reusable Block and follow the same process to access the “Manage all reusable blocks” page.
  • Click on “Import from JSON”, choose your file, and then click on import. A file will be imported and here you can use that Reusable Block into another website too.
Import Reusable Block

Lesson Wrap Up

Tip: Follow with the Exercises and Assessment outlined above.

Now you get to know about how to create Reusable Blocks that pretty much save your time to create the same block content again and again and the best part is you can edit it either globally or individually (to edit individually we need to convert it to regular block).