In this video, we’ll learn how to use paragraphs on content types by creating a paragraph field.

We’ll cover the following:

How to add a paragraph field to a content type
How to use the paragraph field widget

Transcript

Trainer (00:00):
At this point, we have our paragraph type called Size and Color, but to actually use it on a content type, we need to create a paragraph field on the product content type. Let’s create the field now. Click on Structure, then Content Types, and then click on Manage Fields on the product row. Then click on Add Field, and then click on the Add a New Field dropdown, and scroll down until you see Reference Revisions, and then click on Paragraph. Then in Label, enter in “Paragraphs”, then click on Save and Continue. From the Type of Item to Reference, make sure Paragraphs is selected, then from the Allowed Number of Values option, make sure it is set to Unlimited. This will allow you to add an unlimited amount of paragraphs into the field.

Trainer (00:56):
Once everything has been configured, click on Save Field Settings, scroll down to the Reference Type section, and then select which paragraph you want to appear in the field. If none are selected, then all paragraphs will be displayed. And, as you can see, we only have a single paragraph type. So if we leave it unselected, because we haven’t selected any paragraphs, it will be displayed. So let’s just leave everything as it is, then scroll down and click on Save Settings.

Trainer (01:26):
Now let’s jump to the Manage Form Display. So click on the tab next to Manage Fields, and if we scroll all the way down, we should see our Paragraphs field. Let’s first change the widget from Paragraphs Classic to Paragraphs EXPERIMENTAL. The EXPERIMENTAL widget is the one to use unless you have a specific reason to use Classic. Even though it has the word “experimental” in its name, it is pretty stable. So let’s scroll down and make sure we save the form.

Trainer (02:00):
Let’s scroll back down to the widget and then click on the cogwheel. As you can see, there are a lot of options here. I won’t cover all of them. I’ll just cover a few important ones. So the first important options are Paragraph Title and Plural Paragraph Title. This allows you to change the label name which is used on the field. So in the future, you may want to change this to Components or Module, or you can just leave it as Paragraphs.

Trainer (02:33):
Then we have the Edit Mode. This allows you to control how the paragraph will be displayed in the field. If Open is selected, that means all of the form widgets will be visible. If Closed is selected, that means the form won’t be displayed, but instead, a preview of the paragraph will be shown. Then further down, we have the Default Paragraph Type. This is the paragraph type which will be used when you first create a page. Then below that, we have Enable Widget Features. This is where you can turn off specific features for the widget. So by default we can Duplicate paragraphs and also Collapse them. If this is the first time you are using Paragraphs, then I highly recommend that you play around with these options to get comfortable with them.

Trainer (03:24):
Once you’ve configured everything, just scroll down and click on Update, and let’s just make sure we Save the Manage Form Display. Now let’s go to Manage Display, then Form Content. Then if we scroll all the way down to the bottom, we should see our Paragraphs field. Let’s move it below Body, and let’s also hide the label, then click on Save.

Trainer (03:55):
Now at this point, we are ready to test everything out. Let’s go to Content, and let’s Edit one of our products. And if we scroll all the way down, we should see this Paragraphs field with a single button to Add the Size and Color. Click on Add Size and Color, and you should see the two select list fields. So here we have Size, and I’ll go ahead and select Small, and for Color, I’ll select Blue, and then click on Save. And if we go to our product page, we should see the product attributes below body. And if we scroll down a little bit, we can see it right here: the size Small and the color Blue.

Trainer (04:41):
Let’s go back to the Edit page and look at the Paragraphs widget in more detail. So let’s click on Edit and then scroll all the way down, and I’ll add in another size and color attribute. I’ll select Medium, and also Green as the color. From the right-hand side, we can collapse the paragraphs just by clicking on the Collapse button, and you can straight away see that a preview of the paragraph is shown instead of the fields.

Trainer (05:10):
If you want to edit the paragraph, you just have to click on the Edit button. If you click on the option icon, you can Remove a paragraph and you can also Duplicate a paragraph as well. Then from the options above the Paragraphs, we can switch to a Drag & Drop interface, which is great for reordering a lot of paragraphs. Once you have finished reordering the paragraphs, just click on Complete Drag & Drop. You can also Collapse All of the paragraphs in one go, and you can also Edit All of the paragraphs as well in one go. Now, as you can see, as I mentioned in an earlier video, if you have a need to group fields together, then Paragraphs is a great solution.