[TwigComponent] Unable to access multiple level outerBlocks

[adeys]

Hello,
I've come across a limitation of the Twig Component where I can't access multiple level outerBlocks.
Considering this case :

{# templates/activity/_base_activity.html.twig #}

{% block tabs %}
    <twig:Ui:Tabs:Trigger value="content">
        {{ outerScope.content_tab_label|default('label.activity.content'|trans) }}
    </twig:Ui:Tabs:Trigger>

    {% if show_resources|default(false) %}
        <twig:Ui:Tabs:Trigger value="resources">
            {{ 'label.activity.resources'|trans }}
        </twig:Ui:Tabs:Trigger>
    {% endif %}

    {% block additional_tabs %}{% endblock %}
{% endblock %}

{% block content_panel %}{% endblock %}

{% block additional_panels %}{% endblock %}

<twig:Ui:Tabs:Root>
    <twig:Ui:Tabs:List>
        {{ block(outerBlocks.tabs) }}
    </twig:Ui:Tabs:List>

    {% block panels %}
        <twig:Ui:Tabs:Panel value="content" aria-hidden="false">
            {{ block(outerBlocks.content_panel) }}
        </twig:Ui:Tabs:Panel>

        {% if show_resources|default(true) %}
            <twig:Ui:Tabs:Panel value="resources">
                {{ include('activity/_attachment_list.html.twig', {'attachments': attachments}, with_context: false) }}
            </twig:Ui:Tabs:Panel>
        {% endif %}
    {% endblock %}
</twig:Ui:Tabs:Root>

{# templates/activity/_fallback.html.twig #}

{% extends 'activity/_base_layout.html.twig' %}

{% block content_panel %}
    {{ dump(activity) }}
{% endblock %}

The last template was supposed to override the content_panel, but after rendering, both the <twig:Ui:Tabs:List> and the content tab panel are empty.
I tried using outerBlocks.outerBlocks and outerScope.outerBlocks from the <twig:Ui:Tabs:List> component content but they all return the fallback block name.
I managed to make the previous code by using the following workaround, but it souns hackish and may become hard to maintain if I had to access blocks deeper in the component tree :

{# templates/activity/_base_activity.html.twig #}

{% block tabs %}
    <twig:Ui:Tabs:Trigger value="content">
        {{ outerScope.content_tab_label|default('label.activity.content'|trans) }}
    </twig:Ui:Tabs:Trigger>

    {% if show_resources|default(false) %}
        <twig:Ui:Tabs:Trigger value="resources">
            {{ 'label.activity.resources'|trans }}
        </twig:Ui:Tabs:Trigger>
    {% endif %}

    {% block additional_tabs %}{% endblock %}
{% endblock %}

{% block content_panel %}{% endblock %}

{% block additional_panels %}{% endblock %}

<twig:Ui:Tabs:Root>
    {% block tabs %}
        {{ block(outerBlocks.tabs) }}
    {% endblock %}

    {# Same hack for other top level blocks #}

    <twig:Ui:Tabs:List>
        {{ block(outerBlocks.tabs) }}
    </twig:Ui:Tabs:List>

    {% block panels %}
        <twig:Ui:Tabs:Panel value="content" aria-hidden="false">
            {{ block(outerBlocks.content_panel) }}
        </twig:Ui:Tabs:Panel>

        {% if show_resources|default(true) %}
            <twig:Ui:Tabs:Panel value="resources">
                {{ include('activity/_attachment_list.html.twig', {'attachments': attachments}, with_context: false) }}
            </twig:Ui:Tabs:Panel>
        {% endif %}
    {% endblock %}
</twig:Ui:Tabs:Root>

I'd like if I'm doing something wrong. What would be the best way to achieve what I'm looking for ? And what would be alternatives if I had to come back to an approach without components ?

[adeys]

Any feedback here ?

[smnandre]

Your component template is the fallback one here, right ?

[adeys]

No, the fallback.html.twig is just a regular Twig template extending one (_base_layout.html.twig) that uses the components

[smnandre]

I’m sorry I’m not sure to understand who renders what here. Could you explain me maybe: what is your top template, and the chain of template included, rendered, etc ?

[adeys]

Hello @smnandre. Sorry for the delay.
Here is the rendering graph :
The top template is templates/activity/layout.html.twig and here is how it refers remaining templates :

{{ include(['activity/_' ~ currentActivity.type.value ~ '.html.twig', 'course/activity/_fallback.html.twig'], {
    'activity': currentActivity,
    ....other params
}, with_context = true) }}

Each of the other templates (_activity_type_1.html.twig, _activity_type_2.html.twig, ..., _fallback.html.twig) extends the templates/activity/_base_layout.html.twig, so they can customize it depending on the activity type.
Here is the templates/activity/_base_layout.html.twig content :

{# templates/activity/_base_activity.html.twig #}

{% block tabs %}
    <twig:Ui:Tabs:Trigger value="content">
        {{ outerScope.content_tab_label|default('label.activity.content'|trans) }}
    </twig:Ui:Tabs:Trigger>

    {% if show_resources|default(false) %}
        <twig:Ui:Tabs:Trigger value="resources">
            {{ 'label.activity.resources'|trans }}
        </twig:Ui:Tabs:Trigger>
    {% endif %}

    {% block additional_tabs %}{% endblock %}
{% endblock %}

{% block content_panel %}{% endblock %}

{% block additional_panels %}{% endblock %}

<twig:Ui:Tabs:Root>
    <twig:Ui:Tabs:List>
        {{ block(outerBlocks.tabs) }}
    </twig:Ui:Tabs:List>

    {% block panels %}
        <twig:Ui:Tabs:Panel value="content" aria-hidden="false">
            {{ block(outerBlocks.content_panel) }}
        </twig:Ui:Tabs:Panel>

        {% if show_resources|default(true) %}
            <twig:Ui:Tabs:Panel value="resources">
                {{ include('activity/_attachment_list.html.twig', {'attachments': attachments}, with_context: false) }}
            </twig:Ui:Tabs:Panel>
        {% endif %}
    {% endblock %}
</twig:Ui:Tabs:Root>

Given this content below in the templates/activity/_fallback.html.twig template, I was expecting to see the dumped content in the content_panel block but it just renders an empty content :

{# templates/activity/_fallback.html.twig #}

{% extends 'activity/_base_layout.html.twig' %}

{% block content_panel %}
    {{ dump(activity) }}
{% endblock %}

[smnandre]

So in your situation the template 'activity/_' ~ currentActivity.type.value ~ '.html.twig' does not exist that's right ?

[adeys]

The template exists.
My issue is that I can't override a block (content_panel) in a child template (_fallback.html.twig) because it's rendered in a Twig Component in the extended template.
As the component is two depth down the tree, I can't access top level blocks

[smnandre]

Hmm.

I'd say, as the template exists, _fallback is entirely out of the picture, so none of your templates knows a thing about it. It is not included, nor run, so it is not injected and does not belong in the out blocks.

[adeys]

The fact is I have the same issue when I remove the dynamically referred templates so that only the fallback is rendered, and when I put the exact same content from the existing fullback template to the other included templates.

My point is that it's not a missing or not included template issue, I understand all the logic behind this. It's just that I can't access top-level blocks from the components content block

[smnandre]

Can you provide me a smaller reproducer, without all the "other stuff" here (especially if you say they are not related to), so we can then focus on the bug and find maybe a solution ?

[adeys]

Sure.
Here it is https://github.com/adeys/nested-twig-components-reproducer

[smnandre]

Ok i see now, easier to me when I can play a bit with the code.

Not sure if this is a feature or a bug to be honest, as indeed the index.html template has no knowledge of the overriden block at this point.

[adeys]

I can understand 😅.

Do you have any suggestions or workaround for this, so I don't have to repeat it in all required templates?