[Mobile] - Search block - Colors support (#35511)

* Mobile - Search block - add colors support * Mobile - Search block - simplify styles * Mobile - Search block - Remove border color when a custom background color is selected * Mobile - Search block - update snapshot * Mobile - Update Changelog * Mobile - Search block - Update snapshot
WordPress · Oct 15, 2021 · 0e5cb6c · 0e5cb6c
1 parent 889de47
commit 0e5cb6c
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git 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 (
-			<View
-				style={ [
-					styles.buttonContainer,
-					isLongButton && styles.buttonContainerWide,
-				] }
-			>
+			<View style={ richTextButtonContainerStyle }>
 				{ buttonUseIcon && (
 					<Icon
 						icon={ search }
-						{ ...styles.icon }
+						{ ...iconStyles }
 						onLayout={ onLayoutButton }
 					/>
 				) }
@@ -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
@@ -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
@@ -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]