Media Modal Experiment: Set matching picker grid layout properties for when a user switches layouts#77118
Merged
andrewserong merged 1 commit intotrunkfrom Apr 8, 2026
Conversation
…r when a user switches between layouts
andrewserong
requested review from
aaronrobertshaw,
ramonjd,
talldan and
tellthemachines
andrewserong
added
[Type] Enhancement
ramonjd
approved these changes
Apr 8, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Review
Change: defaultLayouts for pickerGrid in MediaUploadModal now includes layout.previewSize: 170 and layout.density: 'compact', matching the initial view state and typed as SupportedLayouts.
Why it's correct: ViewPickerGrid already allows optional layout.previewSize and layout.density (see packages/dataviews/src/types/dataviews.ts). Without these on defaultLayouts, switching table → grid re-applies layout defaults from DataViews and diverges from the modal's intended compact grid; this keeps the UX consistent with the first paint.
Scope: Aligns with the PR description; persisting user-customized values remains out of scope (#76380).
LGTM.
|
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: +3 B (0%) Total Size: 7.74 MB 📦 View Changed
ℹ️ View Unchanged
|
ramonjd
approved these changes
Apr 8, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
LGTM
The size + density remains constant (unless I manually change them) between view switches.
On trunk it changes. 🚢
|
Flaky tests detected in 55bc1c0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24117175829
|
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?
Follows:
This is a simple PR to ensure that the default layout properties for the picker grid layout in the experimental media modal match the initial state of the modal.
Why?
If a user switches from the grid layout to the table layout and back to grid, currently we lose the original default preview size and density (i.e. small grid items with narrow gaps between items).
This PR ensures that when a user switches between the layouts, when they select the grid layout again, the grid items remain small and with narrow gaps.
Note: this PR does not address the idea of preserving user selection if a user customises these values themselves. This is tracked in #76380 and can be looked into separately.
How?
For the picker grid layout in the default layouts for the experimental media modal, add values for
previewSizeand density.Testing Instructions
Active the media modal experiment in Gutenberg settings:
Go to add a featured image to a post or page. With the media modal open, toggle between the grid and table layouts and back again. After switching back, the grid items should be small with compact density.
Screenshots or screencast
Before
2026-04-08.13.47.13.mp4
After
2026-04-08.13.59.07.mp4
Use of AI Tools
None, I felt like using my hands 😄