Grid: animate sibling tiles when layout reflows during drag or resize#78395
Merged
Conversation
simison
added
[Type] Experimental
|
Size Change: 0 B Total Size: 7.97 MB ℹ️ View Unchanged
|
Contributor
|
Much better! |
|
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. |
|
Flaky tests detected in f8bd10a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26089571732
|
simison
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a FLIP-based layout-shift animation so sibling tiles in DashboardGrid and DashboardLanes slide into their new positions when the grid reflows during drag or resize in edit mode. Introduces a shared useLayoutShiftAnimation hook driven by a serialized layout fingerprint, gated on edit mode + active interaction, and respecting prefers-reduced-motion. Renames the previous data-lanes-key attribute to a shared data-wp-grid-item-key so both grid variants share the same DOM identification scheme.
Changes:
- New shared
useLayoutShiftAnimationhook + CSS module that performs FLIP transforms on grid items keyed bydata-wp-grid-item-key, plus fingerprint helpers (getLayoutFingerprint,getPlacementFingerprint). - Both
DashboardGridandDashboardLanesnow snapshot tile positions before applying temporary layouts, wire the hook to a container, and toggle alayout-animatingclass.DashboardLanesalso now applies the temporary layout on resize. - Renames
LANES_DATA_KEYto a sharedGRID_ITEM_DATA_KEYconstant and updates all readers, writers, and tests;DashboardGrid's root ref becomes state-backed so the hook can observe the container.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/grid/src/shared/use-layout-shift-animation.ts | New FLIP hook + fingerprint utilities |
| packages/grid/src/shared/layout-shift-animation.module.css | CSS module providing the transition on [data-wp-grid-item-key] under .layout-animating |
| packages/grid/src/shared/grid-item-key.ts | Shared data-wp-grid-item-key constant |
| packages/grid/src/dashboard-lanes/use-lane-placement.ts | Switches lane placement to the shared data key |
| packages/grid/src/dashboard-lanes/lanes-item.tsx | Emits the shared data key on each item |
| packages/grid/src/dashboard-lanes/index.tsx | Wires the animation hook, removes manual memo refs, and now applies temp layout on resize |
| packages/grid/src/dashboard-grid/index.tsx | Wires the animation hook, switches root ref to state, simplifies memoization |
| packages/grid/src/dashboard-grid/grid-item.tsx | Emits the shared data key |
| packages/grid/src/dashboard-lanes/test/use-lane-placement.test.tsx | Updates imports and attribute name |
| packages/grid/src/dashboard-lanes/test/keyboard-activation.test.tsx | Updates selector / comment to new data key |
| packages/grid/README.md / CHANGELOG.md | Documents the new sibling-reflow animation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
simison
force-pushed
the
update/grid-animate-layout-shifts
branch
2 times, most recently
from
868eed9 to
4388a94
Compare
Contributor
|
Does it revert what we did here (#78389) so that the dashboard now (again) shows the new tiles configuration on the fly? |
retrofox
approved these changes
May 19, 2026
Contributor
retrofox
left a comment
retrofox
left a comment
There was a problem hiding this comment.
LGTM. The UX when setting the layout feels smoother. Nice job 🚀
LANES_DATA_KEY vs GRID_ITEM_DATA_KEY
Fixes: - layoutKeys / items — Replaced render-time ref caching with useMemo (and items = sortedItems where the extra memo was redundant). - captureLayoutSnapshot — Declared the ref once up front; moved useLayoutShiftAnimation to just before return; sync the callback in useLayoutEffect instead of during render.
simison
force-pushed
the
update/grid-animate-layout-shifts
branch
from
4388a94 to
f19f2bf
Compare
Member
Author
It was just me taking screen recordings between trunk and PR un-rebased. |
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
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
Animate widget movements as the widget layout shifts around due to resizing or moving widgets.
Why?
Helps user grok better what happens as widgets move around while resizing or moving widgets around.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Before
Screen.Recording.2026-05-18.at.15.58.17.mov
After
Screen.Recording.2026-05-18.at.15.55.43.mov
Use of AI Tools