Help understanding nested twig components and optional elements

[dheineman]

Hello all,

I have been experimenting with Twig components and am trying to figure out if what i am trying to do is possible, or even advised (maybe i need to look at it differently). i have searched through issues/discussion the docs and even the source but i am not seeing an option right now.

I have a modal component composed of a header, body and footer & a form component (simplified code listed below) and when i used this component in my page i want the form to optionally render if the user provides any nested form props/attributes.

Besides the optional form i cannot figure out if the nesting in am trying to do is even possible. On my page an have added the following code. The h1 text here should be placed in between the <twig:Modal:Body></twig:Modal:Body> tags in the component below.

<twig:Modal
    header:title="This is the modal title"
    form:method="post" {# <-- the <form></form> tags should be rendered around the modal components #}
>
    <h1>This text is in the body of the modal</h1>
</twig:Modal>

But because of the <twig:Form> is surrounding it (which itself has its own content block) it will instead render just the form tags with the text "This content here" in it. Is there any way to have nesting like this?

Components

{# Modal.html.twig #}
<div class="modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <twig:Form {{ ...attributes.nested('form') }}>
            {% block header %}
                <twig:Modal:Header />
            {% endblock %}

            {% block body %}
                <twig:Modal:Body>
                    {% block content %}This content here{% endblock %}
                </twig:Modal:Body>
            {% endblock %}

            {% block footer %}
                <twig:Modal:Footer />
            {% endblock %}
        </twig:Form>
        </div>
    </div>
</div>

{# Modal/Header.html.twig #}
<div class="modal-header">
    {% block content %}
        <h5 class="modal-title">{{ title }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    {% endblock %}
</div>

{# Modal/Body.html.twig #}
<div class="modal-body">
    {% block content %}{% endblock %}
</div>

{# Modal/Footer.html.twig #}
<div class="modal-footer">
    {% block content %}
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
    {% endblock %}
</div>

{# Form.html.twig #}
{% set formAttributes = attributes.__toString() %}
{% if attributes.count > 0 %}<form {{ formAttributes }}>{% endif %}
    {% block content %}{% endblock %}
{% if attributes.count > 0 %}</form>{% endif %}

[Kocal]

Hi, I'm not an expert about this subject, but maybe outerBlocks may help?

What if you replace {% block content %}This content here{% endblock %} with {{ block(outerBlocks.content) }}?