SDC incorrectly throws an exception about embedded slots

Created on 13 May 2024, about 1 month ago
Updated 18 June 2024, 8 days ago

When building out an example side by side component for experience builder in 📌 Create an example set of SDC components Active I encountered an error about missing definitions for slots I was trying to populate in an embedded component. My attempt at embedding the two_column component in the side by side throws the error:

Twig\Error\SyntaxError: An exception has been thrown during the compilation of a template ("We found an unexpected slot that is not declared: [column_one, column_two]. Declare them in "side_by_side.component.yml"."). in Twig\Environment->compileSource() (line 2 of experience_builder_example_components/components/compound/side_by_side/side_by_side.twig).

<div{{ attributes.addClass("bg-"~background) }}>
   ........

  {% embed 'experience_builder_example_components:two_column' %}
    {% block column_one %}
      {% if media_position == "left" %}
        {{ media }}
      {% else %}
        {{ comp_content }}
      {% endif %}
    {% endblock %}

    {% block column_two %}
      {% if media_position == "left" %}
        {{ comp_content }}
      {% else %}
        {{ media }}
      {% endif %}
    {% endblock %}
  {% endembed %}
</div>

This is unexpected because the slots column_one and column_two are defined correctly for the two_column component which means they shouldn't need to be defined in the side_by_side component.

To reproduce this you can install the experience_builder_example_components submodule that is introduced in the MR for 📌 Create an example set of SDC components Active . The module automatically places the side_by_side component on the front page of the site which will error out due to this slots issue

🐛 Bug report
Status

Needs review

Version

11.0 🔥

Component
single-directory components 

Last updated about 22 hours ago

Created by

🇺🇸United States ctrlADel North Carolina, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @ctrlADel
  • e0ipso Can Picafort

    I am able to reproduce this.

  • Merge request !8234Resolve #3446933 "SDC incorrectly throws" → (Open) created by e0ipso
  • Pipeline finished with Failed
    27 days ago
    Total: 586s
    #186172
  • Pipeline finished with Failed
    27 days ago
    Total: 614s
    #186188
  • Pipeline finished with Failed
    27 days ago
    Total: 738s
    #186199
  • Pipeline finished with Success
    27 days ago
    Total: 608s
    #186245
  • Status changed to Needs review 27 days ago
  • e0ipso Can Picafort

    Test only patch is failing with the expected error: https://git.drupalcode.org/issue/drupal-3446933/-/jobs/1730262#L45

    Twig\Error\SyntaxError: An exception has been thrown during the compilation of a template ("We found an unexpected slot that is not declared: [the_slot]. Declare them in "my-banner.component.yml".").

    The pipeline with the fix is green.

    This is ready to review.

  • Status changed to RTBC 27 days ago
  • 🇪🇸Spain penyaskito Seville 💃, Spain 🇪🇸, UTC+2 🇪🇺

    I can reproduce this issue with the Storybook module integration, the patch fixes it, it includes tests, and test-only run is failing.
    Code looks good.

    The only thing I could suggest is a test with two elements nested instead of one, to check that those are traversed from bottom to top, but that might actually be testing twig itself and not our code.

  • Status changed to Needs work 24 days ago
  • 🇬🇧United Kingdom alexpott 🇪🇺🌍

    #2 says we need to consider extend and not just embed but we only add test coverage for embed. Have we considered extend? Should we add a test for it?

  • Status changed to RTBC 17 days ago
  • e0ipso Can Picafort

    @alexpott while working on an example with extends I realized that the trick to forward block contents will not work on extended templates. This is not related to SDC, but a Twig limitation.

    {# extends-example.twig #}
    {% extends 'sdc_test:just-a-slot' %}
    {% set slot_value %}
      {% block nested_slot %}{% endblock %}
    {% endset %}
    
    {% block the_slot %}Foo {{ slot_value }}{% endblock %}
    

    In the example above there is no scope for extend-example.twig to grab the contents of the block nested_slot.

    Since we are extending another template it does not make sense to introduce a new slot/block, you just use the blocks defined by the parent instead. Therefore I think now, that I was wrong in #2 to suggest that we need to support extends.

    Back to RTBC based on the above.

  • 🇺🇸United States xjm
  • Status changed to Needs review 8 days ago
  • e0ipso Can Picafort

    Please ignore my comment in #8 🤦. I was conflating two different issues here.

    To recap this issue proves that we can:

    1. Have embed within embeds.
    2. Have embed within extends.
    3. Have embed within embeds and forward blocks from the parent to the children.
  • e0ipso Can Picafort

    If you are curious about my confusion in #8, I was trying to write a test for 4, before I wrote one for 2:

    4. Have embed within extends and forward blocks from the parent to the children.

    However, that is not valid Twig. And that is what a I was realizing in #8.

    The commit above adds test coverage for extends, and we should be good now.

  • Pipeline finished with Success
    8 days ago
    Total: 568s
    #202359
Production build 0.69.0 2024