Skip to content

Enhanced hint for color picker #49259#69863

Open
vk17-starlord wants to merge 1 commit intoWordPress:trunkfrom
vk17-starlord:enhance/color-picker-usage-hint
Open

Enhanced hint for color picker #49259#69863
vk17-starlord wants to merge 1 commit intoWordPress:trunkfrom
vk17-starlord:enhance/color-picker-usage-hint

Conversation

@vk17-starlord
Copy link
Copy Markdown
Contributor

What?

Closes #49259

This PR adds a hint to the color preview field in the Block Editor to help users understand that clicking it opens the custom color selector.

Why?

This PR addresses an issue where users, particularly WordPress newcomers, find it non-intuitive that clicking the color preview field opens the custom color selector. Adding a simple hint above the field will improve user experience by making this functionality more discoverable.

How?

  • Modified the PreviewField component in packages/edit-site/src/components/page-templates/fields.js to include a hint text above the color preview field.
  • Updated the relevant styles in packages/block-library/src/navigation/editor.scss to ensure the hint is displayed correctly.

Testing Instructions

  1. Open a post or page in the WordPress editor.
  2. Insert a paragraph block.
  3. Click in the Settings Sidebar on Color -> Background.
  4. Verify that a hint text "Preview of selected color - Click for custom color" is displayed above the color preview field.
  5. Click on the color preview field and ensure the custom color selector opens as expected.

Testing Instructions for Keyboard

  1. Navigate to the color preview field using the keyboard.
  2. Verify the hint text is announced by screen readers.
  3. Press Enter or Space to open the custom color selector.

Screenshots or screencast

Before After
Before Screenshot 2025-04-09 at 12 26 03 PM

@vk17-starlord vk17-starlord requested a review from ajitbohra as a code owner April 9, 2025 06:56
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 9, 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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @burnuser.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: burnuser.

Co-authored-by: vk17-starlord <vineet2003@git.wordpress.org>

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

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Colors Color management labels Apr 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Colors Color management Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Color userinterface needs a hint for adjusting custom color

2 participants