Skip to content

Conversation

karthick-murugan
Copy link
Contributor

What?

Fixes #59175

This PR makes checkboxes in table and grid layouts always visible by removing hidden states and unnecessary hover/focus styles.

Why?

The changes improve:

  • Accessibility: Checkboxes are now always visible and discoverable.
  • Usability: Users can see available actions immediately.
  • Consistency: Predictable interface behavior reduces cognitive load.

How?

  • Made checkboxes always visible in both table and grid layouts.
  • Removed the hidden states and hover effects that previously controlled their visibility.
  • Kept other interactive styles, such as selected states, to maintain clarity.

Testing Instructions

  • Navigate to the Site Editor > Pages > Manage all pages.
  • Verify that checkboxes in both table and grid layouts are always visible.
  • Interact with checkboxes to ensure functionality and styling remain intact.

Screenshots or screencast

REC-20241212161332.mp4

Copy link

github-actions bot commented Dec 12, 2024

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: TimothyBJacobs <timothyblynjacobs@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@karthick-murugan
Copy link
Contributor Author

@afercia - Please check this PR when you get some time. Thanks in advance.

@karthick-murugan
Copy link
Contributor Author

@t-hamano - Can you please check this PR related to this issue, when you get some time.

@t-hamano
Copy link
Contributor

t-hamano commented Jan 7, 2025

@karthick-murugan

From my understanding, we have not reached a consensus on #59175, so we need to be cautious about moving forward with PRs with visual changes like this one.

In the past, certain changes have been reverted or suggested to be reverted as not being ideal. For example:

I don't want to cause something similar as much as possible.

Let's discuss it a bit more on #59175 until we reach a solid consensus.

@Mamaduka Mamaduka added the [Type] Bug An existing feature does not function as intended label Jan 13, 2025
@Mamaduka Mamaduka added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Jan 13, 2025
@karthick-murugan
Copy link
Contributor Author

@t-hamano - Updated this PR as per the feedback mentioned in this issue.

@t-hamano
Copy link
Contributor

@karthick-murugan I think we need to use media queries based on hover support rather than viewport. Also, I think what's expected here is to always show checkboxes in the Grid layout, not the Table layout.

@karthick-murugan
Copy link
Contributor Author

@karthick-murugan I think we need to use media queries based on hover support rather than viewport. Also, I think what's expected here is to always show checkboxes in the Grid layout, not the Table layout.

@t-hamano updated the changes. Please have a look.

@karthick-murugan
Copy link
Contributor Author

@t-hamano - Please let me know if any other changes required.

@t-hamano
Copy link
Contributor

@karthick-murugan I think we can use the existing selector:

.dataviews-view-grid__card .dataviews-selection-checkbox {
	position: absolute;
	top: -9999em;
	left: $grid-unit-10;
	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");

	@media (hover: none) {
		// Show checkboxes on devices that do not support hover.
		top: $grid-unit-10;
	}
}
  • It's recommended to use SCSS variables ($grid-unit-10)
  • Add a comment about why this code is needed

@karthick-murugan
Copy link
Contributor Author

@t-hamano - Changes updated.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Finally, can you rebase this PR by using trunk branch? This should resolve CI failures.

@karthick-murugan
Copy link
Contributor Author

LGTM!

Finally, can you rebase this PR by using trunk branch? This should resolve CI failures.

Rebased the PR @t-hamano

@t-hamano t-hamano merged commit feade05 into WordPress:trunk Mar 24, 2025
59 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.6 milestone Mar 24, 2025
@karthick-murugan karthick-murugan deleted the add/checkbox-by-default branch March 24, 2025 10:53
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
* Image size fix in lightbox

* Revert "Image size fix in lightbox"

This reverts commit 63f81c1.

* Add checkbox to site-editor pages by default

* Feedback Changes updated

* Updating grid layout

* Feedback changes

Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: TimothyBJacobs <timothyblynjacobs@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Data views: Make checkboxes always visible
3 participants