DataViews: Remove table row click-to-select and hover styles #73873
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
jameskoster
requested review from
gigitux,
ntsekouras and
oandregal
as code owners
jameskoster
added
[Type] Enhancement
jameskoster
requested review from
a team,
oandregal and
youknowriad
and removed request for
gigitux,
ntsekouras and
oandregal
|
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. |
jameskoster
commented
Dec 10, 2025
|
Size Change: -304 B (-0.01%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
Contributor
|
I think if there's ever a time to try this, it's now at this part in the cycle, so for that reason I'm a 👍 👍 |
Contributor
Doing this will disable multi-selection in the table view, so I'm not sure if we should disable all interactions. See #70891 cc @talldan Additionally, the primary actions are not displayed on mouse hover, making them very inaccessible. Additionally, the primary action is visually hidden, but still clickable, which is confusing. Perhaps the primary action should stay as it is now. 5f59fbfdd92c48b2b1d5841e841bdb00.mp4 |
Contributor
I think the intention of the PR is that multiselection is only possible via the checkboxes. The shortcut is hard to discover, so I expect a lot of users might already be using the checkbox for this purpose. |
Member
|
Some tests need to be updated/removed. |
Contributor
Author
|
Thanks for testing y'all. I fixed the primary action button visibility issue. I also restored the cmd/ctrl click behavior. The main point of confusion is what happens when clicking a row, so it seems reasonable to leave this behavior in as a power-user feature, especially as it is a common UX pattern. @talldan I did notice that this isn't working in Firefox though 🤔 |
oandregal
reviewed
Dec 11, 2025
Member
I wouldn't mind removing this as well. It feels a bit confusing to leave this one for bulk actions but not having the click-select behavior. |
oandregal
approved these changes
Dec 11, 2025
Contributor
Author
|
The main reason I favor leaving cmd/ctrl click (for now at least) is that it's an extremely common UX pattern. The main problem this PR sought to address is the ambiguity around regular row clicks for which there isn't really a standard convention. I wouldn't necessarily object to removing it if there's strong feelings, but maybe in a separate PR? |
ntsekouras
reviewed
Dec 11, 2025
| border-bottom: 0; | ||
| } | ||
|
|
||
| &.is-hovered, |
Contributor
There was a problem hiding this comment.
If we remove these hovered background styles we can end up with this:
Contributor
Author
There was a problem hiding this comment.
There seems to be a similar issue on trunk with unhovered rows:
But yes I see it's also broken on hover on this PR. I guess it's related to the more general background changes we made, I'll work on a fix.
Contributor
Author
There was a problem hiding this comment.
I fixed the hover state:
But I couldn't find a great solution for the issue on trunk. I think that one probably needs a dedicated PR. I'll open an issue.
Edit: I checked how this works in 6.9 and noticed the column just has a background color:
This was my 'not great' solution 😅 So I guess it's fine to patch it this way for now, and explore a better fix separately.
|
Flaky tests detected in d3f9bc4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20239297741
|
Contributor
Author
|
@oandregal would you mind checking I updated the grid tests correctly in 3dfb9aa? |
ntsekouras
reviewed
Dec 15, 2025
| <DataViewWrapper | ||
| view={ { | ||
| ...DEFAULT_VIEW, | ||
| type: 'grid', |
Contributor
There was a problem hiding this comment.
It seems both of these tests under grid where testing the default view with table layout, and they were actually identical to the ones above - so not needed.
The changes here look good now.
The addition of the mediaField made me realize that we don't render checkboxes without one. That doesn't seem right and I'd expect it to have been discussed already..
Can you loop me in about this and maybe an existing plan? Is mediaField required? I just tried in pages in trunk and you can remove the Featured Image from the view options and then there are no checkboxes and no visual indication that we have items selected.
Contributor
Author
There was a problem hiding this comment.
Yeah I was surprised by that as well. I wonder if it's related to the DataViewsPicker work. Since it's an issue on trunk do you think we should explore separately?
Contributor
There was a problem hiding this comment.
Of course separately. It's out of scope for this PR. We can land this one.
Contributor
Author
There was a problem hiding this comment.
I opened an issue about the checkbox in grid layout: #74046
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.
As suggested in #73248 (comment)...
What
Removes the click-to-select behavior on table rows and all hover styles. Rows are no longer interactive; selection is only via checkboxes.
Why
Interactive table rows are ambiguous. Users are never sure whether clicking a row will navigate or select. Additionally the selection mechanic is also ambiguous. Removing all row click interactions is the safest way to ensure clarity.
How
onClickhandler from<tr>that toggled bulk-select checkboxesisHovered,handleMouseEnter,handleMouseLeave).is-hoveredbackground colors and:hoverstyles)isTouchDeviceRef,onTouchStart, and theisAppleOSimport:focus-withinstyles so action buttons remain visible on keyboard focus for accessibilityThe bulk-select checkbox remains the only way to select items, and interactive elements remain accessible via keyboard navigation.
Testing
npm run storybook