Item style for original aspect ratio of image in DataViews

@andrewserong

What problem does this address?

As discussed in #81567, the current design of grid layout does poorly in showing the original aspect ratio of images. When checkbox control is placed over and the image and the white space, the outcome looks clumsy.

Here a screenshot from trunk up to day.

What is your proposed solution?

I’ve been playing with different ideas for making the image area work according to the existing design and heuristics, and the idea you can find below expands the work made in #82029 for styling items during the selection flow, and the one in #80043 for improving the style of selected items.

The idea adds a new safe area for images where the image is placed inside in its original aspect ratio. The item structure with images in different sizes should look like this.

As shown in #82029 and #80043, the item container works as the target area during the selection and is styled to indicate that it was selected. And since this issue came back from the context of Media, I began with the simplest variant and moved to the version that shows all fields you can see in Storybook.

Here are the variants that show the resting, selected + hover, and multi-selected states when the UX is in selection mode, as per the concept mentioned in #82029

Image only

Image and title

Image, title, and description

Title and description

Although likely less common for the grid layout, today it is possible this configuration.

All fields

Tip

Here is an overall view of all variants shown above.

Current: cover image

When the design is adapted to the current cover object-fit of image, it looks like this

Center-align text

To push further the experiment, I see value in having center-aligned texts for cases like Media in modal where the main piece of content is the image. Atlhough I'm not strong about this, here is how it should look like.

The above aims to spark discussion rather than showing it as part of the proposal, but curious about your thoughts on possible uses cases of this.

It's also important to remember that when optimizing for more use cases where one or more fields are visible, the component design becomes less ad hoc and looks more generic. To address the free-scenario feeling, we should be opinionated about the layer configurations for each screen using DataViews. So whether left- or center-aligned text, I feel confident that Media in modal using: grid layout + original aspect ratio on + only image field visible, provides a good UX.

What do you think of this? cc @andrewserong @ramonjd @WordPress/gutenberg-design @WordPress/gutenberg-components

Nice. Curious to hear feedback from folks!

Great ideas here! One question kind of for both this issue and #82029 is about whether the checkbox should be displayed at all in selection/picker mode unless the item is hovered or focused. The reason I ask is that the designs here look really nice with the added padding, but users (and views) can configure grid items to display quite small.

When that's the case, will additional padding in the grid item make the image feel too small? I.e. are we using the space available to us most efficiently? Here's how the experimental media modal looks right now if we use the smallest preview size:

This is a contrived example, but if we try to ensure the media items have enough padding to fully clear the visual real estate of the checkbox, things can get pretty squishy:

That's a long way of saying, how can we come up with a design that works really nicely for very small preview / grid items, as well as very large ones, as depending on the view, folks might want to display heaps of items all at once as they browse a very large library (i.e. massive image libraries), or examine just a small collection of items at a larger preview size (say, when picking a page template where there might only be a handful).

@fcoveram

Thanks again for pulling this together @fcoveram 🙇🏻

Firstly, and I think I'm not saying anything new, the preview wrapper looks like the right direction to me: with aspect ratio turned on, it gives every card an identical "home", and the geometry of it should make navigating more predictable, e.g., checkbox, selection, displayed fields.

I'm not a huge believer in the center-aligned text if you're already on the fence about it. If the titles were always short/single lined, maybe, but media file names can be anything and I think scanability could be hampered. Maybe it could be an option/prop on the dataview cell itself if consumers want it?

On the checkbox, keep it if it has value (I'd question it for the picker at least, not dataviews to be clear). For me it seems to introduce more disruption than not, i.e., it floats around for portrait images, and might bump against the edge of others or be "whited out" on white images. TBH in the non-selected resting state, they're just noise for me. That's just my opinion.

I get that they do serve to make select more obvious, and show what can be clicked, and we need to question why they are there in the first place - possibly for a very good reason that I'm ignorant of.

BUT! It could open up a "selection mode" on touch device with drag to select. I think Google photos uses long touch to enable select mode just out of interest.

Kapture.2026-08-28.at.12.00.46.mp4

Image size

One question (…) is about whether the checkbox should be displayed at all in selection/picker mode unless the item is hovered or focused. The reason I ask is that the designs here look really nice with the added padding, but users (and views) can configure grid items to display quite small. (…) how can we come up with a design that works really nicely for very small preview / grid items, as well as very large ones.

As I said before, optimizing and adding properties to the component create edge cases where some configurations don't look good depending on the context. I'm confident in this approach because the component uses the available space wisely based on its current heuristic.

At this point, DataViews optimizes views similarly to what OSs do. Here below you can see examples from MacOS where the views are poorly for the content displayed.

Example 1	Example 2	Example 3

MacOS provides better view configs for each example, yet it is possible to choose the ones that use the space poorly.

For this, I think that defining opinionated views with the specific configurations is the best approach to suggest, by default, which views suit the content display better.

Checkbox visibility

One question (…) is about whether the checkbox should be displayed at all in selection/picker mode unless the item is hovered or focused

Issue #82029 proposes showing the checkbox control in each entry once in selection mode. The designs shared here are based on that interaction context to test the layout, so in the viewer mode (before clicking on a checkbox), the item should not have the control visible.

…it seems to introduce more disruption than not, i.e., it floats around for portrait images, and might bump against the edge of others or be "whited out" on white images. TBH in the non-selected resting state, they're just noise for me.

I second your feelings, but from a design perspective, it’s key to keep the heuristic consistent to convey that the item shifts from providing actions (i.e., open it and trigger actions) to becoming a target area for the selection interaction. I’m afraid that without that visual clue, it’s not fully clear what will happen before clicking on it.

In other words, if selecting images in a modal to add to a Gallery block looks the same as the view in Media Library for managing entries but the interactions in each are different, then the experience is confusing.

Center-aligned text

I'm not a huge believer in the center-aligned text if you're already on the fence about it. If the titles were always short/single lined, maybe, but media file names can be anything and I think scanability could be hampered. Maybe it could be an option/prop on the dataview cell itself if consumers want it?

It was also in my mind to add it as a prop for this layout only.

Navigation Menu

Repository navigation

Item style for original aspect ratio of image in DataViews #82113

What problem does this address?