[PP-1] Dragging a Code Component doesn't "fade" it out like SDCs

Created on 24 April 2025, 18 days ago

Overview

Code components are wrapped in <astro-island> tags. Once πŸ› Working with grids with slots is difficult due to missing Astro CSS Active lands, <astro-island> tags will be display: contents;.

When a component is dragged, the class xb--item-dragging is added to the element(s) of that component in the iFrame.

Proposed resolution

In the case of Code components the xb--item-dragging class should be added to each of the children of the <astro-island>, not to the <astro-island> itself.

User interface changes

This gif shows the correct behavior on an SDC being dragged (the fade that happens on drag start). This is NOT happening for JS Code Components.

πŸ› Bug report
Status

Postponed

Version

0.0

Component

Page builder

Created by

πŸ‡¬πŸ‡§United Kingdom jessebaker

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

Comments & Activities

  • Issue created by @jessebaker
  • πŸ‡¬πŸ‡§United Kingdom jessebaker
  • πŸ‡¬πŸ‡§United Kingdom jessebaker
  • @jessebaker opened merge request.
  • πŸ‡¬πŸ‡§United Kingdom jessebaker
  • First commit to issue fork.
  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    Small request in the MR - but basically this looks good.

  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    Feedback addressed in a way better than I could have hoped for

  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    Merged.

  • Upon verification, it was observed that none of the components including SDCs and Code Components are exhibiting the fade effect during drag interactions. This seems to be a regression affecting all components, not just the JS Code Components.

  • πŸ‡¬πŸ‡§United Kingdom jessebaker

    From your video @mayur-sose it looks like you are slightly misunderstanding which behaviour needs testing.

    The expected behaviour is as follows:
    When dragging a component the is already on the layout the component that you start to drag should fade out to indicate which one you have "picked up". The fade out is based on which component started the drag operation, not which component your mouse is over as you are dragging.

    Prior to this fix, the behaviour above only happened for SDC components, not Code Components. It should now happen no matter the component source.

    By contrast, in your video you are dragging a new component from the library and then moving the mouse over a component in the preview. There is no expectation that the component in the preview will fade out in that scenario so this is not a regression.

    • When a component that is already placed on the canvas is dragged, it properly fades out during the drag operation.
    • This fade effect triggers correctly upon starting the drag and remains until the drag is completed or canceled.
    • Dragging a new component from the library onto the canvas does not cause any fade-out of components on the canvas.
    • This is the intended behavior and works correctly.
    • Both SDC and Code Components exhibit the same fade-out behavior, ensuring consistency across component types.
Production build 0.71.5 2024