Fix: Search block doesn't respect background and text color options#70074
Draft
Rishit30G wants to merge 3 commits intoWordPress:trunkfrom
Draft
Fix: Search block doesn't respect background and text color options#70074Rishit30G wants to merge 3 commits intoWordPress:trunkfrom
Rishit30G wants to merge 3 commits intoWordPress:trunkfrom
Conversation
Rishit30G
commented
May 7, 2025
Comment on lines
+156
to
+158
| const bg = attributes.style?.elements?.button?.color?.background; | ||
| const text = attributes.style?.elements?.button?.color?.text; | ||
| const gradientBg = attributes.style?.elements?.button?.color?.gradient; |
Contributor
Author
There was a problem hiding this comment.
I'm not sure if this would be the best way to get the colors, any alternatives would be appreciated!
Rishit30G
commented
May 7, 2025
Comment on lines
+619
to
+679
| function get_color_classes_for_button_block_core_search( $attributes ) { | ||
| $classnames = array(); | ||
|
|
||
| $color_text_name = ''; | ||
| $color_background_name = ''; | ||
| $color_gradient_name = ''; | ||
|
|
||
| if ( | ||
| isset( $attributes['style']['elements']['button']['color']['text'] ) && | ||
| is_string( $attributes['style']['elements']['button']['color']['text'] ) | ||
| ) { | ||
| $full_value_text = $attributes['style']['elements']['button']['color']['text']; | ||
| if ( strpos( $full_value_text, '|' ) !== false ) { | ||
| $parts = explode( '|', $full_value_text ); | ||
| $color_text_name = end( $parts ); | ||
| } | ||
| } | ||
|
|
||
| if ( | ||
| isset( $attributes['style']['elements']['button']['color']['background'] ) && | ||
| is_string( $attributes['style']['elements']['button']['color']['background'] ) | ||
| ) { | ||
| $full_value_background = $attributes['style']['elements']['button']['color']['background']; | ||
| if ( strpos( $full_value_background, '|' ) !== false ) { | ||
| $parts = explode( '|', $full_value_background ); | ||
| $color_background_name = end( $parts ); | ||
| } | ||
| } | ||
|
|
||
| if ( | ||
| isset( $attributes['style']['elements']['button']['color']['gradient'] ) && | ||
| is_string( $attributes['style']['elements']['button']['color']['gradient'] ) | ||
| ) { | ||
| $full_value_gradient = $attributes['style']['elements']['button']['color']['gradient']; | ||
| if ( strpos( $full_value_gradient, '|' ) !== false ) { | ||
| $parts = explode( '|', $full_value_gradient ); | ||
| $color_gradient_name = end( $parts ); | ||
| } | ||
| } | ||
|
|
||
| // Add final classes. | ||
| if ( ! empty( $color_text_name ) ) { | ||
| $classnames[] = 'has-' . sanitize_title( $color_text_name ) . '-color'; | ||
| } elseif ( ! empty( $full_value_text ) ) { | ||
| $classnames[] = 'has-text-color'; | ||
| } | ||
|
|
||
| if ( ! empty( $color_background_name ) ) { | ||
| $classnames[] = 'has-' . sanitize_title( $color_background_name ) . '-background-color'; | ||
| } elseif ( ! empty( $full_value_background ) ) { | ||
| $classnames[] = 'has-background'; | ||
| } | ||
|
|
||
| if ( ! empty( $color_gradient_name ) ) { | ||
| $classnames[] = 'has-' . sanitize_title( $color_gradient_name ) . '-gradient-background'; | ||
| } elseif ( ! empty( $full_value_gradient ) ) { | ||
| $classnames[] = 'has-gradient'; | ||
| } | ||
|
|
||
| return implode( ' ', $classnames ); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
This function gets the job done, but I believe there’s a better or more efficient way to implement it
Contributor
|
I don't think this is the correct way to solve this. Personally I would prefer this to be managed by adding the support for form elements to the elements in global styles. |
Contributor
Author
|
Thanks for sharing the suggestion @carolinan! I was going with the approach shared here #65343 (comment)
Interesting, I'll need to give this discussion a read 👍🏻 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #65343
Why?
This PR adds support for applying text and background colors to the input field in the search block, and also introduces separate text and background color options for the search button.
How?
buttonin the block.jsonget_color_classes_for_button_block_core_searchfor adding the button color functionality and updated an existing function name toget_color_classes_for_input_block_core_searchgetPresetColorClassfunction for adding the relevant text and background colour classes on the editor sideTesting Instructions
Search BlockScreenshots or screencast
Screen.Recording.2025-05-07.at.2.38.32.PM.mov