In this video, we’ll learn how to create a custom paragraph type.

We’ll cover the following:

How to create a custom paragraph type
Attach fields to a paragraph type

Size “Allowed values list” options

small|Small
medium|Medium
large|Large

Transcript

Trainer (00:00):
Once you’ve installed paragraphs, go to structure, then click on paragraph types. And, now let’s create our first paragraph type which will be used as a product attribute. So, click on, add paragraph type, and then in label, entering size and color, then click on save and manage fields. Straight away, you may have noticed that we have, manage fields, manage form display, and manage display. These are the same tabs as we have on content types, and also taxonomy vocabularies. Paragraph types are fieldable, which means we can attach the same set of fields as we can on content types onto paragraphs.

Trainer (00:43):
Let’s now create our first field, which will be a dropdown for size. So, click on, add field and from the add a new field dropdown, select list texts, all the way down at the bottom. And, then in label entering size, then click on save and continue.

Trainer (01:03):
Then in the allowed values list, we’ll need to specify the select list options. So, I’ll paste in these options, and it will be just three options, small, medium, and large. Then click on, save for settings. Leave everything else as it is. And, then click on, save settings.

Trainer (01:22):
For the color field, instead of using a list text field, let’s instead create a taxonomy vocabulary, which will then be used to manage the color options. This will then allow an editor to update existing color names, or even create new ones.

Trainer (01:40):
So, before we can create the field, let’s go ahead and create the taxonomy vocabulary. Click on, structure, then scroll down and click on taxonomy. Then add vocabulary. In the name field, enter in color, and click on save.

Trainer (01:58):
And, now we need to create our actual color options. Click on, add a term, and we enter in red into the name field, and we’ll also create blue as a color option, green, and finally brown. If we click on the taxonomy link in the breadcrumb, then list terms, we can see our color options right here. And, if you want to create another option, just click on, add a term to create another color option.

Trainer (02:27):
Let’s now go back to the paragraph type, click on structure, then paragraph types, and then manage fields. Now that we have already created our taxonomy vocabulary to manage the color options, let’s create the field. Click on, add field, and from the add a new field dropdown, scroll down to the reference section, and click on taxonomy term and in label, enter in color as the name, then click on save and continue. Make sure the type of item to reference is taxonomy. And, also that the allowed number of values is set to one. And, this means that you can only select a single color, which is exactly what we want.

Trainer (03:10):
Then click on save field settings, scroll down, and in the reference type section, select color under vocabulary, then click on save settings. Click on manage form display from the widget dropdown on the color field, choose select least as the widgets. Then click on, save and finally click on, manage display. And, change the label from above to inline, for both field formatters, and click on the cog wheel on color, and uncheck link label to the referenced entity. Then click on update and click on save.