Exercise 9

Integrate Quote

The next step to completing the pattern integration process is to map the drupal fields of the Quote paragraph type with the Quote's pattern fields. This is where you get to see the power of UI Patterns. In the past this was a manual process which required to create custom twig template suggestions debugging tools to identify the right field and format for mapping. Now you can do this by dragging fields into their respective regions.

1. Click Structure | Paragraph types | Quote | Manage Display
2. Scroll to the bottom and click the Layout for quote in default tab
3. Under the Select a layout dropdown, scroll to the bottom and select Quote, which should be under Patterns
4. Click Save. Now you should see two new regions in the fields section (Quote Author and Quote Body)
5. Drag the quote fields (body and author) to each of the respective regions
6. Hide the fields labels by selecting - Hidden under the Label column
7. Click Save

Selecting individual field's patterns

First we selected the quote pattern as the layout for our hero. Now we need to map each of the individual drupal fields with the right patterns so we can inherit the styles and behaviors associated with each individual pattern.

1. While still in the Quote Manage Display screen, click the cog icon located the most right of the Author field
2. Under the Choose a field template dropdown select Pattern
3. Under the Pattern dropdown select Eyebrow. A new set of fields will display just below the pattern dropdown
4. For the Author source we want to use Eyebrow as its destination. Do this now.
5. Click Update

Now let's repeat the process with the Quote Body field. Let's repeat the steps above:

1. Click the cog icon to the right of Body
2. Same as above
3. Under the Pattern dropdown select Body
4. For the Body source, select Body as its destination
5. Click Update
6. Scroll to the bottom of the page and click Save