DataViews: Consistent rendering of selection checkbox and actions in grid layout#75056
Conversation
|
|
||
| .dataviews-view-grid__card .dataviews-view-grid__media-actions { | ||
| position: absolute; | ||
| z-index: 1; |
There was a problem hiding this comment.
Without it the action's trigger button is not clickable due to the preview field. It wasn't needed until now, because in core we could not hide the title field, thus the actions would always be next to the title.
|
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: +318 B (+0.01%) Total Size: 3 MB
ℹ️ View Unchanged
|
|
This feels like an improvement to me, but I recognise it's a big change so am keen to get wider feedback. One small feedback; if a view supplies a media field I think we should consider locking it's visibility in Grid layout. I can't really think of a scenario where hiding the media field in Grid layout makes sense. Similarly, if a user hides the media field in a layout like Table, it seems reasonable to reveal it automatically when they switch to Grid. |
|
Thanks for the ping! Conceptually and code-wise I really like this idea, as it simplifies things a bit, and I agree that most use cases for Grid will be centered around the preview / media field 👍 The one case I could think of where folks might find it unexpected that you can't hide the media field is if there's anyone currently using the grid layout for something like the following where the description field is the prominent one. Here's how folks (might) use it, based on the templates screen:
I feel like we might have discussed that in the past somewhere, I wonder if @oandregal remembers. All that said, being slightly more opinionated about the Grid layout and effectively saying this layout is for a grid with a media/preview field does make sense to me.
Me too, I wonder if there are other projects using DataViews with the Grid layout, where folks might give feedback? I'm pretty biased as I've mostly been focused on media, so for my own use cases this change looks great 😄 |
I'm not really sure layouts should contain such logic for smart showing/hiding fields etc.. If you look at the storybook, no layout has constraints about any field (title, media, description, etc..) and I believe that's intentional in order to be able to switch layouts seamlessly. If for a consumer a field is important, it should not be hideable in general. That's my 2 cents though 😄 |
|
@ntsekouras I don't disagree, but unless I'm missing something the motivation to hide the media field would generally be to create a denser view, but that isn't really achieved due to the placeholder. Maybe we can address that by adjusting the aspect ratio to make the placeholder smaller e.g.:
|
80328ea to
f14b8e8
Compare
That's fair enough. I updated to have a smaller placeholder. |
jameskoster
left a comment
There was a problem hiding this comment.
I'm getting build errors on this branch but I suspect it's just me. From the videos the design looks good.
…`grid` layout (#75056) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
…`grid` layout (#75056) Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>


What?
Resolves: #74046
Alternative of: #71231
In
gridlayout we have actions and selection checkbox tied totitleFieldandmediaField. This has three issues:mediaFieldor it's hidden, there is no way to render the selection checkboxtitleFieldandmediaFieldand we can hide one of them, actions are repositioned making it a bit inconsistenttitleFieldandmediaField, even if they exist, are hidden, there are no actions and no selection checkbox available. You can see this in storybook here by hiding thetitle and imagefieldsThis PR follows parts of this suggestion.
For that placeholder I copied the styles we have for featured image field's placeholder
Testing Instructions
pagesand hide thefeatured image. Observe that a placeholder is still rendered with the actions and selection checkboxnpm run storybook:dev) test thegridlayout story (?path=/story/dataviews-dataviews--layout-grid) and hide thetitle and imagefieldsBefore
pagesScreen.Recording.2026-01-29.at.3.49.00.PM.mov
After
pagesScreen.Recording.2026-02-02.at.12.21.07.PM.mov
After
gridstoryScreen.Recording.2026-02-02.at.12.26.20.PM.mov