diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js index 9f2a5eaef32cd4..d544393616eb75 100644 --- a/packages/block-library/src/search/edit.native.js +++ b/packages/block-library/src/search/edit.native.js @@ -49,6 +49,7 @@ export default function SearchEdit( { setAttributes, className, blockWidth, + style, } ) { const [ isButtonSelected, setIsButtonSelected ] = useState( false ); const [ isLabelSelected, setIsLabelSelected ] = useState( false ); @@ -222,12 +223,18 @@ export default function SearchEdit( { styles.plainTextInput, styles.plainTextInputDark ), + style?.baseColors?.color && { color: style?.baseColors?.color?.text }, ]; - const placeholderStyle = usePreferredColorSchemeStyle( - styles.plainTextPlaceholder, - styles.plainTextPlaceholderDark - ); + const placeholderStyle = { + ...usePreferredColorSchemeStyle( + styles.plainTextPlaceholder, + styles.plainTextPlaceholderDark + ), + ...( style?.baseColors?.color && { + color: style?.baseColors?.color?.text, + } ), + }; const searchBarStyle = [ styles.searchBarContainer, @@ -332,18 +339,45 @@ export default function SearchEdit( { ? '' : __( 'Add button text' ); + const baseButtonStyles = { + ...style?.baseColors?.blocks?.[ 'core/button' ]?.color, + ...attributes?.style?.color, + ...( style?.color && { text: style.color } ), + }; + + const richTextButtonContainerStyle = [ + styles.buttonContainer, + isLongButton && styles.buttonContainerWide, + baseButtonStyles?.background && { + backgroundColor: baseButtonStyles.background, + borderWidth: 0, + }, + style?.backgroundColor && { + backgroundColor: style.backgroundColor, + borderWidth: 0, + }, + ]; + + const richTextButtonStyle = { + ...styles.richTextButton, + ...( baseButtonStyles?.text && { + color: baseButtonStyles.text, + placeholderColor: baseButtonStyles.text, + } ), + }; + + const iconStyles = { + ...styles.icon, + ...( baseButtonStyles?.text && { fill: baseButtonStyles.text } ), + }; + const renderButton = () => { return ( - + { buttonUseIcon && ( ) } @@ -364,7 +398,7 @@ export default function SearchEdit( { className="wp-block-search__button" identifier="text" tagName="p" - style={ styles.richTextButton } + style={ richTextButtonStyle } placeholder={ buttonPlaceholderText } value={ buttonText } withoutInteractiveFormatting diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap index 928445432525f2..5dab6fdc8e2183 100644 --- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap @@ -97,6 +97,7 @@ exports[`Search Block renders block with button inside option 1`] = ` Array [ false, undefined, + undefined, ], undefined, ] @@ -109,6 +110,8 @@ exports[`Search Block renders block with button inside option 1`] = ` Array [ undefined, false, + undefined, + undefined, ] } > @@ -275,6 +278,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`] Array [ undefined, undefined, + undefined, ], undefined, ] @@ -287,6 +291,8 @@ exports[`Search Block renders block with icon button option matches snapshot 1`] Array [ undefined, false, + undefined, + undefined, ] } > @@ -335,6 +341,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = ` Array [ undefined, undefined, + undefined, ], undefined, ] @@ -347,6 +354,8 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = ` Array [ undefined, false, + undefined, + undefined, ] } > @@ -513,6 +522,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = Array [ undefined, undefined, + undefined, ], undefined, ] @@ -525,6 +535,8 @@ exports[`Search Block renders with default configuration matches snapshot 1`] = Array [ undefined, false, + undefined, + undefined, ] } > @@ -682,6 +694,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = ` Array [ undefined, undefined, + undefined, ], undefined, ] diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 75886e06f9406f..ac56fe350bc06f 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +- [**] Search block - Text and background color support [#35511] ## 1.64.0 - [*] [Embed block] Fix inline preview cut-off when editing URL [#35321]