De-emphasise bulk actions on Grid layout

[jameskoster]

In Grid layout checkboxes are permanently visible giving outsized emphasis to bulk actions. They aren't so visible on the Table layout which is arguably the layout most optimised toward bulk actions.

Let's update the design so the checkbox appears on hover/focus/focus-within above the preview in the zstack:

Optional extra: Move the actions menu too, giving the title more room to breathe in smaller grids.

[jameskoster]

Currently it's possible to select grid items using cmd+click. This may be too buried as the only affordance if we were to visually hide checkboxes, but if we updated the mechanic to work on click (similar to List layout), that might work?

select.mp4

The drawback to this approach is that when all fields are hidden, the click target would be very small, given the title + preview already serve as links to the Editor.

cc @WordPress/gutenberg-design for thoughts.

[annezazu]

Came here to open this exact issue. I find it very odd that we emphasize bulk editing when the only action that can be taken is a destructive one.

[jasmussen]

Dropbox does this, which doesn't seem unreasonable, and would match the DOM order:

[ellatrix]

Why not just show the checkboxes after you press "Bulk Edit"?

[jameskoster]

@jasmussen the challenge with that approach is that there may be data view consumers that utilise Grid layout, but do not supply a Preview field. There may be a case for making a Preview field a pre-requisite for Grid layout (which would unlock this idea), but that's a different discussion.

@ellatrix that's a good point, when figuring out solutions here we should consider the updated bulk actions UI design in #63193. Selecting the bulk checkbox in the Footer could expose per-item checkboxes.

[jasmussen]

there may be data view consumers that utilise Grid layout, but do not supply a Preview field. There may be a case for making a Preview field a pre-requisite for Grid layout (which would unlock this idea), but that's a different discussion.

Is there a way to preview how that would look at the moment? If we do want to support this, which can bevalid enough, the idea might still work with some clever use of whitespace, padding, and flexing. But I'd need to see what that state looks like at the moment to figure it out.

[jameskoster]

Is there a way to preview how that would look at the moment?

Only by manually hiding elements in dev tools:

The grid layout kind of falls apart without the preview. It's also hard to imagine when the Grid layout would be preferable to other layouts when no preview is visible.

This makes me think the preview probably should be mandatory.

[jasmussen]

This makes me think the preview probably should be mandatory.

Can the preview field be mandatory for just the grid layout? If yes, then it seems reasonable, since that layout itself is meaningless without a preview.

[jameskoster]

Can the preview field be mandatory for just the grid layout?

Yes that's what I meant 👍

In Grid layout the Preview field is always visible and cannot be toggled off. If the data doesn't include a preview field then Grid layout is disabled.

This unlocks the ability to overlay the checkbox (and potentially the actions) 'on top' of the preview, and reveal on hover/focus-within:

[jasmussen]

Let's try it.

[jameskoster]

Let's get some technical feedback on the feasibility. @youknowriad @jorgefilipecosta how do you feel about the idea of Grid layout and a Preview field being exclusive? IE the Grid layout is only applicable when the data provides a preview.

[youknowriad]

If I'm not wrong right now, the preview field is already kind of mandatory. If you don't provide it, you get a placeholder area. So I don't see any blocker in moving the select on top of the "preview" area.