Skip to content

Search Block: Ensure color settings apply to input field when button is disabled#77219

Merged
mikachan merged 4 commits intoWordPress:trunkfrom
dpmehta:fix/search-block-color-settings-no-button-mode
Apr 10, 2026
Merged

Search Block: Ensure color settings apply to input field when button is disabled#77219
mikachan merged 4 commits intoWordPress:trunkfrom
dpmehta:fix/search-block-color-settings-no-button-mode

Conversation

@dpmehta
Copy link
Copy Markdown
Contributor

@dpmehta dpmehta commented Apr 10, 2026

What?

Closes #62715

This PR updates the coloring logic for the Search block so that background and text colors correctly apply to the input field when the block is configured without a search button.

Why?

When a user changed the background or text color in the Search block, the styles only applied to the search button. If the user configured the block to hide the button (using the "no-button" state), the color settings had no visual effect because they were not cascaded down to the input field. This enhancement satisfies user expectations by ensuring custom colors gracefully fallback to styling the input field when the primary button component is absent.

How?

  1. Global Styles (block.json): Updated selectors.color to target both the button (.wp-block-search__button) and the input field when the wrapper explicitly defines the no-button state (.wp-block-search.wp-block-search__no-button .wp-block-search__input).
  2. Local Styles (index.php): Added a conditional check ($use_input_for_colors) to determine if the block is configured as no-button. If so, inline color and background-color styles are redirected to $input_styles instead of $button_styles.
  3. HTML Generation (index.php): Updated the rendering logic so that if the button is missing (! $show_button), the generated $color_classes (like has-text-color and has-background) are correctly appended to the <input> element's class array.
  4. Editor Rendering (edit.js): Pushed down colorProps.className and colorProps.style directly into textFieldClasses and textFieldStyles dynamically when hasNoButton is true, ensuring 1:1 visual parity within the canvas editor when configured from Inspector Controls.

Testing Instructions

  1. Open a post or template in the Site Editor.
  2. Insert a Search block.
  3. In the block inspector toolbar, toggle the "Button position" to No button.
  4. Still in the block settings, change the Text, Background, and Gradient colors.
  5. Verify that the selected colors apply directly to the input field.
  6. Toggle the "Button position" back to Button outside or Button inside.
  7. Verify the color selections shift seamlessly over to the submit button while the input returns to its standard uncolored state.
  8. Perform these same tests using the Styles panel (Global Styles) applied to the core/search block to confirm the theme.json engine routes the CSS accurately.

Screenshots or screencast

Before the fix

search-block-before.mov

After the fix

search-block-no-button.mov
Before After
Screenshot 2026-04-10 at 11 37 19 AM Screenshot 2026-04-10 at 11 38 15 AM

Use of AI Tools

Used AI assistance for logic evaluation for block state dependencies, and drafting PR text. All generated changes were reviewed and logically validated.

@github-actions github-actions bot added the [Package] Block library /packages/block-library label Apr 10, 2026
@dpmehta dpmehta marked this pull request as ready for review April 10, 2026 07:34
@github-actions
Copy link
Copy Markdown

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: dpmehta <mehtadev@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: benniledl <benniledl@git.wordpress.org>

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

@dpmehta
Copy link
Copy Markdown
Contributor Author

dpmehta commented Apr 10, 2026

Hey @mikachan tagging you here as you will be having more context for this PR as you have recently reviewed #77060 which resolves similar issue and we also talked about issue #62715 in that PR so i created separate PR to resolve issue 62715.

@mikachan mikachan added [Type] Enhancement A suggestion for improvement. [Block] Search Affects the Search Block - used to display a search field labels Apr 10, 2026
Copy link
Copy Markdown
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

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

Thanks @dpmehta! This is testing well, and the code changes look good to me 🎉

trunk This PR
Image Image

@mikachan mikachan merged commit 2abcdea into WordPress:trunk Apr 10, 2026
59 of 63 checks passed
@github-actions github-actions bot added this to the Gutenberg 23.0 milestone Apr 10, 2026
@dpmehta
Copy link
Copy Markdown
Contributor Author

dpmehta commented Apr 10, 2026

Thanks a lot @mikachan for quick response and testing. I appreciate it 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Search Affects the Search Block - used to display a search field [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search Block: Reflect Color Setting on Input Field When Search Button is Disabled

2 participants