Skip to content

Navigation: Add clearable option to color picker in navigation block#68454

Merged
t-hamano merged 1 commit intoWordPress:trunkfrom
yogeshbhutkar:68453/update-nav-block
Jan 10, 2025
Merged

Navigation: Add clearable option to color picker in navigation block#68454
t-hamano merged 1 commit intoWordPress:trunkfrom
yogeshbhutkar:68453/update-nav-block

Conversation

@yogeshbhutkar
Copy link
Copy Markdown
Contributor

@yogeshbhutkar yogeshbhutkar commented Jan 2, 2025 •
edited
Loading

What, Why and How?

This PR introduces a clearable button, allowing users to easily clear applied colors. It ensures consistency between the Color Picker in the Sub Menu and the one in the Navigation block.

The clearable option has been added to the settings for all applicable settings, effectively addressing the issue.

Testing Instructions

  1. Add a Navigation block to your page.
  2. Apply a Background Color to the block.
  3. Use the Clear button to remove the applied color and verify that it works as expected.

Screenshots

Before After
Screenshot 2025-01-02 at 11 38 39 AM Screenshot 2025-01-02 at 11 29 39 AM

Screencast

Screencast

Closes: #68453

@yogeshbhutkar yogeshbhutkar changed the title Navigation: Add clearable option for color tools in navigation edit Navigation: Add clearable option to color picker in navigation block Jan 2, 2025
@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review January 2, 2025 06:42
@github-actions
Copy link
Copy Markdown

github-actions bot commented Jan 2, 2025 •
edited
Loading

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: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

Mayank-Tripathi32
Mayank-Tripathi32 approved these changes Jan 3, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@Mayank-Tripathi32 Mayank-Tripathi32 left a comment

Choose a reason for hiding this comment

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

LGTM, Works as expected.

hbhalodia
hbhalodia approved these changes Jan 6, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@hbhalodia hbhalodia left a comment

Choose a reason for hiding this comment

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

Not sure if the failing tests are related, but it should resolve. Approving for code logic.

@yogeshbhutkar
Copy link
Copy Markdown
Contributor Author

yogeshbhutkar commented Jan 7, 2025

Hi @t-hamano, can you please review this PR when you get a moment?

@t-hamano
Copy link
Copy Markdown
Contributor

t-hamano commented Jan 7, 2025

I think we should first consider whether we need a consistent clear button. Because there is precedent in the past where the need for this clear button has been debated and removed (#42689).

@WordPress/gutenberg-design Is this clear button necessary in the current Gutenberg?

By the way, currently there is a reset button that appears when you hover the mouse over an item if it has a color value. Whether this reset button is displayed or not is synchronized with the clearable prop, that is, the Clear button in the popup:

image

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Block] Navigation Affects the Navigation Block labels Jan 7, 2025
@yogeshbhutkar
Copy link
Copy Markdown
Contributor Author

yogeshbhutkar commented Jan 7, 2025

Thanks for the review @t-hamano.

there is a reset button that appears when you hover the mouse over an item if it has a color value.

This feature becomes quite helpful when clearing the colors.

The Heading and Rich Text components already include a clear button, as do many other blocks. However, it seems the Navigation block is missing this feature, which I believe creates an inconsistency.

Screenshot 2025-01-07 at 5 56 38 PM

@t-hamano t-hamano self-requested a review January 10, 2025 13:17
t-hamano
t-hamano approved these changes Jan 10, 2025
View reviewed changes
Copy link
Copy Markdown
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.

I noticed that PRs similar to this one were merged recently:

Maybe it's better to have a consistent clear button now, so I'm accepting this PR. Sorry for the confusion 🙇‍♂️

However, if the button text is long, the reset button will cover the text:

image

We'll need to address this issue separately.

@t-hamano t-hamano merged commit 22fbc32 into WordPress:trunk Jan 10, 2025
@github-actions github-actions bot added this to the Gutenberg 20.1 milestone Jan 10, 2025
@yogeshbhutkar
Copy link
Copy Markdown
Contributor Author

yogeshbhutkar commented Jan 10, 2025

We'll need to address this issue separately.

I've taken this case into account and am working on it. Thanks for the review!

This was referenced Jan 13, 2025
Closed
Merged
Gulamdastgir-Momin pushed a commit to Gulamdastgir-Momin/gutenberg that referenced this pull request Jan 23, 2025
@yogeshbhutkar @t-hamano @Gulamdastgir-Momin
Navigation: Add clearable option for color tools in navigation edit (W…
3b1d4c5 
…ordPress#68454)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
This was referenced Feb 5, 2025
Closed
Merged
@zzap zzap mentioned this pull request Apr 10, 2025
Closed
9 tasks
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@yogeshbhutkar @t-hamano @chriszarate
Navigation: Add clearable option for color tools in navigation edit (W…
97698be 
…ordPress#68454)

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@t-hamano t-hamano t-hamano approved these changes

@hbhalodia hbhalodia hbhalodia approved these changes

@Mayank-Tripathi32 Mayank-Tripathi32 Mayank-Tripathi32 approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees

No one assigned

Labels

[Block] Navigation Affects the Navigation Block Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 20.1

Development

Successfully merging this pull request may close these issues.

Inconsistency in Clear Color Option in Navigation block.

4 participants

@yogeshbhutkar @t-hamano @hbhalodia @Mayank-Tripathi32