The current proper way to nest patterns?

[Itshalffull]

Hey there,

I'm having trouble finding the proper syntax for nesting patterns, both in an actual drupal website using for instance nested paragraphs, as well as how to show nested patterns in a preview.

I see different syntaxes in:

• This presentation: https://www.drupalgovcon.org/sites/default/files/session/slides/2018-05/component_theming_ui_patterns.pdf

• This theme: https://github.com/SU-SWS/stanford_components/blob/8.x-1.x/patterns/molecules/calendar-blocks/calendar-blocks.ui_patterns.yml

• This issue: https://github.com/nuvoleweb/ui_patterns/issues/76

Curious if this is currently supported and how to go about making it work.

Thanks, Matt

[pdureau]

HI @Itshalffull

Here are real life examples of patterns nesting: ... in a pattern preview:

input_chip:
  label: Input Chip
  fields:
    picture:
      label: Picture
      type: render
      preview:
        - type: pattern
          id: face
    label:
      label: Label
      type: string
      preview: "John Smith"

...in a render array:

[
  '#type' => 'pattern',
  '#id' => 'map_news',
  '#fields' => [
    'title' => $clone->getTitle(),
    'content' => $attachment,
    'links' => [
      [
        '#type' => 'pattern',
        '#id' => 'button',
        '#fields' => [
          'label' => $this->t('Group events'),
          'attributes' => [
            'href' => Url::fromUserInput("/themes")->toString(),
          ],
        ],
      ],
    ];
  ],
];

Is it helping?

[jigarius]

• BTW, say, I have two patterns hero and link.
• In the hero, there are 4 fields: image, links, link_url, link_label
• In the link, there are 2 fields: label, uri
• The admin is allowed to pass either a list of rendered links to the hero or he can provide link_url and link_text separately
• Now, when the admin provides the link_url and link_label separately, I detect it from within the hero.twig.html and try to do something like this:

    {% if link_url and link_text %}
        {% set links = pattern('link', {
            'label': link_label,
            'uri': link_uri,
        }) %}
    {% endif %}
    <div class="hero__links">{{ links }}</div>

In this case, the links markup, gets escaped twice. So, if the link_label were Won't work, it will show up as Won't work. What is the proper way of rendering a pattern from within another pattern and storing it in a TWIG variable?

[pdureau]

That's weird because:

• Thanks to Drupal\ui_patterns\Template\TwigExtension::renderPattern(), pattern() function return a render array based on \Drupal\ui_patterns\Element\Pattern
• The variables token {{ }} is able to manage render arrays in a Drupal context

What do you have in links?

    {% if link_url and link_text %}
        {% set links = pattern('link', {
            'label': link_label,
            'uri': link_uri,
        }) %}
    {% endif %}
    {{ dump(links) }}
    <div class="hero__links">{{ links }}</div>

Maybe, you will have to build the render array by yourself, a bit like that:

    {% if link_url and link_text %}
        {% set links =[ 
        {
          '#type' : 'pattern',
          '#id' : 'link',
          '#fields' : {
             'label': link_label,
             'uri': link_uri,
          }
        }
      ] %}
    {% endif %}
    <div class="hero__links">{{ links }}</div>

[jigarius]

Continuing with the use case I mentioned in my comment above, I am populating link_uri and link_label using the display suite module from the paragraph's manage display page.

[pdureau]

hi @jigarius i have updated my last comment with a proposal based on a render array built directly from Twig

[miloskroulik]

... in a pattern preview:

input_chip:
  label: Input Chip
  fields:
    picture:
      label: Picture
      type: render
      preview:
        - type: pattern
          id: face
    label:
      label: Label
      type: string
      preview: "John Smith"

This works fine, however, the preview of the inner pattern doesn't work - is it supposed to be working? Or do I have to use something like

{% if title is empty %}
  {% set title = 'Title' %}
{% endif %}
{% if body is empty %}
  {% set body = 'Skákal pes přes oves' %}
{% endif %}

in the inner pattern?