Grid: add edit-mode overlay to DashboardGrid and DashboardLanes#78199
Merged
Conversation
Introduces a shared default overlay that paints diagonal stripes and dashed column/row track guides behind the tiles, plus a render-prop contract (GridOverlayRenderProps) so consumers can replace the visual while reusing the resolved layout parameters.
Wires the shared GridOverlay into DashboardGrid so the column and row tracks become visible behind the tiles whenever editMode is on. Consumers can override the visual via the renderGridOverlay prop.
Wires the shared GridOverlay into DashboardLanes. Lanes are content-driven vertically, so the overlay paints columns only.
Drops the inline GridVisualizer from EditMode (the package paints it now) and adds a Custom Grid Overlay story that demonstrates how to swap the visual via renderGridOverlay.
|
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: -179 B (0%) Total Size: 7.93 MB 📦 View Changed
ℹ️ View Unchanged
|
Spells out in the EditMode JSDoc that the surface paints its default overlay and points to renderGridOverlay for replacement. Adds a Custom Grid Overlay story to DashboardLanes for parity with DashboardGrid.
retrofox
added
[Type] Enhancement
Wraps the overlay JSX in useMemo so drag/resize re-renders skip its reconciliation while the resolved column count, gap, and row height are stable.
simison
approved these changes
May 12, 2026
Member
simison
left a comment
simison
left a comment
There was a problem hiding this comment.
Not necessarily in this PR but we might want to allow columns/grid visual take full height of available space (e.g. dashboard) instead of cutting it at bottom of last widget. It'll help visualize available space where one could expand widgets by dragging.
Renders the overlay unconditionally and exposes `isActive` in `GridOverlayRenderProps`. The default fades opacity over 200ms and flips visibility to `hidden` after the fade-out to release paint cost. Honors `prefers-reduced-motion: reduce`.
Moves row dividers to a `::after` pseudo-element masked with a horizontal dash pattern so the stroke matches the dashed column outlines. The pattern is shifted up by 1px so dividers land at the top of each row except the first, leaving the bottom of the grid clean.
Draws two dashed bands per row tile (top and bottom of the row area) so the gap between rows is framed on both sides. The bottom band of the last row sits at the grid's bottom edge; the top band of the first row sits at its top edge.
Edit mode is a state change, not a hazard. A neutral tone reads as calmer scaffolding, leaves room for surfaces that legitimately need warning emphasis elsewhere, and avoids competing with the brand-toned interactive affordances (resize handle, drag preview).
The design system has no `fg-content-brand` token, so brand-toned tiles were rendering text in info tone, which paired arbitrarily. Switch to neutral fg, which reads safely against any tinted surface.
Stripes and column fill use the info bg surface; outline and row dividers stay on the neutral stroke so the dashed tracks read as calm scaffolding against the cooler info wash.
|
Flaky tests detected in 9b4f7de. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25742042959
|
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?
editModeis on: diagonal stripes plus dashed column track outlines, repeating row dividers whenrowHeightis numeric, and a subtle column fill to differentiate the drop zones from the gaps.renderGridOverlay+GridOverlayRenderProps) so consumers can replace the visual while reusing the surface's resolved column count, gap, and row height.DashboardGridandDashboardLanesconsume the same shared overlay.Why?
In edit mode the user needs visual feedback about where tiles can land. Without an overlay, empty cells look identical to the gaps between them and the underlying column structure stays invisible. Surfacing the column and row tracks behind the layout helps when first laying out tiles, resizing, or reorganizing, and the override path keeps the surface a primitive: consumers that want a different look (or no overlay at all) can ship their own.
How?
packages/grid/src/shared/grid-overlay.{tsx,module.css}hosts the default overlay: a diagonalrepeating-linear-gradientfor the surface tinting, a sub-grid that mirrors the parent's column tracks (each cell takes a tintedbackground-colorplus a dashed outline), and abackground-imageper cell that paints a 1px horizontal divider everyrowHeight + gappixels when row height is numeric.GridOverlayRenderPropslives inpackages/grid/src/shared/types.tswith{ columns, gapPx, rowHeight? }. Lanes pass norowHeightbecause heights are content-driven; grids withrowHeight: 'auto'map it toundefinedfor the same reason.renderGridOverlay, pickrenderGridOverlay ?? GridOverlay, and render it as the first child of the grid root (which gainedposition: relative) wheneditModeis on. Document order keeps the overlay behind the items without explicitz-index.EditModestory drops its inlineGridVisualizer(the package paints it now) and a newCustom Grid Overlaystory shows the override path with column number labels and info-tone theming.--wp-grid-overlay-stripe-color,--wp-grid-overlay-track-color,--wp-grid-overlay-column-fill, plus the internal--wp-grid-overlay-row-{tile,line,line-end}driven by the component.Testing
Grid/DashboardGrid->Edit Mode: overlay shows warning-tone stripes, dashed columns, a 1px row divider at the bottom of each row, and a 10% warning fill on each column. Drag and resize still work; the overlay does not capture pointer events.Grid/DashboardGrid->Custom Grid Overlay: the consumer-suppliedNumberedOverlayreplaces the default (info-tone stripes plus numbered columns). Confirms the override path.Grid/DashboardGrid->Default/Responsive/FillWidth/FullWidth/RowHeight: no overlay rendered (those stories don't enableeditMode); the grid root paints nothing extra.Grid/DashboardLanes->Edit Mode: overlay paints columns only (no row dividers since heights are content-driven). Drag, resize, and responsive behavior unchanged.Grid/DashboardLanes->Default/ others: no overlay rendered.editModefromfalsetotruein any story: overlay appears and disappears cleanly.Screen.Recording.2026-05-12.at.10.27.27.AM.mov