Overview

Regression for slots and props on JS components.

1. Create a new code component with a slot
2. Add to components
3. Add to your page preview
4. Notice in the preview the slot placeholder doesn't exist, also in the layers menu, there is no Slot shown under the component
5. Publish your changes and refresh the page, then the slot appears in the preview and canvas.

For props: Repeat above but with adding a prop to your code component and you can see the prop in the settings form doesn't appear until after you publish and refresh.

My thought is slots and props might not be getting auto-saved correctly or wiped out after being added to the library? This could be a regression introduced after #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it.

BEFORE PUBLISHING, this is a component with a slot but no slot here (see layers menu too)

doesnt have slot

AFTER PUBLISHING, the slot appears (see layers menu the slot appears)

has slot after publishing

Proposed resolution

Confirm all necessary properties of the js component still exist (maybe there are some beside props and slots that also are getting wiped out when they shouldn't?)

User interface changes

CommentFileSizeAuthor
#2 Screenshot 2025-04-29 at 5.28.32 PM.png137 KBhooroomoo
#2 Screenshot 2025-04-29 at 5.28.09 PM.png135.08 KBhooroomoo

Comments

hooroomoo created an issue. See original summary.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue summary: View changes
StatusFileSize
new Screenshot 2025-04-29 at 5.28.09 PM.png135.08 KB
new Screenshot 2025-04-29 at 5.28.32 PM.png137 KB
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue summary: View changes
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue summary: View changes
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Related issues: +#3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue tags: +stable blocker
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Title: JS component slots don't appear in the preview canvas until published » JS component slots and props don't appear in the preview canvas until published
Issue summary: View changes
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue summary: View changes
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Priority: Major » Critical
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: Page builder » Component sources
Issue tags: +Needs tests

Based on #3522685: Prop form is not loading for components that haven't been published's bug report (closed as a duplicate of this).

Let's start with a failing test. I'm assuming this is a back-end bug.

Therefore adding a code component test case to \Drupal\Tests\experience_builder\Kernel\ComponentInputsFormTest (introduced in e #3518253: SDCs with optional images without examples cannot be placed!) should be able to reproduce the failure.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Parent issue: » #3520484: [META] Production-ready ComponentSource plugins
tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
commented
Related issues: +#3521819: Hovered preview for JS components in library not working anymore

re #10

Let's start with a failing test. I'm assuming this is a back-end bug.

I don't think so. I think the root cause is the same as #3521819: Hovered preview for JS components in library not working anymore .

basically before #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it when clicked "add to components" it would send up the whole entity including compiled_js and slots and props. After #3519634 the client never actually makes a request to add the slots to the save config and probably the "layers" menu was always using the saved config and never using the auto-save. It just wasn't noticeable because you can't change slots after you add the component to the library.

I think we should decide how we going to handle this in #3521819: Hovered preview for JS components in library not working anymore

tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
commented

You can test this by following the directions in the summary and then requesting

  1. http://exp-d-core.test/xb/api/v0/config/js_component/component_name This should have empty slots(and compiled_js)
  2. /xb/api/v0/config/auto-save/js_component/component_name this should have slots filled

If you git checkout e72f0d0b538ef6abefae89f0a8f14409dfd3ec03^ which is the commit before #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it

  1. http://exp-d-core.test/xb/api/v0/config/js_component/component_name should have slots filled (and compiled_js)
  2. /xb/api/v0/config/auto-save/js_component/component_name this should have slots filled

The difference is the client now never actually sends a request to /xb/api/v0/config/js_component/component_name with slots filled because the "Add to components" only sends status => true and nothing else

tedbow’s picture

tedbow
he/him
Primary language English
Location Ithaca, NY, USA
commented

see #3521819-12: Hovered preview for JS components in library not working anymore for small MR that reverts a bit of #3519634: Modifying a XB config entity's `status` or `label` should update the auto-save entry too, rather than delete it that solve the problem on this issue

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Active » Closed (duplicate)

Closing as a duplicate of #3521819: Hovered preview for JS components in library not working anymore.