Skip to content

Instantly share code, notes, and snippets.

@ModulesUnraveled
Last active November 13, 2020 02:29
Show Gist options
  • Save ModulesUnraveled/624b21b4349fc380e46d1ae8928a23b1 to your computer and use it in GitHub Desktop.
Save ModulesUnraveled/624b21b4349fc380e46d1ae8928a23b1 to your computer and use it in GitHub Desktop.
Nested Paragraphs + PL
{#
# This is the PL template for the "parent" pattern
#}
{% set flexible_grid_base_class = flexible_grid_base_class|default('flexible-grid') %}
{% set item_count = flexible_grid_item_count|default(rows|length) %}
{# Dynamically define grid columns #}
{% if item_count is divisible by(3) %}
{% set flexible_grid_modifiers = ["columns-3"] %}
{% elseif item_count is divisible by(2) %}
{% set flexible_grid_modifiers = ["columns-2"] %}
{% endif %}
<div {{ bem('wrapper', [page_layout_modifier], flexible_grid_base_class) }}>
{# Heading #}
{% if flexible_grid_heading %}
{% include "@molecules/headings/section-heading.twig" with {
section_heading: flexible_grid_heading,
} %}
{% endif %}
<div {{ bem('content', flexible_grid_modifiers, flexible_grid_base_class) }}>
{# Content #}
{% block flexible_grid_content %}
{% for item in rows %}
{% include "@organisms/flexible-grid/_flexible-grid-examples.twig" %}
{% endfor %}
{% endblock %}
</div>
{# Link #}
{% if flexible_grid_link_url %}
{% include "@atoms/00-links/link/link.twig" with {
link_url: flexible_grid_link_url,
link_content: flexible_grid_link_text,
link_blockname: flexible_grid_base_class,
link_modifiers: ['more', flexible_grid_button_color],
} %}
{% endif %}
</div>
{#
# This is the Drupal template for the "parent" paragraph type
#}
{% embed "@organisms/flexible-grid/flexible-grid.twig" with {
flexible_grid_heading: content.field_headline,
flexible_grid_link_url: content.field_link.0['#url'],
flexible_grid_link_text: content.field_link.0['#title'],
flexible_grid_button_color: "blue",
} %}
{% block flexible_grid_content %}
{{ content.field_testimonials }}
{% endblock %}
{% endembed %}
{#
# This is the PL template for the "child" pattern
#}
{% set testimonial_base_class = testimonial_base_class|default('testimonial') %}
{% set testimonial_image %}
{% block testimonial_image %}
{% include "@atoms/images/image/_image.twig" with {
image_src: testimonial_image,
} %}
{% endblock %}
{% endset %}
<div {{ bem(testimonial_base_class, testimonial_modifiers, testimonial_blockname, ['flexible-grid__item']) }}>
{% include "@atoms/01-text/text/blockquote.twig" with {
blockquote_content: testimonial_content,
} %}
{% embed "@atoms/00-links/link/link.twig" with {
link_base_class: 'image',
link_blockname: testimonial_base_class,
link_url: testimonial_link_url,
} %}
{% block link_content %}
{{ testimonial_image }}
{% endblock %}
{% endembed %}
{% embed "@atoms/00-links/link/link.twig" with {
link_base_class: 'name',
link_blockname: testimonial_base_class,
link_url: testimonial_link_url,
} %}
{% block link_content %}
{% include "@atoms/01-text/text/text.twig" with {
text_content: testimonial_name,
text_base_class: 'name',
text_blockname: testimonial_base_class,
} %}
{% endblock %}
{% endembed %}
{% include "@atoms/01-text/text/text.twig" with {
text_content: testimonial_title,
text_base_class: 'title',
text_blockname: testimonial_base_class,
} %}
</div>
{#
# This is the Drupal template for the "child" paragraph type
#}
{% embed "@molecules/testimonial/testimonial.twig" with {
testimonial_content: content.field_simple_text,
testimonial_name: content.field_attribution_name,
testimonial_title: content.field_attribution_title,
testimonial_link_url: content.field_link.0['#url'],
} %}
{% block testimonial_image %}
{{ content.field_image }}
{% endblock %}
{% endembed %}
@thamas
Copy link

thamas commented Oct 11, 2018

"There’s a lot going on in that example, but the basic idea is that the “parent” pattern has a twig block, and you just pass in the content.my_actual_content_field field into that block in the Drupal template."
– bjlewis2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment