Outer Scope Blocks

[Phil23]

Hello folks,

We are currently evaluating using Twig UX components for the standard storefront of shopware. One important aspect for us is the extendability of shopware for our ecosystem.

One issue that we encountered so far is the mix of block scopes that is introduced when using components. We understand that using the block syntax for overriding default content within a component seems logical, but when using these components in a template that should also still be extendable, it limits the way you can access the actual content of the template. Especially when you make use of several nested components.

Example:
You have a template, let's call it page/example.html.twig, which can be extended and has some blocks with content in it. Within those blocks you use a bunch of Twig components.

{# page/example.html.twig #}

{% block main_navigation %}
    <twig:nav>
        <twig:nav:item>
            <twig:nav:link>Home</twig:nav:link>
        </twig:nav:item>
    </twig:nav>
{% endblock %}

If we want to make the navigation extendable, so that, for example, new items could be added, it is not possible to define blocks in the scope of page/example.html.twig because starting with <twig:nav> the scope changes to the inner of the nav component.

The only workaround we found so far is to define the inner content via a variable using set, but this makes the whole markup very messy, especially if you have several nesting levels.

{# page/example.html.twig #}

{% block main_navigation %}

    {% set navigationItems %}
        {% block main_navigation_items %}
            <twig:nav:item>
                <twig:nav:link>Home</twig:nav:link>
            </twig:nav:item>
        {% endblock %}
    {% endset %}

    <twig:nav>
        {{ navigationItems }}
    </twig:nav>
{% endblock %}

Maybe we are missing something here, so if you know of a better solution, we are more than happy to hear about it. We already worked through the documentation like Inheritance & Forwarding "Outer Blocks", but it seems there is no concept for defining outer scope blocks within component content.

Why not slots?
I know Twig already has the block system and using this syntax seems logical on first sight, but it is not quite the same as the concept of slots known from other famous component frameworks, or? Wouldn't it be better to have a separate syntax like {% slot %} to slot content into a component, so that the scopes aren't mixed up with outer page blocks?

[Kocal]

Hi!

First, thanks for considering us for Shopware :)

About your issue, I'm far from being a Twig and Twig components expert, but like you I find the current system a bit confusing, especially when coming from the Vue world when you can easily expose and use slots.

If I understand correctly, ideally you would write something like this? So the block main_navigation_items is easily overridable when extending page/example.html.twig file?

{# page/example.html.twig #}

{% block main_navigation %}
    <twig:nav>
        {% block main_navigation_items %}
            <twig:nav:item>
                <twig:nav:link>Home</twig:nav:link>
            </twig:nav:item>
        {% endblock %}
    </twig:nav>
{% endblock %}

I think this is not supported, I believe that when you are inside a Twig component context, you can't use Twig blocks like that.
On another note, mixing <twig> and {% block %} is not allowed, but that's not really the point here.
Replacing {% block main_navigation_items %} by <twig:block name="main_navigation_items"> is not related with what you expect.

Maybe do you @kbond and @smnandre have any hints? 🙏🏻