[TwigComponent] Issue with nested blocks using HTML syntax

[javiereguiluz]

I'm using Twig components (not Live components) and they work great even when nesting them. But, I'm facing an issue with some nested component when using the HTML syntax:

<twig:Card:Group mdCols="2" xlCols="3">
    {% for event in events %}
        <twig:Card:Card isClickable="{{ true }}">
            {% block title %} ... {% endblock %}
            {% block body %} ... {% endblock %}
            {% block footer %}
                <twig:Button isBlock="{{ true }}" data-bs-toggle="dropdown">
                    Add to Calendar
                </twig:Button>

                {# ... #}
            {% endblock %}
        </twig:Card:Card>
    {% endfor %}
</twig:Card:Group>

The <twig:Button ...> nested component is not rendered. In the output HTML you see the raw <twig:Button ...> code.

---

This works correctly:

<twig:Card:Group mdCols="2" xlCols="3">
    {% for event in events %}
+        {% set button %}
+            <twig:Button isBlock="{{ true }}" data-bs-toggle="dropdown">
+                Add to Calendar
+            </twig:Button>
+        {% endset %}
        
        <twig:Card:Card isClickable="{{ true }}">
            {% block title %} ... {% endblock %}
            {% block body %} ... {% endblock %}
            {% block footer %}
+                {{ button }}
-                <twig:Button isBlock="{{ true }}" data-bs-toggle="dropdown">
-                    Add to Calendar
-                </twig:Button>

                {# ... #}
            {% endblock %}
        </twig:Card:Card>
    {% endfor %}
</twig:Card:Group>

---

Using the other Twig component syntax works too:

<twig:Card:Group mdCols="2" xlCols="3">
    {% for event in events %}
        <twig:Card:Card isClickable="{{ true }}">
            {% block title %} ... {% endblock %}
            {% block body %} ... {% endblock %}
            {% block footer %}
-                <twig:Button isBlock="{{ true }}" data-bs-toggle="dropdown">
-                    Add to Calendar
-                </twig:Button>
+                 {% component Button with {isBlock: true, 'data-bs-toggle': 'dropdown'} %}
+                     {% block content %}Add to calendar{% endblock %}
+                 {% endcomponent %}

                {# ... #}
            {% endblock %}
        </twig:Card:Card>
    {% endfor %}
</twig:Card:Group>

Thanks!

[CMH-Benny]

I faced the same issue a while back, I will keep an eye on this issue, because I am very interested in seeing this fixed to remove the temp variable workaround from my code as well😅

Edit: Turns out, I didn't face the same issue. I was using the twig:block syntax but still were not able to render the content, so I guess I have to dig hope I had that this might bring the issue to an good end. So nevermind my post. Will have to investigate and create my own issue, when I find the time.

[smnandre]

Hi @javiereguiluz .. could you share the cintent of your Twig:Card:Groupd and Twig:Card:Card component ?

[javiereguiluz]

@smnandre here they are. The app uses Bootstrap, so they mimic the Bootstrap Card component (https://getbootstrap.com/docs/5.3/components/card/) with custom features/styles for the app:

{# templates/components/Card/Group.html.twig #}
{% props
    cssClass = '',
    cols = 1,
    mdCols = null,
    lgCols = null,
    xlCols = null,
    xxlCols = null,
    withSmallGap = false,
    withLargeGap = false,
    withLargePadding = false,
%}

{% set gap = withSmallGap ? 'g-1' : withLargeGap ? 'g-4' : 'g-3' %}
<div class="ui-card-deck row row-cols-{{ cols }} {% if mdCols %}row-cols-md-{{ mdCols }}{% endif%} {% if lgCols %}row-cols-lg-{{ lgCols }}{% endif%} {% if xlCols %}row-cols-xl-{{ xlCols }}{% endif%} {% if xxlCols %}row-cols-xxl-{{ xxlCols }}{% endif%} {{ gap }} {{ cssClass }}">
    {% block content %}{% endblock %}
</div>

{# templates/components/Card/Card.html.twig #}
{% props
    withSmallPadding = false,
    withLargePadding = false,
    withBorder = true,
    centerContents = false,
    isClickable = false,
    borderOnHover = true,
    elevateOnHover = false,
    cssClass = '',
%}

<div class="col">
    <div class="card ui-card {{ withBorder ? 'ui-card-border' }} {{ borderOnHover ? 'ui-card-hover-border' }} {{ elevateOnHover ? 'ui-card-hover-elevate' }} {{ withLargePadding ? 'ui-card-large-padding' }} {{ withSmallPadding ? 'ui-card-small-padding' }} {{ isClickable ? 'position-relative' }} {{ centerContents ? 'd-flex flex-row align-items-center text-center justify-content-center' }} {{ cssClass }}">
        <div class="card-body">
            {% if null != block('title') %}
                <h3 class="card-title m-0 fw-bold ui-text-lg">{% block title %}{% endblock %}</h3>
            {% endif %}

            {% block body %}{% endblock %}
        </div>

        {% if null != block('footer') %}
            <div class="card-footer">
                {% block footer %}{% endblock %}
            </div>
        {% endif %}
    </div>
</div>

[smnandre]

Sorry i did not "click" when i first read your issue..

The problem here is that you mix HTML syntax and Twig syntax.

The fact it works in some case is a "side effect", not a real feature.

Solution: <twig:block name=" ... ">

So here you should use the <twig:block name=""> and not the {% block %} tag.

I checked the documentation and we never mix syntaxes, but I can understand why one could think it could be done... (especially when sometime it... does work).

I used an Alert component there, but this should be the same thing with your Button

<twig:Card:Group mdCols="2" xlCols="3">
    {% for event in 0..2 %}
        <twig:Card:Card isClickable="{{ true }}">

            <twig:block name="title">
                <twig:Alert message="TITLE" />
            </twig:block>

            <twig:block name="body">
                <twig:Alert>EMBED BODY MESSAGE</twig:Alert>
            </twig:block>

            {% block footer %}
                <twig:Alert message="FOOTER" />
            {% endblock %}

        </twig:Card:Card>
    {% endfor %}
</twig:Card:Group>

Alerts components in blocks title and body are rendered as expected, the one in footer is not.

[javiereguiluz]

@smnandre thanks a lot Simon 🙇 Your solution worked perfectly.

I see that this was a mistake on my side, so I'm proposing some doc changes (#2125) to avoid other people from making the same mistake.

Meanwhile, we can close this one as solved.