Polish dashboard drag preview motion, elevation, and drop exit.#78348
Open
jameskoster wants to merge 7 commits into
Open
Polish dashboard drag preview motion, elevation, and drop exit.#78348jameskoster wants to merge 7 commits into
jameskoster wants to merge 7 commits into
Conversation
|
Size Change: 0 B Total Size: 8.04 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 9b0311d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26291811577
|
Animate drag-preview-frame scale and shadow with wpds motion tokens, use sm/md/lg elevation steps for widgets, and compose dnd-kit DragOverlay dropAnimation so scale and shadow ease out on release instead of snapping. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove default border-radius from the grid drag frame so generic surfaces stay square; apply radius to the overlay frame only in the widget route. Simplify the Customization story drag preview to match (lift and shadow remain on the grid frame). Co-authored-by: Cursor <cursoragent@cursor.com>
Member
|
Rebased and updated screen recordings in PR description, previous ones: BeforeScreen.Recording.2026-05-15.at.14.04.36.movAfterScreen.Recording.2026-05-15.at.14.03.35.mov |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
a7104d2 to
23d019b
Compare
simison
approved these changes
May 22, 2026
Member
simison
left a comment
There was a problem hiding this comment.
I slightly miss the elegance of a smaller elevation, but on the flip side, I like the visual clarity this adds 👍
simison
reviewed
May 22, 2026
Comment on lines
-718
to
-725
| <div | ||
| style={ { | ||
| height: '100%', | ||
| boxShadow: 'var(--wpds-elevation-lg)', | ||
| borderRadius: 'var(--wpds-border-radius-lg)', | ||
| overflow: 'hidden', | ||
| } } | ||
| > |
simison
reviewed
May 22, 2026
| * radius-agnostic; match tile / Card radius here (frame exposes | ||
| * `data-wp-dashboard-drag-preview-frame`). | ||
| */ | ||
| .grid :global([data-wp-dashboard-drag-preview-frame]) { |
Member
There was a problem hiding this comment.
We might be able to use CSS variable instead for the grid to override radius; gonna test it out and commit if it works.
...for animation and overriding border radii.
Contributor
Author
We could keep the elevation the same, but if we do then we should lose the scale transform imo. If the widget increases in size on pickup, then it stands to reason that the elevation would change too. Saying this I realise that if we keep the elevation changes through different states then the hover state should also have a small scale adjustment. Let me try that... |
Use xs→sm keyframe entry on the drag-preview frame for reliable lift, and shift edit-mode widget tiles to xs/sm so dragging reads above resting. Co-authored-by: Cursor <cursoragent@cursor.com>
Move scale to an inner __lift element so @dnd-kit drop translation does not fight the preview transform, and use keyframed shadow/scale exit via drop side effects instead of transitions that snap after enter animations. Co-authored-by: Cursor <cursoragent@cursor.com>
Wait for data-wp-grid-dragging and the drag-preview enter duration before showing the faded dashed placeholder so it does not flash under the clone. Co-authored-by: Cursor <cursoragent@cursor.com>
Keep widget tiles at xs on rest and hover so only the drag preview lifts to md, which reads clearly above xs without a hover shadow step. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
Author
|
Pushed some changes to improve the overall smoothness of the drop animation. Also reduced the elevation by a step so it's closer to trunk. Screen.Recording.2026-05-22.at.14.52.47.movI tried to animate the toolbar/resize handle in/out but it proved too complex. Will need to investigate in a separate issue/pr. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
@wordpress/grid(DashboardGrid/DashboardLanes): The drag-preview functional frame (.drag-preview-frame) uses wpds motion tokens for scale and box-shadow on pick-up (sm → lg),prefers-reduced-motionhandling (static lg shadow, no scale motion), and a drop exit path: a shared helper composesdefaultDropAnimationfrom@dnd-kit/corewithdefaultDropAnimationSideEffectsand toggles an exit class so scale and shadow ease back to resting instead of snapping when the overlay tears down. The frame exposesdata-wp-dashboard-drag-preview-framefor consumer styling and does not setborder-radius(package stays shape-agnostic)..grid :global([data-wp-dashboard-drag-preview-frame])and--wpds-border-radius-lg, aligned with.tile/ Card radius.Why
How
@starting-style+transitionontransformandbox-shadowfor enter;.dragPreviewFrameExitingusesmdduration + balanced easing for exit; reduced-motion rules disable motion where appropriate.packages/grid/src/shared/drag-overlay-drop-animation.ts— spreadsdefaultDropAnimation, aligns duration/easing withmd/ balanced, wrapsdefaultDropAnimationSideEffects(active opacity during drop), adds/removes the exit class on[data-wp-dashboard-drag-preview-frame].data-wp-dashboard-drag-preview-frame;DragOverlayreceivesdropAnimation={ dashboardDragDropAnimation }in both grid and lanes.widgets.module.csstargets[data-wp-dashboard-drag-preview-frame]under.gridso masonry and fixed grid both get the same rounded shadow when that wrapper is used.Screenshots
Video
Before
Screen.Recording.2026-05-22.at.14.22.14.mov
After
Screen.Recording.2026-05-22.at.14.21.31.mov
Screenshot
Before
After
Use of AI
Made with Cursor