[TwigComponent] Impossible to declare higher level component content block

[norkunas]

So I have a component A which defines it's content block. Then I have a higher level component B which also defines it and to forward to the A component, but Twig says: The block 'content' has already been defined line 6.

{# A.html.twig #}
<{{ element }} class="{{ classes }}"{{ attributes }}>
  {%- block content -%}{%- endblock -%}
</{{ element }}>

{# B.html.twig #}
<twig:A>
  {%- block content -%}{%- endblock -%}
</twig:A>

[WebMamba]

Humm but it can be also that content is a reserved word since the new syntax. When you use the new syntax the content block is automatically added. 🤔

[norkunas]

So I should use block('content') ?
Edit: no this way does not work (probably some loop goes on because got 504)

[norkunas]

Works only this way:

{# A.html.twig #}
<{{ element }} class="{{ classes }}"{{ attributes }}>
  {%- block content -%}{%- endblock -%}
</{{ element }}>

{# B.html.twig #}
{% set passthrough %}{% block content %}{% endblock %}{% endset %}
<twig:A>
  {{ passthrough }}
</twig:A>

[weaverryan]

I've created a more realistic example to help me not get confused :).

{# anywhere #}
<twig:DivComponent>
    Hello!
</twig:DivComponent>

{# DivComponent.html.twig #}
<twig:GenericElement element="div">
    {% block content %}{% endblock %}
</twig:GenericElement>

{# GenericElement.html.twig #}
<{{ element }} class="{{ classes }}"{{ attributes }}>
  {%- block content -%}{%- endblock -%}
</{{ element }}>

Is that accurate?

@WebMamba In my DivComponent.html.twig, are we taking into account the possibility that the user may define normal, Twig-style blocks - e.g. {% block content %}{% endblock %} - inside the HTML syntax? I think we're not. I think we're seeing {% block content and thinking its Twig "output" code, and so we're starting the block content. So we're pre-lexing like this:

Original
<twig:GenericElement element="div">
    {% block content %}{% endblock %}
</twig:GenericElement>

After pre-lexing:
<twig:GenericElement element="div">
    {% block content %}{% block content %}{% endblock %}{% endblock %}
</twig:GenericElement>

If I'm correct, before opening the default block, we need to check to make sure that the content doesn't begin with {% block (accounting for whitespace differences). And if it does, we need to consume until the corresponding endblock and ignore all of that (taking into account the possibility of nested start {% blocks.

[norkunas]

Also found another problem. For form I override button_widget to leverage button component but the block inside it does not work:

{% block button_widget %}
<twig:Button ...>
{{- block('button_label_content') -}}
</twig:Button>
{% endblock %}

Block "button_label_content" on template "Component/Button.html.twig" does not exist.

But with this syntax it works:

{% block button_widget %}
  {{ component('Button', {
    children: block('button_label_content'),
  }) }}
{% endblock %}

[weaverryan]

Does it work with this syntax?

{% block button_widget %}
  {% component Button with {
    children: block('button_label_content'),
  } %}
{% endblock %}

[norkunas]

Will check it tomorrow.

[norkunas]

Does it work with this syntax?

{% block button_widget %}
  {% component Button with {
    children: block('button_label_content'),
  } %}
{% endblock %}

yes it works

[weaverryan]

perfect! Then @WebMamba we just have a pre-lexing problem here of some sort.

[WebMamba]

Ok Great! I have a better understanding of the problem now! I am checking that! 😁

[WebMamba]

So if I have a good understanding of the problem:

<twig:foo><p>My content</p>{% block bar %}<p>Inside bar</p>{% endblock %}</twig:foo>

should turn into:

{% component 'foo' %}{% block content %}<p>My content</p>{% endblock %}{% block bar %}<p>Inside bar</p>{% endblock %}{% endcomponent %}

[weaverryan]

Ok, I checked into this a bit to help with #852. @WebMamba I think it's a bit more complicated... and we actually don't have a syntax yet that makes sense for this. Here is the setup, using a realistic example:

<twig:DangerButton>
    Danger will Robinson!
</twig:DangerButton>

So, I'm passing a content block into the DangerButton component. Inside DangerButton.html.twig, I want to READ my content block and use it to SET the content block on another component.

Let's forget about the HTML syntax for a moment, and just think about how this should look using the {% component %} syntax. I believe it should be:

{# DangerButton.html.twig #}

{% component 'Button' with { type: 'danger' } %}
    {% block content %}{{ block('content') }}{% endblock %}
{% endcomponent %}

So, we create the {% block content %} and in this case, we need to use {{ block() }} to actually render it... as it makes no sense to have a {% block content %} inside of another {% block content %}.

Unfortunately, as @norkunas mentioned, this creates recursion and the page times out. However, I think that this SHOULD be allowed. It IS allowed if you do something similar in normal Twig - i.e. outside of a {% component:

Normal template - this works fine - it prints the `content` block from the parent template
<div>
    {% block content %}{{ block('content') }}{% endblock %}
</div>

So, I think the fix is 2 parts:

A) Fix the {% component %} syntax code so that {% block content %}{{ block('content') }}{% endblock %} works, by outputting the parent content block. I have no idea how difficult this may be :p

B) Fix the <twig: syntax so that it does NOT try to open the content block automatically if the content IS a block. We fixed this recently when you use <twig:block name="foo" but apparently not using the normal {% block foo %} syntax. So:

<twig:Button type="danger">
    {% block foo %}Foo{% endblock %}
</twig:Button>

This currently becomes:

{% component 'Button' with { type: 'danger' } %}
    {% block content %}{% block foo %}Foo{% endblock %}
{% endblock %}{% endcomponent %}

But it should just be:

{% component 'Button' with { type: 'danger' } %}
    {% block foo %}Foo{% endblock %}
{% endcomponent %}

[weaverryan]

A bit more thinking. I believe we need to change our {% component %} syntax to more exactly match waht https://github.com/giorgiopogliani/twig-components originally did - using these "slot" variables instead of blocks. Blocks seemed like a good idea, as they're a familiar concept. However, they cause situations that just don't make sense. For example:

{# someTemplate.html.twig #}
{% block foo %}I am the foo block!{% endblock %}

{% component Alert %}
    {% block content %}
        {{ block('foo') }}
    {% endblock %}
{% endcomponent %}

It's obvious what should happen here: the text I am the foo block! should be printed inside of the content block of the component. In reality, you get this error:

Block "foo" does not exist on Alert.html.twig. The current system leverages Twigs {% embed %} syntax, and it does some serious gymnastics internally to get the block inheritance thing working. And it ultimately causes problems that should not exist. Using https://github.com/giorgiopogliani/twig-components more directly will solve these.

Probably we should deprecate our {% component %} and implement giorgiopogliani's more directly under a new syntax - e.g. {% twig_component %} (though I think we should likely not document this new Twig tag and instead just use it internally from our <twig:Component> syntax.