You will already have needed to set up a paragraph type, that is the unique group of fields that form a component. Once you have a paragraph type, you can attach it to a custom block type.
Below is the paragraph type I have set up; it has 4 fields, the link is used to wrapper the whole card to make it a large button as illustrated in the second image.
Create a block type and add fields
Visit the block types page and then set up a new block type as outlined following.
Admin > Structure > Block types
/admin/structure/block-content
Create a block type using the Add block type button, or use a current block type and click on the manage fields operation.
If creating a new block type:
- Give the block type a name.
- Since our block type might need to be restricted to regions within our layout, it might sometimes be a good idea to add region information to the block type name. I.e. Sidebar related article.
- Add a Description.
- Decide if to create new revisions by default.
- Click Save and manage fields.
Manage Fields
- Visit the Manage Fields tab for the block type.
- Delete the Body field if not needed.
- Click Create a new field.
- Select Paragraphs and click continue.
- Add a Label
- Continue
- Configure the field:
- Use the defaults.
- Field Storage: I have set the limit to four.
- If you want to add a lower limit, you'll need to add the Paragraphs Limits module.
- Select the Paragraph types you want to reference.
- For a block type, you will probably only want to select one for the reason mentioned in part one. In this case, I am selecting the Product card with link.
- No need to Enable Paragraph Blocks if you have the module installed.
- Save Settings
Now you need to Manage form display
Change to the Paragraphs Stable widget; this will be like this if you used the Paragraph field when creating your new block type.
Visit the settings using the small gear. There are many settings, but when setting up only one paragraph type, you can leave the settings as default.
Manage Display
Now visit the Manage display tab. You will probably want to hide the label. You can leave the format as rendered entity and the view mode as default, unless you have set up other view modes to use. I assume if you are reading this, you haven't set up other view modes for the paragraph type, and most of the time, this will be fine as we also need to create a template for the display, as we will do next.
While we are looking at the manage display for the block type, I would like to bring up that you may want to add a template for this block type and your paragraph type view mode; in the case above, it is the default view mode. This is because it is the paragraph type that has the individual fields in it as illustrated in the top images.
I bring this up here as it is a good example of how Drupal works, both the block type and the paragraph type (and content type, media type etc.) are entities and therefore have the same manage fields, manage form display, and manage display architecture. So even though we have just been modifying the manage display of the block type, we now need to move to the manage display of the paragraph type to lay out the fields. You will see this in the next part.
Okay onward.
So now we need to style the look of the paragraph type. We will look at this in the next chapter, Styling Block types. See you there.