Slots are not working for few components

Created on 22 May 2025, 5 months ago

Problem/Motivation

Below components with slots are not working in XB,

1. Space people card - people with avatar bio
2. Space people card - people with image bio
3. Molecules - Space Pricing card
4. Molecules - Space Pricing featured card
5. Molecules - Space Quick link card
6. Space slider
7. Space CTA banner type 2 and 3
8. Organisms - Space Sticky Jump link

Steps to reproduce

1. Add the component of XB
2. Then use slots to drop another component
3. The slot will not work as expected

Proposed resolution

Wrap slots in {%- block %} {{ slot_name }} {% endblock -%}

๐Ÿ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

๐Ÿ‡ฎ๐Ÿ‡ณIndia kiran.kadam911 Mumbai, India ๐Ÿ‡ฎ๐Ÿ‡ณ

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

Merge Requests

Comments & Activities

  • Issue created by @kiran.kadam911
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia kiran.kadam911 Mumbai, India ๐Ÿ‡ฎ๐Ÿ‡ณ
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia kiran.kadam911 Mumbai, India ๐Ÿ‡ฎ๐Ÿ‡ณ
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia chetansonawane Gujarat
    • 96cbe12b committed on 1.x
      Issue#3526024: Slots are not working for few components.
      
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia chetansonawane Gujarat
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia chetansonawane Gujarat
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia chetansonawane Gujarat
  • Assigned to meghasharma
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I checked all the components listed in this issue to see if their slots are working. For testing, I placed each component on a page and published it to confirm the slot rendering.

    Slots not working in:
    Space People Card โ€“ People with Avatar Bio
    Space People Card โ€“ People with Image Bio
    Organisms โ€“ Space Sticky Jump Link
    Space CTA Banner โ€“ Type 3 (only)
    Space Slider

    Slots working fine in:
    Molecules โ€“ Space Pricing Card
    Molecules โ€“ Space Pricing Featured Card
    Molecules โ€“ Space Quick Link Card
    Space CTA Banner โ€“ Type 2
    Molecules โ€“ Space Featured Card

    I am working on fixing the slot issues in the non-working components.
    Thanks!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I checked all the components one by one in the XB editor to identify slot issues.
    Apart from the components already mentioned in this issue, I found that slots are also not working for the following components:

    • Space Accordion with Image โ€“ Variation 4
    • Space Avatar
    • Space Avatar Group
    • Space Avatar Label Group
    • Space CTA Banner โ€“ Type 1
    • Space Hero Banner Style 04
    • Space Hero Banner Style 05
    • Space Hero Banner Style 06
    • Space Hero Banner Style 07
    • Space Hero Banner Style 08
    • Space Hero Banner Style 09
    • Space Hero Banner Style 10
    • Space Hero Banner Style 11
    • Space Stats KPI
    • Space Text
    • Space Team Section Image Card 2
    • Space Team Section Image Card 3
    • Space Team Section Simple 1
    • Space Team Section Simple 2
    • Space Team Section Simple 3
    • Space Text and Media โ€“ With Checklist
    • Space Video Card
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I have fixed the slot issues for the mentioned components. Changes have been pushed in the MR. Attaching screenshots

    Components fixed:

    1. Space People Card โ€“ People with Avatar Bio
    2. Space People Card โ€“ People with Image Bio
    3. Space CTA Banner โ€“ Type 3
    4. Space Avatar
    5. Space Avatar Group
    6. Space Avatar Label Group
    7. Space CTA Banner โ€“ Type 1
    8. Space Hero Banner Style 04
    9. Space Hero Banner Style 05
    10. Space Hero Banner Style 06
    11. Space Hero Banner Style 07
    12. Space Hero Banner Style 08
    13. Space Hero Banner Style 09
    14. Space Hero Banner Style 10
    15. Space Hero Banner Style 11
    16. Space Stats KPI
    17. Space Text
    18. Space Team Section Image Card 2
    19. Space Team Section Image Card 3
    20. Space Team Section Simple 1
    21. Space Team Section Simple 2
    22. Space Team Section Simple 3
    23. Space Text and Media โ€“ With Checklist
    24. Space Video Card

    Not fixed, 3 components are still not working with slots:

    • Organisms โ€“ Space Sticky Jump Link
    • Space Slider
    • Space Accordion with Image โ€“ Variation 4

    Thanks!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I have fixed the slot issues for the mentioned components. Changes have been pushed in the MR. Attaching screenshots

    Components fixed:

    1. Space People Card โ€“ People with Avatar Bio
    2. Space People Card โ€“ People with Image Bio
    3. Space CTA Banner โ€“ Type 3
    4. Space Avatar
    5. Space Avatar Group
    6. Space Avatar Label Group
    7. Space CTA Banner โ€“ Type 1
    8. Space Hero Banner Style 04
    9. Space Hero Banner Style 05
    10. Space Hero Banner Style 06
    11. Space Hero Banner Style 07
    12. Space Hero Banner Style 08
    13. Space Hero Banner Style 09
    14. Space Hero Banner Style 10
    15. Space Hero Banner Style 11
    16. Space Stats KPI
    17. Space Text
    18. Space Team Section Image Card 2
    19. Space Team Section Image Card 3
    20. Space Team Section Simple 1
    21. Space Team Section Simple 2
    22. Space Team Section Simple 3
    23. Space Text and Media โ€“ With Checklist
    24. Space Video Card

    Not fixed, 3 components are still not working with slots:

    • Organisms โ€“ Space Sticky Jump Link
    • Space Slider
    • Space Accordion with Image โ€“ Variation 4

    Thanks!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I tried to fix the slot issue in these components:
    Organisms โ€“ Space Sticky Jump Link
    Space Slider
    Space Accordion with Image โ€“ Variation 4

    My approach was to render slots inside a for loop. Instead of creating multiple slots (slide_1, slide_2, etc.), I defined a single slot and looped over it in Twig to wrap each item inside

  • , like a typical slider.

    Example:

    component.yml

    slots:
      slide_1:
        title: Slide
        description: Content for Slide
        examples:
          - 'Slide content'


    component.twig

    <div class="splide__track">
      <ul class="splide__list flex">
        {% for i in range(1, number_of_slides) %}
          {% set slot_name = 'slide_' ~ i %}
          <li class="splide__slide flex-shrink-0" data-slide-number="{{ i }}">
            {{ attribute(_context, slot_name)|render|default('Slide ' ~ i) }}
          </li>
        {% endfor %}
      </ul>
    </div>

    However, in the XB editor the slots donโ€™t appear. This seems related to a known XB issue: https://www.drupal.org/project/experience_builder/issues/3514923 ๐Ÿ› Iterating a slot and wrapping components in markup causes front-end error Active

    Thatโ€™s likely why the for loop approach isnโ€™t working here.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    I re-checked all components one by one for slots and styling, and found issues in 4 more components, which I have fixed. The changes are pushed, and the MR is raised.

    Space Video Card

    Space Image Card

    Space Icon Card

    Space Notification Card

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    Most slot issues are fixed here.
    However, 3 components (Space Sticky Jump Link, Space Slider, Space Accordion with Image โ€“ Variation 4) are still affected by the for-loop slot problem in XB.

    Created a new issue to track them separately: https://www.drupal.org/project/space_ds/issues/3544788 ๐Ÿ› For-loop slots are not working for few components Active

    Thanks!

  • Production build 0.71.5 2024