Dashboard: fix widget rendering on the masonry grid#78645
Merged
Conversation
parametric 0-9 glyphs with per-stroke gradients, all WPDS tokens
render content-driven banner-on-top; drop size containment and JS breakpoints
keep content block-end padding so Card.FullBleed negative margin cancels it
wrap DataViews in a scroll container so a long stream scrolls instead of stretching the tile
zero block padding and cancel Card.FullBleed's negative bottom margin so the body fills edge-to-edge without a phantom scrollbar or inset
derive height from width with aspect-ratio; pin width so the ratio only drives the block axis
drop the widget's own overflow; keep max-height so the chrome's single scroll container handles a long stream without nesting
clear the stored preference when settings return to default so reset falls back to the code default; align the engine default with the hook
|
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. |
retrofox
added
[Type] Experimental
|
Size Change: 0 B Total Size: 8.13 MB ℹ️ View Unchanged
|
simison
reviewed
May 25, 2026
| /** | ||
| * External dependencies | ||
| */ | ||
| import fastDeepEqual from 'fast-deep-equal/es6'; |
Member
There was a problem hiding this comment.
Did this need package.json entry?
Member
There was a problem hiding this comment.
Just FYI in case relevant, elsewhere in repo I'm seeing imports like this:
import fastDeepEqual from 'fast-deep-equal/es6/index.js';...but if current works, that's just a signal that something changed in the package.
Contributor
Author
There was a problem hiding this comment.
I'll take a look. Thanks
simison
approved these changes
May 25, 2026
|
Flaky tests detected in 81190d1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26415001401
|
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?
Fixes how several dashboard widgets render on the masonry (content-driven) grid model, plus two related issues in the shared widget chrome and in the grid-settings reset.
Why?
The dashboard supports two grid models with opposite height contracts. The 2D grid gives each tile a definite height (
rowHeighttimes its row span), while masonry derives each tile's height from its content (measured, content-driven). Several widgets were authored against the definite-height grid and assumed an externally imposed height, so they broke on masonry:welcomeusedcontainer-type: sizeplusheight: 100%. Size containment severs the content's contribution to height, so with no external height the tile collapsed to roughly zero.site-previewis built entirely from absolutely-positioned layers (iframe and overlay), so it has no intrinsic block size; with onlyheight: 100%it also collapsed to roughly zero.activityrenders an unboundedDataViewslist, which stretched the tile arbitrarily tall.Separately, the shared chrome's bleed handling left a phantom scrollbar and a bottom inset (the
Card.FullBleednegative margin had no padding left to cancel), and the grid-settings reset wrote the defaults object to the preference store instead of clearing the entry.How?
welcome:container-type: sizebecomesinline-size;height: 100%becomesmin-height: 100%; the JSuseResizeObserverbreakpoints are removed (a content-driven layout that keys its breakpoints off measured height feeds back on itself), as is the side-by-side layout, in favor of always-column plus the existingauto-fitcolumns grid; the banner takes a responsive hero height via container units.site-preview:aspect-ratioderives the height from the width (stable on masonry);width: 100%pins the inline size so the ratio only ever drives the block axis;height: 100%still fills a fixed grid tile.activity: amax-heightwrapper bounds the list. It has nooverflowof its own, so the chrome's existing scroll container handles a long stream without nesting a second scrollbar.Card.FullBleed'smargin-block-end(it was sized to cancel a padding we now remove), so a bleeding body fills top to bottom cleanly.settonull) rather than a stored copy of the defaults, so the value always tracks the current code default. The engine default is aligned with the hook default so the match is detected.Testing
welcomeshows the banner full width on top with the three feature columns below, at several tile widths.site-previewrenders the homepage preview at a content-driven height (not collapsed), centered, with no horizontal scrollbar at narrow widths.activitywith many events bounds its height and shows a single vertical scrollbar. Try a short tile in the 2D grid as well.Follow-ups
height: 100%plusoverflow-y: autoon masonry (harmless after these fixes, but a latent source of nested scroll in the 2D grid).hello-world,quick-draft,site-health) for the same definite-height assumptions.