From bd5335259241bba62728147eccf4d29f7930fd91 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Tue, 18 May 2021 11:34:18 -0700
Subject: [PATCH 01/15] Add color support to search block in editor

---
 packages/block-library/src/search/block.json |  4 ++++
 packages/block-library/src/search/edit.js    | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index 54bb6b43635bd..08c0cccb406dd 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -41,6 +41,10 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
+		"color": {
+			"gradient": true,
+			"__experimentalSkipSerialization": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 7bb783ee0fd97..8026d2295ee44 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -13,6 +13,7 @@ import {
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUnitControl as UnitControl,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
 import {
 	ToolbarDropdownMenu,
@@ -82,6 +83,7 @@ export default function SearchEdit( {
 		borderProps.style.borderRadius = `${ borderRadius }px`;
 	}
 
+	const colorProps = useColorProps( attributes );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
@@ -208,11 +210,19 @@ export default function SearchEdit( {
 		// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.
 		const buttonClasses = classnames(
 			'wp-block-search__button',
+			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className
 		);
-		const buttonStyles = isButtonPositionInside
-			? { borderRadius }
-			: borderProps.style;
+		// const borderStyles = isButtonPositionInside
+		// 	? { borderRadius }
+		// 	: borderProps.style;
+		const buttonStyles = {
+			...colorProps.style,
+			...( isButtonPositionInside
+				? borderRadius
+				: borderProps.style
+			)
+		};
 
 		return (
 			<>

From 3ff86a0d9d46761d8b612aa39741c2cf4615ded2 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Tue, 18 May 2021 11:38:30 -0700
Subject: [PATCH 02/15] Apply color classes and styles on frontend

---
 packages/block-library/src/search/index.php | 46 +++++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 9014bf7f990a7..1fdc63e7aa4d4 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -37,6 +37,7 @@ function render_block_core_search( $attributes ) {
 	$input_markup     = '';
 	$button_markup    = '';
 	$inline_styles    = styles_for_block_core_search( $attributes );
+	$color_classes   = get_color_classes_for_block_core_search( $attributes );
 	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
@@ -66,14 +67,17 @@ function render_block_core_search( $attributes ) {
 			$input_classes,
 			esc_attr( get_search_query() ),
 			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['shared']
+			$inline_styles['input']
 		);
 	}
 
 	if ( $show_button ) {
 		$button_internal_markup = '';
-		$button_classes         = ! $is_button_inside ? $border_color_classes : '';
+		$button_classes         = $color_classes;
 
+		if ( $is_button_inside ) {
+			$button_classes .= $border_color_classes;
+		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
 				$button_internal_markup = $attributes['buttonText'];
@@ -89,7 +93,7 @@ function render_block_core_search( $attributes ) {
 		$button_markup = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
 			$button_classes,
-			$inline_styles['shared'],
+			$inline_styles['button'],
 			$button_internal_markup
 		);
 	}
@@ -179,6 +183,8 @@ function classnames_for_block_core_search( $attributes ) {
 function styles_for_block_core_search( $attributes ) {
 	$shared_styles  = array();
 	$wrapper_styles = array();
+	$button_styles  = array();
+	$input_styles   = array();
 
 	// Add width styles.
 	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
@@ -262,7 +268,8 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	return array(
-		'shared'  => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
+		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', implode( ' ', $input_styles ) ) : '',
+		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', implode( ' ', $button_styles ) ) : '',
 		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
 	);
 }
@@ -283,3 +290,34 @@ function get_border_color_classes_for_block_core_search( $attributes ) {
 	}
 	return $border_color_classes;
 }
+
+/**
+ * Returns color classnames depending on whether there are named or custom text and background colors.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string The color classnames to be applied to the block elements.
+ */
+function get_color_classes_for_block_core_search( $attributes ) {
+	$classnames = array();
+
+	// Text color.
+	$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
+	if ( ! empty( $attributes['textColor'] ) ) {
+		$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
+	} elseif( $has_custom_text_color ) {
+		// If there's no 'textColor' text string but there is a custom text color style, still add the generic `has-text-color` class.
+		$classnames[] = 'has-text-color';
+	}
+
+	// Background color.
+	$has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
+	if ( ! empty( $attributes['backgroundColor'] ) ) {
+		$classnames[] = sprintf( 'has-background has-%s-background-color', $attributes['backgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		// If there's no 'backgroundColor' text string but there is a custom background color style, still add the generic `has-background` class.
+		$classnames[] = 'has-background';
+	}
+
+	return implode( ' ', $classnames );
+}

From 86cbfb760d46f5cff6055c952c5f69b6c10927d3 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 2 Jun 2021 16:07:06 -0700
Subject: [PATCH 03/15] Apply colors set in theme to button

---
 packages/block-library/src/search/block.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index 08c0cccb406dd..b8af0ef627ed8 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -50,7 +50,8 @@
 			"radius": true,
 			"__experimentalSkipSerialization": true
 		},
-		"html": false
+		"html": false,
+		"__experimentalSelector": ".wp-block-search__button"
 	},
 	"editorStyle": "wp-block-search-editor",
 	"style": "wp-block-search"

From 31fd43b9241b53512a548ab4f27aca7f9c2a82d2 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 2 Jun 2021 16:39:45 -0700
Subject: [PATCH 04/15] Decrease specificity for color CSS to allow themes to
 override

---
 packages/block-library/src/search/style.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 9959c4545ace4..f7a9bb42d7c2f 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -1,10 +1,8 @@
 .wp-block-search {
 
 	.wp-block-search__button {
-		background: #f7f7f7;
 		border: 1px solid #ccc;
 		padding: 0.375em 0.625em;
-		color: #32373c;
 		margin-left: 0.625em;
 		word-break: normal;
 
@@ -65,3 +63,9 @@
 	}
 }
 
+// Decreased specificity allows themes to provide colors.
+.wp-block-search__button {
+	background: #f7f7f7;
+	color: #32373c;
+}
+

From 07644cac84d759f26eff263aa1b905f3a647d6a7 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 2 Jun 2021 16:55:58 -0700
Subject: [PATCH 05/15] Remove unused variable, add doc comment for function

---
 packages/block-library/src/search/index.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 1fdc63e7aa4d4..f19afe953a968 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -181,7 +181,6 @@ function classnames_for_block_core_search( $attributes ) {
  * @return array Style HTML attribute.
  */
 function styles_for_block_core_search( $attributes ) {
-	$shared_styles  = array();
 	$wrapper_styles = array();
 	$button_styles  = array();
 	$input_styles   = array();
@@ -305,7 +304,7 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( ! empty( $attributes['textColor'] ) ) {
 		$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
-	} elseif( $has_custom_text_color ) {
+	} elseif ( $has_custom_text_color ) {
 		// If there's no 'textColor' text string but there is a custom text color style, still add the generic `has-text-color` class.
 		$classnames[] = 'has-text-color';
 	}

From 7873b26b7d0cc186168b588abc4bd1acbd9de25c Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 2 Jun 2021 17:15:29 -0700
Subject: [PATCH 06/15] Revert changes to support setting colors in theme.json

---
 packages/block-library/src/search/block.json | 3 +--
 packages/block-library/src/search/style.scss | 8 ++------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index b8af0ef627ed8..08c0cccb406dd 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -50,8 +50,7 @@
 			"radius": true,
 			"__experimentalSkipSerialization": true
 		},
-		"html": false,
-		"__experimentalSelector": ".wp-block-search__button"
+		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",
 	"style": "wp-block-search"
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index f7a9bb42d7c2f..9959c4545ace4 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -1,8 +1,10 @@
 .wp-block-search {
 
 	.wp-block-search__button {
+		background: #f7f7f7;
 		border: 1px solid #ccc;
 		padding: 0.375em 0.625em;
+		color: #32373c;
 		margin-left: 0.625em;
 		word-break: normal;
 
@@ -63,9 +65,3 @@
 	}
 }
 
-// Decreased specificity allows themes to provide colors.
-.wp-block-search__button {
-	background: #f7f7f7;
-	color: #32373c;
-}
-

From 6861cc1886023253c83155596bc12583f7941d82 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Thu, 3 Jun 2021 16:10:01 -0700
Subject: [PATCH 07/15] Use variable to clarify conditional logic for preset vs
 custom colors

---
 packages/block-library/src/search/index.php | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index f19afe953a968..1f865a9def724 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -301,20 +301,22 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	$classnames = array();
 
 	// Text color.
+	$has_preset_text_color = ! empty( $attributes['textColor'] );
 	$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
-	if ( ! empty( $attributes['textColor'] ) ) {
+	if ( $has_preset_text_color ) {
 		$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
 	} elseif ( $has_custom_text_color ) {
-		// If there's no 'textColor' text string but there is a custom text color style, still add the generic `has-text-color` class.
+		// If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
 		$classnames[] = 'has-text-color';
 	}
 
 	// Background color.
+	$has_preset_background_color = ! empty( $attributes['backgroundColor'] );
 	$has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
-	if ( ! empty( $attributes['backgroundColor'] ) ) {
+	if ( $has_preset_background_color ) {
 		$classnames[] = sprintf( 'has-background has-%s-background-color', $attributes['backgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
-		// If there's no 'backgroundColor' text string but there is a custom background color style, still add the generic `has-background` class.
+		// If a custom 'backgroundColor' was selected instead of a preset, still add the generic `has-background` class.
 		$classnames[] = 'has-background';
 	}
 

From 76fec5edef418b25414ee92507976bad8d8111e3 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Thu, 3 Jun 2021 16:30:01 -0700
Subject: [PATCH 08/15] Safely check for presence of attribute when index
 undefined

---
 packages/block-library/src/search/index.php | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 1f865a9def724..545f06587f904 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -263,6 +263,16 @@ function styles_for_block_core_search( $attributes ) {
 			$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 		} else {
 			$shared_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+
+	// Add color styles.
+	$has_colors = ! empty( $attributes['style']['color'] );
+
+	if ( $has_colors ) {
+		if ( ! empty( $attributes['style']['color']['text'] ) ) {
+			$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+		}
+		if ( ! empty( $attributes['style']['color']['background'] ) ) {
+			$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
 		}
 	}
 

From 3cafc96a5b54825f3f485530892bf806529c7970 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Mon, 7 Jun 2021 11:33:53 -0700
Subject: [PATCH 09/15] Fix bad merge appending px to border-radius
 unnecessarily

---
 packages/block-library/src/search/index.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 545f06587f904..511f1ebd6d956 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -263,6 +263,8 @@ function styles_for_block_core_search( $attributes ) {
 			$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 		} else {
 			$shared_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+		}
+	}
 
 	// Add color styles.
 	$has_colors = ! empty( $attributes['style']['color'] );

From 96976cefb7cc41f28ec7878cd0541178332e76bf Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 21 Jul 2021 11:36:35 -0700
Subject: [PATCH 10/15] Clean up button styles

---
 packages/block-library/src/search/edit.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 8026d2295ee44..f89ccf5b8dafc 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -213,13 +213,10 @@ export default function SearchEdit( {
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className
 		);
-		// const borderStyles = isButtonPositionInside
-		// 	? { borderRadius }
-		// 	: borderProps.style;
 		const buttonStyles = {
 			...colorProps.style,
 			...( isButtonPositionInside
-				? borderRadius
+				? { borderRadius }
 				: borderProps.style
 			)
 		};

From 7ad36b5d430515f1b14364a5488672f7e1488cb3 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 21 Jul 2021 12:29:57 -0700
Subject: [PATCH 11/15] Fix shared border styles after rebase

---
 packages/block-library/src/search/edit.js   |  3 +--
 packages/block-library/src/search/index.php | 11 ++++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index f89ccf5b8dafc..ba0c571197e76 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -217,8 +217,7 @@ export default function SearchEdit( {
 			...colorProps.style,
 			...( isButtonPositionInside
 				? { borderRadius }
-				: borderProps.style
-			)
+				: borderProps.style ),
 		};
 
 		return (
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 511f1ebd6d956..c25bba80d62ae 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -215,11 +215,13 @@ function styles_for_block_core_search( $attributes ) {
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
 
 					// Add shared styles for individual border radii for input & button.
-					$shared_styles[] = sprintf(
+					$border_style = sprintf(
 						'border-%s-radius: %s;',
 						esc_attr( $name ),
 						esc_attr( $value )
 					);
+					$input_styles[]  = $border_style;
+					$button_styles[] = $border_style;
 
 					// Add adjusted border radius styles for the wrapper element
 					// if button is positioned inside.
@@ -236,7 +238,9 @@ function styles_for_block_core_search( $attributes ) {
 		} else {
 			// Numeric check is for backwards compatibility purposes.
 			$border_radius   = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
-			$shared_styles[] = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
+			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
+			$input_styles[]  = $border_style;
+			$button_styles[] = $border_style;
 
 			if ( $is_button_inside && intval( $border_radius ) !== 0 ) {
 				// Adjust wrapper border radii to maintain visual consistency
@@ -262,7 +266,8 @@ function styles_for_block_core_search( $attributes ) {
 		if ( $is_button_inside ) {
 			$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 		} else {
-			$shared_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+			$button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
+			$input_styles[]  = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
 		}
 	}
 

From 7b53b63fd630db61356eb6cb431275ae728220a0 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Wed, 21 Jul 2021 12:33:52 -0700
Subject: [PATCH 12/15] Fix color on frontend for icon-only buttons

---
 packages/block-library/src/search/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 9959c4545ace4..1653acbb7a72f 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -15,6 +15,7 @@
 		svg {
 			min-width: 1.5em;
 			min-height: 1.5em;
+			fill: currentColor;
 		}
 	}
 

From ab22a295bb11f33ba7c775e467e5fc40fde4288d Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Mon, 26 Jul 2021 14:23:21 -0700
Subject: [PATCH 13/15] Add support for gradient backgrounds

---
 packages/block-library/src/search/block.json |  2 +-
 packages/block-library/src/search/index.php  | 44 +++++++++++++-------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index 08c0cccb406dd..d2b3e08e946cb 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -42,7 +42,7 @@
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"color": {
-			"gradient": true,
+			"gradients": true,
 			"__experimentalSkipSerialization": true
 		},
 		"__experimentalBorder": {
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index c25bba80d62ae..cbd8d3ad4629a 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -272,15 +272,19 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	// Add color styles.
-	$has_colors = ! empty( $attributes['style']['color'] );
+	$has_text_color = ! empty( $attributes['style']['color']['text'] );
+	if ( $has_text_color ) {
+		$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+	}
 
-	if ( $has_colors ) {
-		if ( ! empty( $attributes['style']['color']['text'] ) ) {
-			$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
-		}
-		if ( ! empty( $attributes['style']['color']['background'] ) ) {
-			$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
-		}
+	$has_background_color = ! empty( $attributes['style']['color']['background'] );
+	if ( $has_background_color ) {
+		$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
+	}
+
+	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
+	if ( $has_custom_gradient ) {
+		$button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
 	}
 
 	return array(
@@ -318,9 +322,9 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	$classnames = array();
 
 	// Text color.
-	$has_preset_text_color = ! empty( $attributes['textColor'] );
+	$has_named_text_color = ! empty( $attributes['textColor'] );
 	$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
-	if ( $has_preset_text_color ) {
+	if ( $has_named_text_color ) {
 		$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
 	} elseif ( $has_custom_text_color ) {
 		// If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
@@ -328,14 +332,24 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	}
 
 	// Background color.
-	$has_preset_background_color = ! empty( $attributes['backgroundColor'] );
+	$has_named_background_color = ! empty( $attributes['backgroundColor'] );
 	$has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
-	if ( $has_preset_background_color ) {
-		$classnames[] = sprintf( 'has-background has-%s-background-color', $attributes['backgroundColor'] );
-	} elseif ( $has_custom_background_color ) {
-		// If a custom 'backgroundColor' was selected instead of a preset, still add the generic `has-background` class.
+	$has_named_gradient = ! empty( $attributes['gradient'] );
+	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
+	if (
+		$has_named_background_color ||
+		$has_custom_background_color ||
+		$has_named_gradient ||
+		$has_custom_gradient
+	) {
 		$classnames[] = 'has-background';
 	}
+	if ( $has_named_background_color ) {
+		$classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
+	}
+	if ( $has_named_gradient ) {
+		$classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
+	}
 
 	return implode( ' ', $classnames );
 }

From 7f832dd5adbd2722608c5b3dd065eec0ac55a437 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Mon, 26 Jul 2021 14:37:01 -0700
Subject: [PATCH 14/15] Apply border color to button only when positioned
 outside

---
 packages/block-library/src/search/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index cbd8d3ad4629a..ee3238ad0edec 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -75,7 +75,7 @@ function render_block_core_search( $attributes ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
 
-		if ( $is_button_inside ) {
+		if ( ! $is_button_inside ) {
 			$button_classes .= $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {

From 14302433d82d9e9635a6a65fdcbff2992a446dcb Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Mon, 26 Jul 2021 14:49:38 -0700
Subject: [PATCH 15/15] Linting fixes

---
 packages/block-library/src/search/index.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index ee3238ad0edec..fab1c89456060 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -37,7 +37,7 @@ function render_block_core_search( $attributes ) {
 	$input_markup     = '';
 	$button_markup    = '';
 	$inline_styles    = styles_for_block_core_search( $attributes );
-	$color_classes   = get_color_classes_for_block_core_search( $attributes );
+	$color_classes    = get_color_classes_for_block_core_search( $attributes );
 	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
@@ -215,7 +215,7 @@ function styles_for_block_core_search( $attributes ) {
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
 
 					// Add shared styles for individual border radii for input & button.
-					$border_style = sprintf(
+					$border_style    = sprintf(
 						'border-%s-radius: %s;',
 						esc_attr( $name ),
 						esc_attr( $value )
@@ -322,7 +322,7 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	$classnames = array();
 
 	// Text color.
-	$has_named_text_color = ! empty( $attributes['textColor'] );
+	$has_named_text_color  = ! empty( $attributes['textColor'] );
 	$has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_named_text_color ) {
 		$classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
@@ -332,10 +332,10 @@ function get_color_classes_for_block_core_search( $attributes ) {
 	}
 
 	// Background color.
-	$has_named_background_color = ! empty( $attributes['backgroundColor'] );
+	$has_named_background_color  = ! empty( $attributes['backgroundColor'] );
 	$has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
-	$has_named_gradient = ! empty( $attributes['gradient'] );
-	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
+	$has_named_gradient          = ! empty( $attributes['gradient'] );
+	$has_custom_gradient         = ! empty( $attributes['style']['color']['gradient'] );
 	if (
 		$has_named_background_color ||
 		$has_custom_background_color ||