Reusable Block feature allows you to save any content block and reuse them in other posts or pages on your website.
What is a reusable block?
All blocks are individual content elements in WordPress editor and can be stored individually as a reusable block as you can turn any block or group of blocks into a single reusable block which will help you to maintain your website’s look and speed up your workflow.
Create a reusable block
Follow the steps below to a reusable block within your post or page editor:
- Add a single block that you would like to reuse.
- Click on the three vertical dots item within the block toolbar.
- From the drop-down menu select the Add to Reusable Blocks menu item.
- You will be asked to name the selected block(s) before adding it into the reusable block library.
- It is recommended to give a name that helps you quickly identify the block in the future.
- Click on the Save button to store the reusable block.
- The selected block(s) will now be saved in the WordPress database with all its settings, and you can reuse this block on other pages of your website.
Holding the control, shift, and arrow keys (Ctrl + Shift + Arrows) simultaneously for Windows and command, shift, and arrow keys (CMD + Shift + Arrows) for Mac will enable you to select multiple blocks at once.
Adding reusable block
Clicking on the plus icon at the top left corner of the editor toolbar will open the add block modal window. You can either find your reusable block by typing its name in the search box or scroll down until you find Reusable tab with the intertwined arrows right at the bottom of the list.
From this tab, you would be able to find a list of all your reusable blocks and select the one you need to reuse or insert to the page. Hovering over the block will allow you to see a quick preview of it before inserting to the page.
Clicking or selecting the block will append its content directly to the editor.
Editing reusable block
You can edit any reusable block by clicking on the edit button in the block toolbar.
Note that changing a reusable block will change it on all locations where you have used it before.
In case you wish to make a change that only appears on a particular page, then you need to convert this reusable block to a regular block first.
To do so, click on the three vertical dots item in the block toolbar and select the Convert to Regular Block option within the drop-down menu.
Doing this will convert the selected reusable block into a single or group of regular blocks which will enable you to make any changes without affecting the original reusable block.
Managing all reusable blocks
The block editor allows you to manage all your reusable blocks from a single screen which provides a listing interface that looks very similar to normal posts listing.
In case, you have made a spelling mistake or want to delete a reusable block which you don’t use anymore this is the page that you need to navigate.
To manage your blocks, click on the
⊕ icon at the top left corner of the editor toolbar and then locate the Reusable tab. From this tab, you’ll see a link to manage your reusable blocks page.
Clicking on the link shown above will bring you to block management page. From this listing page, you would be able to edit, delete, export, and import your blocks.
You can use or transfer any reusable block created in your WordPress set up to another WordPress powered website.
Any block in the block management listing page has an option to export it individually. Clicking on the Export as JSON hyperlink right below the block’s name will start downloading its configuration and content as a JSON file.
Importing reusable blocks
Clicking on the Import from JSON button at the top left corner of the listing will open a popover file submission form which will enable you to choose a file that you have exported or downloaded before.
Once you have selected the file to upload the import button will be enabled which will require you to click on it to proceed.
WordPress will now import the uploaded reusable block and save its content in the database. Once done, you would be able to use it on your website like you would any other block.
Last updated: 2 years ago