Grid: animate tile removals#78542
Merged
Merged
Conversation
simison
added
[Status] In Progress
simison
force-pushed
the
update/dashboard-animate-removal
branch
from
e133f3e to
953f3af
Compare
|
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. |
|
Size Change: 0 B Total Size: 8.04 MB ℹ️ View Unchanged
|
Removed tiles scale down and fade out while siblings reflow via FLIP. Respects prefers-reduced-motion.
Snapshot settled positions before invert transforms so siblings no longer animate from a spurious vertical offset. Expose pre-change positions for exit overlays after the baseline update.
simison
force-pushed
the
update/dashboard-animate-removal
branch
from
5548995 to
189d382
Compare
Contributor
|
Nice! The animations can occur simultaneously but it would be nice to do something with the outbound widget too, rather than it vanishing instantly. Maybe a subtle scale-down and opacity animation? |
|
Flaky tests detected in cb466ac. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26361970943
|
ghost uses duration-md; cleanup timeout becomes a safety net
set state directly in the layout effect; skip ghost on reduced motion
populate it from a layout effect so discarded renders never leak in
snapshot grid positions relative to the container, not the viewport
retrofox
approved these changes
May 24, 2026
Contributor
retrofox
left a comment
retrofox
left a comment
There was a problem hiding this comment.
LGTM. Nice visual enhancement.
Member
Author
Totally! |
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
3 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?
Part of #77616
Removed tiles scale down and fade out while siblings reflow via FLIP. Respects prefers-reduced-motion.
Why?
Smoother UX and removal doesn't feels so janky.
How?
Added tile removal animation in
@wordpress/grid, so the dashboard gets it automatically when a widget is removed in edit mode.Behavior
--wpds-motion-duration-sm.prefers-reduced-motion— Exit overlay is hidden and siblings jump immediately (no exit ghost, no timed delay).Implementation
use-item-exit-animation.ts— Detects keys dropped fromlayout, reads pre-removal rects from the layout-shift hook, caches children, and mounts exit overlays viaflushSyncso they paint in the same frame as removal.item-exit-overlay.tsx+item-exit-animation.module.css— Exit ghost styling and keyframes.use-layout-shift-animation.ts— Snapshots now includewidth/height; exposesgetLastPositions(); exit overlays are excluded from FLIP queries.DashboardGrid/DashboardLanes— Wire hooks, children cache, and render exit overlays.No changes were needed under
routes/dashboard— removal still callsonLayoutChangewith a filtered layout; the grid surfaces handle animation wheneditModeis on.Testing Instructions
You should see the quick zoom-back/fade on the removed tile and siblings sliding into place.
Testing Instructions for Keyboard
Screenshots or screencast
Before
Screen.Recording.2026-05-22.at.09.46.34.mov
After
Screen.Recording.2026-05-22.at.09.44.48.mov
Use of AI Tools