Skip to content

[TwigComponent] Nested component doesn't work with html syntax #805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Jupi007 opened this issue Apr 18, 2023 · 11 comments · Fixed by #817 or #824
Closed

[TwigComponent] Nested component doesn't work with html syntax #805

Jupi007 opened this issue Apr 18, 2023 · 11 comments · Fixed by #817 or #824

Comments

@Jupi007
Copy link

Jupi007 commented Apr 18, 2023

Let's assume two component foo and bar, which both define a content block.

Using the normal syntax, it works as expected:

{% component foo %}
  {% block content %}
    {% component bar %}
      {% block content %}
        {# ... #}
      {% endblock %}
    {% endcomponent %}
  {% endblock %}
{% endcomponent %}

But using the html syntax:

<twig:foo>
  <twig:block name="content">
    <twig:bar>
      <twig:block name="content">
        {# ... #}
      </twig:block>
    </twig:bar>
  </twig:block>
</twig:foo>

This throw a SyntaxError:

An exception has been thrown during the compilation of a template ("Expected closing tag '</twig:block>' for block 'content' at line 13").

Btw, simply write it like this doesn't work too:

<twig:foo>
  <twig:bar>
    {# ... #}
  </twig:bar>
</twig:foo>

This one throw:

A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

But maybe it is how it is expected to work?

@weaverryan
Copy link
Member

Other syntaxes look valid to me. That 2nd error is particularly odd. Are you are the error isn’t being caused by something else in your template?

@WebMamba would you be able to check these? I have a test for embedded components (the 2nd example) so I’m surprised that’s not working.

@Jupi007
Copy link
Author

Jupi007 commented Apr 19, 2023

Other syntaxes look valid to me. That 2nd error is particularly odd. Are you are the error isn’t being caused by something else in your template?

I've just tried this in an empty template, with just the content of the snippets I pasted above here, and both get the exact same errors.

@yguedidi
Copy link

Here it seems you're in a component usage context, and if I understood correctly the new syntax, when you use a component, it should be without redefining the content block:

<twig:foo>
  <twig:bar>
    {# ... #}
  </twig:bar>
</twig:foo>

content block is to set which part of the component is the default part in the component definition template

@Jupi007
Copy link
Author

Jupi007 commented Apr 19, 2023

Here it seems you're in a component usage context, and if I understood correctly the new syntax, when you use a component, it should be without redefining the content block

It is also that I understood :)

But I also tested with a different block name:

<twig:foo>
  <twig:block name="foo">
    <twig:bar>
      <twig:block name="bar">
        {# ... #}
      </twig:block>
    </twig:bar>
  </twig:block>
</twig:foo>

And the same exception is thrown.

@yguedidi
Copy link

@Jupi007 then when using another block name, in a usage context, it means you're overriding a block from the component definition, so in the template of the foo component there must be a block named "foo"

@Jupi007
Copy link
Author

Jupi007 commented Apr 19, 2023

@yguedidi Do you mean like this?

{# templates/index.html.twig #}

<twig:foo>
  <twig:block name="foo">
   {# ... #}
  </twig:block>
</twig:foo>
{# templates/components/foo.html.twig #}

{% block foo %}
{% endblock %}

If so, I did it this way :)
And it throw an exception if you nest components, like I indicated upper.

@yguedidi
Copy link

Yes this way, so it seems there is indeed something weird 😅

@weaverryan
Copy link
Member

Ultimately, the new <twig:Component syntax is must “mapped” internally to the {% component syntax. So that makes life easy: if something works with {% component, then it should work with the new syntax and behave the same way. So yes - definitely a legit bug or two here :).

@weaverryan
Copy link
Member

Should be fixed now - if you find any more edge cases, please let us know!

@Jupi007
Copy link
Author

Jupi007 commented Apr 24, 2023

Thanks a lot!

I just tested it and I think that a part of the problem is still present.

Now this works as expected:

<twig:foo>
  <twig:block name="content">
    <twig:bar>
      {# ... #}
    </twig:bar>
  </twig:block>
</twig:foo>

But this one still throw an exception:

<twig:foo>
  <twig:bar>
    {# ... #}
  </twig:bar>
</twig:foo>
A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

As far as I understand, the content block should be omitted in html-like syntax, isn't it?

@weaverryan weaverryan reopened this Apr 24, 2023
@WebMamba
Copy link
Contributor

Ok good catch! It's an other issue I am working for a patch for it as well 👍Thanks for the report! 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants