Exercise 8

Quote paragraph type

The second part of the component based development approach is to build the back-end infrastructure for the patterns we've built. For the purpose of this training, we will create a custom paragraph type (named Quote), in which we will add the quote pattern's fields. Then we will add the paragraph type to the Basic Page content type so we can create nodes using the quote pattern.

Create a paragraph type

Before we can start populating the quote pattern with Drupal data, we need to create the framework for plugging the pattern with Drupal. We will do this by creating paragraph type with two fields, Quote text and Quote author.

1. Login to your drupal site as an administrator
2. Click Structure | Paragraph Types
3. Click Add paragraph types
4. Under the Label field type Quote then click Save and manage fields
5. Once paragraph type quote is created, click Add field
6. Under the Add a new field dropdown, select Text (plain, long)
7. Under label type Quote Text
8. Click Save and continue
9. Limit the number of values to one(1) and click Save field settings
10. Scroll to the bottom of the next page and click Save settings
11. Repeat steps 5 - 10 for the Quote author field. Use these settings:
    • Field type: Text (plain) (step 6)
    • Field label: Quote author (step 7)
    • All other settings are the same as above

Add Quote Paragraph type to Basic Page content type

A paragraph type alone is useless. In order for us to add data to the paragraph type we need to add the paragraph type to another entity such as a block or content type, as an entity reference field. Then we can create new content using the content type and this will allow us to fill in the quote paragraph fields. Let's do this now.

1. Click Structure | Content Types | Basic Page | Manage Fields
2. Click Add field
3. From the Add a new field dropdown, select Paragraph, which is located under Reference revisions
4. Type Quote as the field label and click on Save and continue
5. Ensure _Type of item to reference _is Paragraph and limit the Allowed number of values to one(1)
6. Click Save field settings
7. Under the Reference Type fieldset you will see Paragraph types
8. Check the box next to Quote and click on Save Settings. Quote is the paragraph type we original built above