Navigation: Add clearable option to color picker in navigation block

[yogeshbhutkar]

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

Screencast

Closes: #68453

[github-actions]

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 <[email protected]>
Co-authored-by: Mayank-Tripathi32 <[email protected]>
Co-authored-by: hbhalodia <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[Mayank-Tripathi32]

LGTM, Works as expected.

[hbhalodia]

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

[yogeshbhutkar]

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

[t-hamano]

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:

[yogeshbhutkar]

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.

[t-hamano]

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

• Social links block: Add Clear button for color option #68564
• Post Featured Image: Adds control to clear the the overlay color. #68525

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:

We'll need to address this issue separately.

[yogeshbhutkar]

We'll need to address this issue separately.

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