Twig Blocks

What are Twig Blocks?

Twig blocks serve a dual purpose in Drupal, acting as both placeholders and replacements. They can be likened to empty spaces waiting to be filled within a Drupal page or regions within your pages.

The challenge we encounter is finding the right balance between controlling the markup and adhering to Drupal's recommended practices for content rendering. When it comes time to integrate a Storybook component with Drupal, we often rely on include statements, which generally suffice. However, there are instances where we need to modify content or markup before Drupal renders a component, and include statements do not provide this flexibility. While extends statements could be an option, they may also have limitations in certain scenarios. In such cases, the ideal approach is to employ Twig's embed statements. Embed statements combine the functionalities of both include and extends statements, providing a more versatile solution.

Let's explore using the Accordion component that is rendered from the theme generator.

accordion.twig

{{ attach_library('training_theme/accordion') }}

<div class="{{ modifier }}">
  <div class="accordion">
    {% block accordion_items %}
      {% for item in items %}
        {%
          include '@ignite_theme/accordion/accordion-item.twig' with { item: item } only
        %}
      {% endfor %}
    {% endblock %}
  </div>
</div>

accordion-item.twig

Within the accordion.twig template, we have defined a Twig block called accordion_items. On its own, this block does not have any functionality. The purpose of including this block is to allow for the integration of accordion items using a separate paragraphs presenter template.

IMPORTANT: Twig blocks are not the same, or have anything to do with Drupal blocks.

block-content--accordion.html.twig

...
<div{{ attributes.addClass(classes) }}>
  ...
  {% block content %}
    {% embed '@training_theme/accordion/accordion.twig' with { content: content, modifier: "container-fluid" } only %}
      {% block accordion_items %}
        {{ content.field_accordion_item }}
      {% endblock accordion_items %}
    {% endembed %}
  {% endblock %}
</div>

paragraph--accordion-item.html.twig