ColorPalette: Add editable hex label support

[dhruvikpatel18]

Closes #57244

What?

Adds the ability to edit hex color values directly in the ColorPalette component without opening the color picker.

Why?

Currently, users need to open the color picker to input a specific hex color value, which adds unnecessary steps when they already know the exact hex code they want to use. This enhancement improves the user experience by allowing direct hex value editing.

How?

• Added a new CustomColorValueInput component that handles the editable hex value functionality
• Implemented validation to ensure only valid hex colors are accepted
• Added keyboard accessibility for the editable hex value
• Maintained existing ColorPalette functionality while adding this new feature
• Added proper aria labels and roles for accessibility

Testing Instructions

1. Open or create a new post
2. Add a block that uses the ColorPalette component (e.g., Paragraph block with text color options)
3. Click on the custom color picker
4. Select any color or input a hex color
5. Verify that the hex value below the color swatch is clickable
6. Click the hex value and try editing it
7. Test with valid hex colors (e.g., #ff0000) and invalid inputs
8. Verify that pressing Enter applies the color and Escape cancels the edit

Screenshots or screencast

Before

Screen.Recording.2025-02-17.at.5.26.09.PM.mov

After

Screen.Recording.2025-02-18.at.12.41.32.PM.mov

[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: dhruvikpatel18 <[email protected]>
Co-authored-by: Mayank-Tripathi32 <[email protected]>
Co-authored-by: creativecoder <[email protected]>

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

[Mayank-Tripathi32]

Hi @dhruvikpatel18, Can you fix the following? Its not updating the input field correctly when switching colors while its in focus.

Screen.Recording.2025-02-18.at.7.05.00.PM.mov

[dhruvikpatel18]

Hi @Mayank-Tripathi32, Thanks for this pointing out.
I have updated the logic for CustomColorValueInput function to update the input field correctly when switching colors while its in focus.

[Mayank-Tripathi32]

Hi @Mayank-Tripathi32, Thanks for this pointing out. I have updated the logic for CustomColorValueInput function to update the input field correctly when switching colors while its in focus.

Thanks, I will test it again today, Can you also look into the unit tests?

[Mayank-Tripathi32]

Looks good to me!

• Tested with keyboard navigation
• Tested with invalid inputs
• Tested with changing values in color picker, it says in sync