Grid: tiled grid overlay#78373
Merged
Merged
Conversation
simison
added
[Type] Experimental
simison
commented
May 16, 2026
Comment on lines
+40
to
+47
| background-color: var( | ||
| --wp-grid-overlay-tile-bg, | ||
| var(--wpds-color-bg-surface-neutral-weak) | ||
| ); | ||
| border: var(--wpds-border-width-xs) solid | ||
| var( | ||
| --wp-grid-overlay-tile-border, | ||
| var(--wpds-color-stroke-surface-neutral-weak) |
Member
Author
There was a problem hiding this comment.
Used neutral-weak colors for now but could change to something else.
Previously we picked blue-hue from "info" colors and modified those with alpha, which didn't feel like in the spirit of color tokens.
@jameskoster thoughts on colors?
To me it feels like they could easily be weaker/less visible still.
|
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. |
simison
force-pushed
the
update/grid-visual-update-to-background-grid
branch
from
826ec31 to
311761e
Compare
|
Size Change: 0 B Total Size: 7.97 MB ℹ️ View Unchanged
|
|
Flaky tests detected in b80a991. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26034657620
|
Contributor
|
Animation is nice and this looks much cleaner overall 👍
The main question here is accessibility. As things stand the cells are not purely decorative and therefore need to meet contrast requirements for "Graphical objects required to understand or operate the interface". IE 3:1 ratio against the background. That said, with #78389 merged the resize placeholder (blue outline) now snaps to grid cells and meets the required contrast. So with a rebase perhaps we can make the case that the overlay grid cells are a secondary affordance and do not need to meet 3:1 contrast in order for folks with visual impairments to understand the interface. With a subtle approach maybe we don't need the stroke: 
|
simison
force-pushed
the
update/grid-visual-update-to-background-grid
branch
from
311761e to
893cdc0
Compare
Member
Author
|
Removed border, agreed it looks cleaner now! Before
After
I'm always concious about us using good monitors and general audience using monitors where light grey barely shows up, but like you noted the blue outline really helps a lot there. |
simison
force-pushed
the
update/grid-visual-update-to-background-grid
branch
from
c399480 to
898ed1b
Compare
Use scale(0.64) with subtle easing for the grid overlay tile wave animation.
Use lg border radius so tiles align with the updated grid overlay visuals. Co-authored-by: Cursor <[email protected]>
jameskoster
approved these changes
May 18, 2026
Contributor
jameskoster
left a comment
jameskoster
left a comment
There was a problem hiding this comment.
I tweaked the animation a tiny bit, and updated the overlay radius to match cards so that it's no longer visible below the widget corners.
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?
Follow-up to #78281 (comment)
Tiled grid overlay instead of columns+borders.
Why?
Visually less busy and restless background indicating user how the grid layout supports widget sizes and positions.
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Before
Screen.Recording.2026-05-18.at.15.10.40.mov
After
Note animated reveal of background grid.
Screen.Recording.2026-05-18.at.15.08.50.mov
Use of AI Tools