Update field colorisation in DataViews list layout#73884
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
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: +284 B (+0.01%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 6437e91. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20238406306
|
|
As-is, this PR is an improvement, and I think there's a system to it as well. But help me understand the rules though: most of the time, the blue accent color is a hover color. In this concept it's the onselect color. I guess that's because it's particular to the List view type, where the entire row is clickable to select, with no other actions like you'd have on Table or Grid? |
|
@jasmussen I mostly just wanted to tidy up the mess we have on trunk, but good nudge to dig a bit deeper to iterate and find a wider cohesion. I agree blue is a more conventional hover color, but I don't love how it looks on the light gray background. Any thoughts on that? I think a light shade of the theme color might work better (and would align with button styles). Here's a comparison:
I recognise we currently use light gray for table row hover styles, so this would be inconsistent, but those styles might be going away (#73873). Obviously we should use the same shade background for selected rows in both list and table layouts. Selected rows could use dark gray text and a slightly darker background:
|
|
Colors updated to match the mockups above: Screen.Recording.2025-12-15.at.15.40.59.mov |


What
Update and simplify colorisation of fields in DataViews list layout.
Why
In a previous WP version, hovering a list item caused all text including the title to by colorised by the
themecolor:At some point that style was lost, and now only the fields are affected:
Additionally, when an item is selected regular fields use the theme color, but the description field does not:
There isn't any obvious logic to the colorisation which makes the UX feel a bit confusing.
This PR tidies things up:
$gray-700when 'resting'var(--wp-admin-theme-color)when the row is hovered$gray-900when selected$gray-900when resting and selected, andvar(--wp-admin-theme-color)when hoveredBefore
Screen.Recording.2025-12-10.at.15.14.28.mov
After
Screen.Recording.2025-12-15.at.15.40.59.mov
Testing
npm run storybooknpm run build