[TwigComponent] Using HTML syntax in blocks defined in other Twig Components does not work

[Growiel]

Hi there, I'm following the Symfonycasts LAST stack tutorial, i'm in the modal part, and I think there's a bug when using the HTML syntax inside blocks defined in twig components.

First, here's the Modal code (bit different from the tutorial since i'm using bootstrap):

<div {{ attributes.defaults(stimulus_controller('modal')|stimulus_action('modal', 'close', 'turbo:before-cache@window').toArray()) }}>
    {% block trigger %}{% endblock %}

    <div class="modal fade" {{ stimulus_target('modal', 'modal') }}>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    {% block content %}{% endblock %}
                </div>
            </div>
        </div>
    </div>

    {% if block('loading_template') %}
        <template {{ stimulus_target('modal', 'loadingContent') }}>
            {% block loading_template %}{% endblock %}
        </template>
    {% endif %}
</div>

Here's the code of me using it to add a "delete confirmation modal" (this part: https://symfonycasts.com/screencast/last-stack/modal-component#delete-modal-with-custom-content)

<twig:Modal>
            {% block trigger %}
                <twig:Button variant="danger" withOutline="true" title="Delete Payment" icon="fa-trash-alt" data-action="modal#open"></twig:Button>
            {% endblock %}

            Are you sure you want to delete this payment?
</twig:Modal>

No errors are thrown, but the button is just not displayed:

To make sure my twig:Button is correct, I added it just before the modal, no issues, the button appears as expected:

I switched from the HTML-like syntax to the {{component}} one:

<twig:Modal>
            {% block trigger %}
                {{ component('Button', {variant: "danger", withOutline: "true",  title: "Delete Payment", icon: "fa-trash-alt", 'data-action': "modal#open"}) }}
            {% endblock %}

            Are you sure you want to delete this payment?
        </twig:Modal>

and this does work, button shows up (with a small style issue but that's ok) and works as expected:

Let me know if more information is needed.

UPDATE: It seems like its mix-and-matching that does not work. If I use HTML syntax to define the block, then using the HTML syntax of the button does work:

<twig:Modal class="d-inline">
            <twig:block name="trigger">
                <twig:Button variant="danger" withOutline="true" title="Delete Payment" icon="fa-trash-alt" data-action="modal#open"></twig:Button>
            </twig:block>
            
            Are you sure you want to delete this payment?
        </twig:Modal>

Using the {{component}} syntax inside the HTML block, also works:

<twig:Modal class="d-inline">
            <twig:block name="trigger">
                {{ component('Button', {variant: "danger", withOutline: "true",  title: "Delete Payment", icon: "fa-trash-alt", 'data-action': "modal#open"}) }}
            </twig:block>

            Are you sure you want to delete this payment?
        </twig:Modal>

[smnandre]

Indeed, something we tried to document here: https://symfony.com/bundles/ux-twig-component/current/index.html#nested-components

Anything else we can clarify ?

[Growiel]

Nothing, I didn't manage to catch that in the docs, they are fairly big.

Sorry for the waste of time!

[smnandre]

Don't be :)