ixm_blocks-1.0.x-dev/modules/ixm_blocks_tabs/templates/block--ixm-blocks-tabs.html.twig

{#
@file
Template for a tabbed block displaying referenced paragraph content.

Available variables for themers:
- configuration: An array of block configuration settings, including:
  - 'block_revision_id': A unique identifier used for generating safe element IDs.
- plugin_id: The plugin ID of the block, used to generate block-specific classes and IDs.
- attributes: HTML attributes for the main block wrapper.
- title_prefix: Additional content to output before the main title tag.
- title_suffix: Additional content to output after the main title tag.
- label: The title of the block, if set.
- title_attributes: HTML attributes for the block label.
- content: Renderable content elements of the block, including:
  - field_entity_reference_paragraph: An array of referenced paragraphs, each expected to contain:
    - field_title: The tab title.
    - field_body: The tab content.

Implementation notes:
- Generates Bootstrap 5 compatible tabs using `nav-tabs` and `tab-content` classes.
- Uses a block-specific safe ID (`block_revision_id`) to prevent ID collisions across instances.
- Filters out non-renderable keys (e.g., metadata starting with `#`) before looping over referenced paragraphs.
#}
{%
  set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
]
%}

{% set tabs_id = 'tabs-' ~ configuration['block_revision_id'] %}

<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>

  {{ title_prefix }}
  {% if label %}
    <h3{{ title_attributes.addClass('mb-5') }}>{{ label }}</h3>
  {% endif %}
  {{ title_suffix }}

  {% block content %}
    <div id="{{ tabs_id }}">

      {# ping pong items #}
      {% if content.field_entity_reference_paragraph %}

        {# tab item #}
        <ul class="nav nav-tabs mb-5" id="myTab" role="tablist">
          {% for key, item in content.field_entity_reference_paragraph|filter((value, key) => key|first != '#') %}
            {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
            {% set tab_title = item['#paragraph'].field_title.value ~ safe_hash %}

            {# content #}
            {% if item['#paragraph'].field_title %}
              <li class="nav-item" role="presentation">
                <button class="nav-link{% if loop.first %} active{% endif %}" id="{{ tab_title|clean_id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ tab_title|clean_id }}" type="button" role="tab" aria-controls="{{ tab_title|clean_id }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
                  {{ item['#paragraph'].field_title.value }}
                </button>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

        {# tab content #}
        <div class="tab-content" id="myTabContent">
          {% for key, item in content.field_entity_reference_paragraph|filter((value, key) => key|first != '#') %}
            {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
            {% set tab_title = item['#paragraph'].field_title.value ~ safe_hash %}
            <div class="tab-pane fade{% if loop.first %} show active{% endif %}" id="{{ tab_title|clean_id }}" role="tabpanel" aria-labelledby="{{ tab_title|clean_id }}-tab">
              {% if item['#paragraph'].field_body %}
                {{ item['#paragraph'].field_body|view }}
              {% endif %}
            </div>
          {% endfor %}
        </div>

      {% endif %}
    </div>
  {% endblock %}

</div>