Reusable Blocks are one of the important features of the WordPress block editor (Gutenberg). It helps you create ready-made designs and formats that can be used anywhere (articles, pages, other WordPress sites).
If you have formats or designs that you want to use repeatedly, for example, certain buttons, text, or an image, or you want to put a profile of the author, for example, at the end of the article, and many others. Using Reusable Blocks, you can create this design or layout just once, and then add it anywhere with great ease.
Reusable components are one of the hidden features in the new WordPress editor, but they save you a lot of time and work, and you do not need any technical experience to deal with them.
In this article, we will talk about how to use Reusable Blocks to create a specific format or create a group of components together. We will also learn about the features it offers and how to export it and use it on other WordPress sites.
What are Reusable Blocks ?
A reusable component allows you to create a specific layout or design of a regular component from the rest of the content, whether it contains a single element or a group of elements, and save it as a reusable component; Thus, you design it once and use it more than once on any page of your site.
Suppose, for example, that you have a specific text that you want to repeat on all of your pages, or that you want to place an image with a button next to it, and you want to repeat it on all of your pages or articles. The same goes for social media sharing and other content you want to repeat more than once.
Benefits of using reusable components
If you are the owner of a website or blog, today you must take advantage of this important feature to save time and save effort. There are many things on your site that you will need to repeat more than once, whether on your pages or articles.
One of the most frequently repeated things is the beginning and end of articles, where you need, for example, to add social media buttons, add a glimpse of the author, comments, and other things. With Reusable Blocks, you can design this just once.
The same applies to creating tables, which is difficult to design; You will no longer need to design it more than once. There are also many elements that you can save once, such as surveys, forms, and tests, and then use them and change the content only.
Simply put, you design only once, then save this design and use it where you want, and then modify the content if you want.
How to use the reusable component
Through the WordPress component editor, you can create a reusable component, modify it, and export or import components. It also provides you with a page to manage and control reusable components.
We will create some examples and explain them gradually throughout the article, so that you can learn step by step how to create a reusable component, how to use it in other articles and pages, as well as how to delete a component and how to control and manage components.
1. Create a new usable component
For example: We want to create a reusable component, which is a paragraph and a group of buttons for social media accounts, so that we can use this component in all articles.
First, we will create a new paragraph, by clicking on the (+) sign, and then adding the required component, let it be a paragraph
The paragraph we want will be as follows
Then we will create social media buttons for the blog or website. You have to press the (+) sign and then choose Button Group , to add a group of buttons
After that, you can add the number of buttons you want, by pressing ( + ) .
Then you can change the name of the buttons by selecting and changing the text
You can also control the buttons, by selecting the button you want to design, pressing the three dots , and choosing Show more settings . You will see a long list of options that will help you design the button, such as changing the color, controlling the text or size, adding effects, or many other options.
Thus, we have a component that encourages the visitor to share content across social media platforms, and we want to use this component as a ready-made form that can be called up on any page or article with one click, instead of setting it up again every time. We will do this by specifying the content of the desired component
Then click on the three dots and then add reusable components
Then the reusable component will be created.
You can change the name of the component, by clicking on the three dots menu , and choosing Show more settings ,
You can change the name (we will call it Social Accounts) from here and click Publish to save the new name
Now we have a reusable component, which is a paragraph and a group of buttons, and by pressing just one button, we can add this component to other pages or articles, or you can also export it for use on other sites.
2. Call the component usable on a new page
Now we can easily call this component by opening a new article, by going to Articles << Add New , then to add the previous component that was created at the top or any other component. We click on the Add New Component sign (+) and then choose Browse All
Next we choose the reusable tab
This is where all the components that were created are located. Once you move your mouse over the block, a live preview will appear next to it
Once we click on the component we want, the component created in step 1 will be automatically added
Thus, you can easily call up the component that you previously designed in this way with one click in any
3. How to delete or manage reusable components
If you want to delete a component that already exists, this can be done either by deleting it from within the page or article on which it is located, or you can do so through the Reusable Components control panel. If we want to delete the component from a specific page only, you must, for example, enter the page on which it is located. In it, select the component, click on the three dots , and then remove the component
Note: In this way, te component is deleted from the specific page or article and not permanently or from all pages. To delete the component from all pages permanently, you must go to Manage Reusable Components .
From here you can also fully control and manage reusable components, as you can:
- Create a new component before use
- Permanently delete a component
- Modifying components
- Export and import of components
You can control and manage all the components that have been created, by clicking on the three dots and then choosing Manage reusable components .
Or you can do this by clicking on the (+) sign and choosing to browse all
Then choose the Reusable tab, and choose Manage all reusable components
It opens a new page for us from which we can either export components as JSON files, export them, modify components, add a new component, or delete components.
To permanently delete an item, you can tap Trash or select the item and tap Move to Trash
To edit a component, you have to click and release it. For example, we want to modify the (Call US) component. We click on it to edit the component, and the page for the component opens for us.
For example, if we want to add a paragraph, we click on the (+) sign and add the paragraph
The picture becomes as follows
Then, as we did in Step 1, you select the items you want, and click Add to Reusable Components.
After that, you can try adding this component to any page or place and you will notice the change in the component
Note: Any changes you make to the component, whether adding, deleting, or modifying, will apply the changes to all places where this component has been used.
If you want to take advantage of these components and use them on other WordPress sites, you can export them in JSON format and use them on any other site you want.
According to what was mentioned previously, any modification will lead to the changes being applied to all places in the component, but the question is how do we modify a component on one page without affecting the rest of the pages.
Convert a reusable component to a regular component
Naturally, the reusable component makes modifications to all content included on all pages, so it is considered a recyclable component. But what if you want to modify the component on only one page without applying the changes to all pages that use the reusable component, in this case The case requires converting the component initially into a regular component and then modifying it as you wish
