In this video, learn how to create reusable paragraphs.
We’ll cover the following:
- Install the “Paragraphs Library” sub-module
- Download Entity Usage module
- Create a reusable paragraph
- Use a reusable paragraph on multiple pages
Composer command
composer require entity_usageTranscript
Trainer (00:00):
At this point, you’ve learned how to use the paragraphs module. Now I want to show you how to create a library of reusable paragraphs. Because just imagine you have 20 to 30 products and you want to have the same product attributes or paragraph across all of your products. You could create a paragraph across all of your products, but then if you want to update the product attribute later, you will need to go through all of your products again to change it. Instead, you could use a submodule which comes with paragraphs called, Paragraphs Library, and it allows you to create a library of re-usable paragraphs. And when you update or change a reusable paragraph, it will automatically update across all pages.
Trainer (00:49):
To get started, let’s go to extend and search for paragraphs. And you can see the module right here, but you’ll notice that we cannot check the checkbox to install it. And if we click on the module description, you can see that we are missing one of the dependencies, which is entity usage. So let’s go and check out that module.
Trainer (01:14):
If you go to drupal.org/project/entity_usage, this module is used to track the usage of entities within pages. The paragraphs library module uses it to track which page is using a reusable paragraph. So all we need to do is download it and install it, and we don’t have to configure anything. Before we can install Paragraphs Library, let’s download this module using Composer. Let’s jump into our terminal and type in Composer require Drupal/entity_usage.
Trainer (01:55):
Now, if you see these Composer error, it is because your minimum stability in Composer is set to stable, meaning that Composer will only download packages if they are considered stable. But if we go back to the project page and scroll all the way down, you can see that we only have a beta. We do not have a stable release.
Trainer (02:20):
So we have two options. The first option is, we can change the minimum stability in composer.json, or we can specify a specific version in our Composer require command. So let’s specify a specific version. Now to do that, all you need to do is copy the version, which is 2.0-beta6. And let’s go back to our terminal. Let me clear this and let me go back up a few, and then type in colon and then specify the version. So the command will be composer require group or slash entity underscore usage colon. Then the version, which is version two, beta 6. Now that the module has been downloaded, let’s jump back to our site and I’ll close this tab. And if we refresh the extend page and let’s search for paragraphs, we can see now the Paragraphs Library module can be installed.
Trainer (03:22):
And of course we want to install entity usage. Now that the module has been installed, go to content and you should see a new tab called paragraphs. Click on it. And from here, you can manage all of your reusable paragraphs or as this module calls them, library items.
Trainer (03:43):
To create a reusable paragraph, click on add library item. Then in label entering the name of the reusable paragraph. For this example, I’ll enter in small slash red and then I’ll enter in reusable. And now I need to specify the paragraph which will be used. So I’ll click on add size and color, which is the paragraph we created previously. Then all we need to do is specify a size, which is small and a color, which is red. Then click on save. Now let’s test everything out by adding this paragraph to a product. Go to content, then edit this product.
Trainer (04:32):
And if we scroll all the way down, we should see the two previous paragraphs which we created. Let’s remove them, then click on the down arrow and you should see another option in this button, which is add from library. If you can’t see this option, then it means you have configured your paragraph field to only show selected paragraph types. If we go to a structure and I’ll open that up in a new tab, content types, and then manage fields on the product row, and let’s go and edit our paragraph right here, then scroll down to the reference type section and make sure you have configured the section correctly. In this example, all of the paragraphs here will be displayed because none are selected. But if I was to select just size and color, that means you won’t see from library unless you check it. So if you can’t see the from library option in your paragraph field, come to this page and check how your paragraph field has been configured.
Trainer (05:43):
We can now close this tab and let’s go back to our product. To add our reusable paragraph, click on the down arrow, then click on, add from library. Then using this autocomplete field, we just need to search for the reusable paragraph which we created. And I do know that the label is small, red and then reusable. So let’s select it. Then click on save.
Trainer (06:09):
Now let’s quickly add it to another product. So I’ll click on edit, on the second product here. And if we scroll all the way down, click on the down arrow then, from library. And if I search for small, I will then select small red reusable and click on save. Then if we open both products in new tabs, we should see our product attribute with the size small and the color red. Then if we go to the other product, we can also see the same attribute, which is size small and color red.
Trainer (06:45):
Now let’s go ahead and change this paragraph. Let’s jump back to the first tab, then go to paragraphs. And one thing I do want to mention from this table, there is a used column and you can see here, we have the value of two. If we click on it, we can see the two pages where this paragraph is used. This is where entity usage is used to track exactly on which page a paragraph is used on. Let’s go back and to edit this paragraph, click on the edit button and let’s change it from small to large, and the color from red to blue. And then if we scroll down and click on save. Now, if we go to our products up here and refresh, take note of the size, which is small and the color, which is red. If we refresh, you can now see the size is large and the color is blue. If we go to the other product and refresh, the size has changed from small to large, and the color is now blue.