Data views: Unbox items in grid layout #61159
Merged
Conversation
This file contains 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
jameskoster
added
[Type] Enhancement
|
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: -20 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
For me this PR felt good for patterns and pages but in templates, it felt too crowded for some reason. I wonder if increasing the gap between items would help. |
I guess it also depends on the background of the templates. This light gray doesn't help, and white is even worse :) |
|
Pushed a fix ensuring the outline is applied to all preview fields, which helps in the light-background-templates case: 
|
I agree, but it might be best to look at this more broadly. In a separate PR I'd like to explore tweaking the spacing based on the page container width. In narrow layouts (List) the spacing is a little too much, and it's the opposite in wider layouts (Grid / Table). |
|
Before: 
After: 
This works for me. cc @richtabor @jasmussen for other opinions. |
|
I think it works. There's something about those screenshots being vertically centered that feels awkward, though — that's separate. I do also wonder if the gap between these should be slightly bigger — density is good, but a little whitespace can help also. |
Indeed, it seems to be an issue in trunk too but yeah, should definitely be top aligned IMO |
I go back and forth a bit on this... for patterns I find the top alignment a little strange sometimes: 
It's also interesting that the templates and patterns pages have different alignments, unsure how we ended up there... :) As with most visual details in data views, it's difficult to find a single solution that works best for all consumers. A configuration option like #60891 can help. |
Could we differentiate between patterns and pages/posts/templates, and assign a min-height (or |
|
We can remove the aspect ratio for patterns, but then we get mis-aligned text which can be a bit awkward: 
Potentially easy to fix with a max-height, but one to explore separately imo. |
|
Although I love the masonry, there are some challenges with making that work consistently, so I'm not necessarily proposing that. But to your suggestion, and a question, can we:
Let me know if that makes sense and is feasible. Happy to chat if the idea needs more clarification. |
|
Yup, I'll make a PR to explore options when I get a second. |
|
#61190 fixes the alignment, so this should be good to go. I'll merge, but we can keep refining as needed. |
t-hamano
reviewed
Apr 30, 2024
Comment on lines
+333
to
+342
| &::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1); | ||
| border-radius: $grid-unit-05; | ||
| } |
There was a problem hiding this comment.
Perhaps due to this pseudo-element, the clickable area in the pattern preview is limited to the actual content.
Can one of the following approaches solve the problem?
.dataviews-view-grid .dataviews-view-grid__media:after: Addpointer-envents: none.page-patterns-preview-field__button: Addz-index: 1
ed9c39e3a07caa35f39a02c25fe69a44.mp4
There was a problem hiding this comment.
Good spot, and suggestion. I'll work on a follow-up.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Recently-added field display options (badge, row / column) and other tweaks like decreasing checkbox size improve information density in grid layout, thereby alleviating the need to visually stress the grid structure.
In this PR the 'box' around each grid item is removed giving the overall layout more room to breath.
Before
After
Testing instructions