Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow Panel: Add reset button #68981

Merged

Conversation

yogeshbhutkar
Copy link
Contributor

What, Why and How?

Closes #68973

This PR adds a reset button to the Shadow Panel, which becomes visible on hover or focus.

Testing Instructions

  1. Navigate to the post edit page.
  2. Create a Group block and try changing the default shadow.
  3. Observe the presence of the new reset button, which appears on hover.
  4. Try pressing the reset button and confirm the shadow gets reset.

Screencast

shadow-demo.mov

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review January 31, 2025 11:00
Copy link

github-actions bot commented Jan 31, 2025

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: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

@shail-mehta shail-mehta added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 31, 2025
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.

This PR works well, but from an accessibility perspective, we need to check the following points in particular:

  • It must be operable only via keyboard.
  • The focus must never be lost.

That is, the focus must not be lost when the reset button is pressed. See this implementation for reference:

// Return focus to parent button
colorButtonRef.current?.focus();

@yogeshbhutkar
Copy link
Contributor Author

Do I also extract the renderToggle logic into a generalized reusable component within this PR and use it within shadow-panel component?

Ref: #68973 (comment)

@t-hamano
Copy link
Contributor

t-hamano commented Feb 3, 2025

Personally, I find it easier to implement reset buttons in all the places and then extract them into reusable components.

@yogeshbhutkar yogeshbhutkar force-pushed the fix-68973/shadow-panel-reset-button branch from 0456fd8 to a397d3b Compare February 3, 2025 08:50
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! I think everything is working as expected.

797ca976ae6f4b0c08eea2cb8bd3db0c.mp4

@t-hamano t-hamano merged commit 693e315 into WordPress:trunk Feb 3, 2025
63 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.3 milestone Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Shadow Panel: Add reset button
3 participants