Overview

DnD Kit has proven to be very nice to work with and capable in our preview drag and drop. To ensure we use the same tech across the app we should migrate/refactor the layers to use it too.

Proposed resolution

DnD Kit even has a sortable tree example - source in their Git repo

User interface changes

CommentFileSizeAuthor
#13 2025-05-23 10.38.00.gif400.33 KBjessebaker

Issue fork experience_builder-3520438

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jessebaker created an issue. See original summary.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Related issues: +#3502767: [PP-1] Drag and drop in Layers flickers when trying to drop into an empty slot, +#3503605: When dragging in Layers, collapsed layers should expand on hover, +#3498598: [PP-1] Scrolling on drag in layers menu doesn't work in Firefox

I marked 3 Layers menu related bugs as postponed on this issue. Hopefully migrating to dndkit fixes those bugs. If not, let's re-open the bugs that don't get fixed by the dndkit switch.

hooroomoo’s picture

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

parthbcharya commented
Assigned: Unassigned » parthbcharya
Status: Active » Needs work

parthbcharya opened merge request !990

jessebaker opened merge request !1024

drupalbabaji made their first commit to this issue’s fork.

jessebaker’s picture

jessebaker commented
Assigned: parthbcharya » Unassigned
Status: Needs work » Needs review

MR !1024 is now ready for review.

MR !990 is now over at #3524965: Refactor sortable props form in code component editor

jessebaker’s picture

jessebaker commented
Assigned: Unassigned » hooroomoo
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: hooroomoo » jessebaker

  • jessebaker committed 4601ce25 on 0.x 
    Issue #3520438 by jessebaker, hooroomoo: Refactor Layers UI to use...
jessebaker’s picture

jessebaker commented
Assigned: jessebaker » Unassigned
Status: Needs review » Fixed

🎉

jessebaker’s picture

jessebaker commented
Issue summary: View changes
StatusFileSize
new 2025-05-23 10.38.00.gif400.33 KB
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

Amazing work on this @jessebaker 👏

jessebaker opened merge request !1066

  • jessebaker committed a5b64dd0 on 0.x 
    Issue #3520438 by jessebaker, hooroomoo: Refactor Layers UI to use...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.