DataViews: Align media styles in table view with list view for consistency #70671
+47
−19
Conversation
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
|
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: +146 B (+0.01%) Total Size: 1.89 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5da1e86. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/16195113261
|
jasmussen
approved these changes
Jul 11, 2025
t-hamano
requested changes
Jul 11, 2025
|
If we change styles in the Here are some visual changes that I noticed. I think we need to determine whether these changes are intentional, and if not, whether they are acceptable. Anything in the list below that has 🤔 in it is a change that I personally feel was not intended. Template - Table View
Page - List View
Page - Table View
Pattern - Table View
|
|
Thanks for your review and it's very useful!
Fixed by 1345c92.
The border issue is fixed by Fixed by 1345c92, and the rounded corners issue is fixed by 0d58bef. I think the rounded corners issue was on the list view as well because the border-radius on the image was 2px and was inconsistent with the
Yes, I think it's intended. |
t-hamano
reviewed
Jul 12, 2025
There was a problem hiding this comment.
Thanks for the update! Could you chech the following points?
Page - List View
The placeholder style has changed significantly, and I don't think this is an intentional change. cc @jasmussen
| Before | After |
|---|---|
Page - Table View
The border is slightly thicker. This is because the fields package applies a different box-shadow, so I think we need to add box-shadow:none here.
| Before | After |
|---|---|
Additionally, we will need to enable the "Data Views: enable for Posts" from the Gutenberg > Experiments menu and test the Posts view:
http://localhost:8888/wp-admin/admin.php?page=gutenberg-posts-dashboard
I think it’s an intentional change. It’s a bit odd that the image placeholder looks different across views. Previously, both the grid view and list view showed the placeholder with a
I think it aligns with the list view, and I’m not sure if we should disable it. The reason is that the placeholder in the list view isn’t displaying correctly—the box-shadow on the placeholder is missing, which makes it look thinner. cc @jasmussen @matt-west
Thanks! I didn't know that 👍 |
|
What's blocking this PR? A consistent placeholder (just pick one of them) works for me :) |
|
I tested this quickly, it's working great except for the "grid" placeholder, It's inconsistent with the other two layouts. Let's make it consistent and ship. |
|
The solid gray works better as a placeholder IMO. |
0d58bef to
01f8798
Compare
|
Updated the image placeholder by 01f8798.
|
youknowriad
approved these changes
Jul 23, 2025
|
@t-hamano any thoughts? |
|
A small nitpick: I think it would help to add a detail that makes the gray box more obviously a placeholder rather than, say, a gray image. Could be an icon, or just a diagonal line like the Placeholders we find in the Editor: |
t-hamano
approved these changes
Jul 25, 2025
There was a problem hiding this comment.
All the placeholders are now consistent and look good overall. The biggest change in this PR is the table view.
Before
After
A small nitpick: I think it would help to add a detail that makes the gray box more obviously a placeholder rather than, say, a gray image. Could be an icon, or just a diagonal line like the Placeholders we find in the Editor:
This is also proposed in this issue: #59098. Personally, I'd be happy to avoid style overrides in the site editor as much as possible and establish a placeholder design for the dataviews UI standard.
|
Merging to solve this consistency issue. Please @jameskoster @matt-west don't let this stop you iterating on the right default placeholder. |
adamsilverstein
pushed a commit
to adamsilverstein/gutenberg
that referenced
this pull request
Jul 31, 2025
…tency (WordPress#70671) Co-authored-by: arthur791004 <arthur791004@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: matt-west <mattwest@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
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.
What?
Align media styles in table view with list view for consistency
Why?
Currently, the media item displayed in the table view and list view differs slightly. It would be better to make them consistent for a more cohesive user experience.
How?
Apply following styles to the media item in the table view
background-color: $gray-100;border-radius: $grid-unit-05;box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);flex-shrink: 0to prevent it from shrinkingTesting Instructions
npm run storybook:devto open the storybookbackground-color: $gray-100;border-radius: $grid-unit-05;box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);flex-shrink: 0to prevent it from shrinkingTesting Instructions for Keyboard
Screenshots or screencast