DataViews Grid and Picker Grid: Add density option for gap between items#75887
Open
andrewserong wants to merge 5 commits intotrunkfrom
Open
DataViews Grid and Picker Grid: Add density option for gap between items#75887andrewserong wants to merge 5 commits intotrunkfrom
andrewserong wants to merge 5 commits intotrunkfrom
Conversation
andrewserong
added
[Type] Enhancement
github-actions
bot
added
[Package] Media Utils
5 tasks
|
Size Change: +610 B (+0.01%) Total Size: 6.87 MB
ℹ️ View Unchanged
|
Contributor
|
I tested it and it looks great ❤️ Likely unrelated, but sharing it here in case that it does relate. When I navigate with the keyboard, the arrows dataviewspicker.improvement.mp4 |
Contributor
Author
|
Thanks for taking this for a spin @fcoveram! I'll open this up for wider review 👍
I suspect it's unrelated, but I'm not able to reproduce. Is there anything unique about your test site that might be the cause? Is your site or logged in user language set to any language other than English? (I'm just clutching at straws 😄). For me the left/right are working as expected: 2026-02-26.16.31.07.mp4 |
andrewserong
commented
Feb 26, 2026
andrewserong
requested review from
gigitux,
ntsekouras and
oandregal
as code owners
|
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. |
andrewserong
force-pushed
the
try/add-density-to-dataviews-grid-and-picker-grid
branch
from
4b4f8a5 to
f0fb142
Compare
andrewserong
requested review from
aaronrobertshaw,
ramonjd,
talldan and
tellthemachines
Contributor
|
This is working really well but the difference in switching between compact and balanced vs balanced and comfortable feels slightly off. Could balanced be more halfway between the two extremes? Say 28px instead of 32? I think 28 isn't really a thing in our sizing system. Could 24 work? |
Contributor
|
Thanks for putting attention to the gaps. Since the spacing in current component is 32px (
That's an increment/decrease in the 8px that looks good. |
Contributor
|
The keyboard navigation works well when running the PR in playground, so it might have to do with my local. All good now. |
Contributor
|
Thanks for the PR! Code wise this looks good, so I'll leave it to designers to decide, but I was wondering:
|
Contributor
|
Since we reduced container spacing holistically to 
I agree with the
And could easily be persuaded to forgo the comfortable option to begin with. |
ramonjd
reviewed
Feb 27, 2026
packages/dataviews/src/components/dataviews-layouts/picker-grid/index.tsx
Show resolved
Hide resolved
Member
|
Also LGTM. I'll also defer to explicit sign from design folks. To compare, here's trunk: Kapture.2026-02-27.at.13.05.25.mp4Then I updated to:
Kapture.2026-02-27.at.13.04.16.mp4 |
Contributor
|
I'm happy if @fcoveram is :) |
Contributor
|
+1 to Jay's spacing suggestion 🚀 |
oandregal
reviewed
Feb 27, 2026
| /** | ||
| * The density of the grid layout. | ||
| */ | ||
| density?: Density; |
Member
There was a problem hiding this comment.
Can we document this in the "properties of layout" doc section?
Member
|
This is not something to act on this PR, but I noted the following: Screen.Recording.2026-02-27.at.18.41.44.movNote how the sort user preference is maintained across layout switches, but the density preference is not. I know why this happens (density is part of Density has proven useful across layouts, and it's also one of the primitives of the theme provider. My instinct is that we should graduate it to be part of the I don't think it needs to happen in this PR, but I thought I'd bring it up for folks to share thoughts. |
andrewserong
force-pushed
the
try/add-density-to-dataviews-grid-and-picker-grid
branch
from
f0fb142 to
a6eb73c
Compare
Contributor
Author
|
Thanks for the great feedback and testing everyone! I've updated the docs, updated the values to 
Good question. For me, one of the reasons I thought about adding the density controls here is that I like the idea of them being consistently there in each of the different layouts. It kind of dovetails nicely into the point that André makes in:
Ideally, and this might just be my subjective opinion, I think the density picker would be available on any layout, and Gutenberg / different UIs would provide its default for a particular area (in this case the media picker). As a user, I can then go into the settings and adjust it to exactly how I like to view my media (or other data) and WP would remember my preferences. So I think my preference here is to add density pickers as in this PR, but in a follow-up look into preserving the density selection that a user has made. But again, these are very gently held opinions. My main goal is simply for it to feel "nicer to use and explore a large library of media", which is admittedly quite a general goal 😄 Let me know if anyone thinks this is good in its current form, or if it could use more iteration! |
|
Flaky tests detected in a6eb73c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22561092750
|
Contributor
|
The video attached here by @oandregal is a slightly confusing experience. Layout and Appearance settings are two different actions, so I would expect that Layout modifies the visual hierarchy of the elements set in the Appearance. With that feature grouping, the reset action in appearance should only modify what’s inside the popover and not the layout.
Very much agree with this. |
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
7 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?
Part of:
Add a
densityoption for gap between items in the DataViews Grid and Picker Grid layoutsWhy?
As raised in testing feedback in #73085 (media interaction in a modal), the experimental media library modal's gap is currently much bigger than the existing core media library. In order to support folks browsing media with a small preview and lots of items on the page, it'd be good to support a smaller gap between the items.
There are many ways to achieve this, but since we already have a
densityoption in other layout types, I thought it'd be worth a try to see how it feels adding this to Grid and Picker Grid, but for it to control the gap between items.It didn't seem very complex to add it in, and I imagine this is preferable to a separate
gapconcept, but keen to hear what others think.The overall goal is to support viewing lots of items all at once, with minimal spacing between items, while still supporting large previews and larger gaps.
How?
DensityPickerto theviewConfigOptionsfor both the Grid and Picker Grid layouts.GridConfigOptionsthat bundles theDensityPickerwith thePreviewSizePickercompactandcomfortabledensities, treatingbalancedas the default$grid-unit-20$grid-unit-30$grid-unit-40All of this is up for debate as to whether we think this is a good path of course, keen for feedback on it! It's also fairly low priority in the grand scheme of things, so not urgent to look at.
Testing Instructions
You can test this out in Storybook (
npm run storybook:dev) for any of the Layout Grid or Picker Grid stories.Or, you can try it in the media modal via enabling the experiment:
Then, go to edit a post or page and add a featured image. Go to the cog / settings dropdown and play around with the toggles.
Screenshots or screencast
DataViews Grid
2026-02-25.12.18.27.mp4
DataViews Picker Grid (in a modal):
2026-02-25.12.19.33.mp4