From ba51354724e82dcf5d05e9e840d8b6afcab712a3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 4 Jan 2021 13:58:12 +1000
Subject: [PATCH 1/3] CSS variable based search border radius

---
 lib/block-supports/border.php                    |  1 +
 lib/class-wp-theme-json.php                      |  4 ++++
 packages/block-editor/src/hooks/border-radius.js |  6 ++++--
 packages/block-library/src/search/block.json     |  5 ++++-
 packages/block-library/src/search/editor.scss    |  1 -
 packages/block-library/src/search/style.scss     | 13 ++++++++++++-
 packages/blocks/src/api/constants.js             |  4 ++++
 7 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php
index 085cdda187da0c..e09070a71d78ac 100644
--- a/lib/block-supports/border.php
+++ b/lib/block-supports/border.php
@@ -46,6 +46,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 		if ( isset( $block_attributes['style']['border']['radius'] ) ) {
 			$border_radius = intval( $block_attributes['style']['border']['radius'] );
 			$styles[]      = sprintf( 'border-radius: %dpx;', $border_radius );
+			$styles[]      = sprintf( '--wp--style--border--radius: %dpx;', $border_radius );
 		}
 	}
 
diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php
index 6b140156f65db8..652c6f806b8125 100644
--- a/lib/class-wp-theme-json.php
+++ b/lib/class-wp-theme-json.php
@@ -235,6 +235,10 @@ class WP_Theme_JSON {
 	 * - 'support': path to the block support in block.json.
 	 */
 	const PROPERTIES_METADATA = array(
+		'--wp--style--border--radius' => array(
+			'value'   => array( 'border', 'radius' ),
+			'support' => array( '__experimentalBorder', 'radius' ),
+		),
 		'--wp--style--color--link' => array(
 			'value'   => array( 'color', 'link' ),
 			'support' => array( 'color', 'link' ),
diff --git a/packages/block-editor/src/hooks/border-radius.js b/packages/block-editor/src/hooks/border-radius.js
index beb42e529751de..d4d101683b2565 100644
--- a/packages/block-editor/src/hooks/border-radius.js
+++ b/packages/block-editor/src/hooks/border-radius.js
@@ -36,16 +36,18 @@ export function BorderRadiusEdit( props ) {
 			...style,
 			border: {
 				...style?.border,
-				radius: newRadius,
+				radius: newRadius && `${ newRadius }px`,
 			},
 		};
 
 		setAttributes( { style: cleanEmptyObject( newStyle ) } );
 	};
 
+	const value = style?.border?.radius.replace( 'px', '' );
+
 	return (
 		<RangeControl
-			value={ style?.border?.radius }
+			value={ value && parseInt( value ) }
 			label={ __( 'Border radius' ) }
 			min={ MIN_BORDER_RADIUS_VALUE }
 			max={ MAX_BORDER_RADIUS_VALUE }
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index 534be0e97cb5fa..c2b7427c5ccc05 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -34,7 +34,10 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
-		"html": false
+		"html": false,
+		"__experimentalBorder": {
+			"radius": true
+		}
 	},
 	"editorStyle": "wp-block-search-editor",
 	"style": "wp-block-search"
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index 8f1bc15c57a6eb..63e00717f79f0a 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -9,7 +9,6 @@
 
 	.wp-block-search__button {
 		height: auto;
-		border-radius: initial;
 
 		// This needs high specificity because it otherwise inherits styles from `components-button`.
 		// stylelint-disable-line no-duplicate-selectors
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 6f47aa3761dbcb..e61d6df38a06d5 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -7,6 +7,7 @@
 		color: #32373c;
 		margin-left: 0.625em;
 		word-break: normal;
+		border-radius: var(--wp--style--border--radius);
 
 		&.has-icon {
 			line-height: 0;
@@ -23,6 +24,7 @@
 		flex: auto;
 		flex-wrap: nowrap;
 		max-width: 100%;
+		border-radius: var(--wp--style--border--radius);
 	}
 
 	.wp-block-search__label {
@@ -33,6 +35,7 @@
 		flex-grow: 1;
 		min-width: 3em;
 		border: 1px solid $gray-600;
+		border-radius: var(--wp--style--border--radius);
 	}
 
 	&.wp-block-search__button-only {
@@ -44,9 +47,14 @@
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 		padding: $grid-unit-05;
 		border: 1px solid $gray-600;
+		// Determine what the minimum inner border radius should be. No outer radius equals 0, otherwise 1px.
+		// Must be 0px so max() can actually compare values later.
+		--wp--search--min-border-radius: clamp(0px, var(--wp--style--border--radius, 0px), 1px); /* stylelint-disable-line length-zero-no-unit */
 
 		.wp-block-search__input {
-			border-radius: 0;
+			// Adjust inner radius so it is visually consistent with outer radius. i.e. no "fat" corners.
+			// Maximum out of the outer radius minus padding or the minimum radius --wp--search--min-border-radius.
+			border-radius: max(var(--wp--style--border--radius, 0) - #{$grid-unit-05}, var(--wp--search--min-border-radius, 1px));
 			border: none;
 			padding: 0 0 0 0.25em;
 
@@ -56,6 +64,9 @@
 		}
 
 		.wp-block-search__button {
+			// Adjust inner radius so it is visually consistent with outer radius. i.e. no "fat" corners.
+			// Maximum out of the outer radius minus padding or the minimum radius --wp--search--min-border-radius.
+			border-radius: max(var(--wp--style--border--radius, 0) - #{$grid-unit-05}, var(--wp--search--min-border-radius, 1px));
 			padding: 0.125em 0.5em;
 		}
 	}
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index eb95932528aee4..6e0deb3aea5035 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -13,6 +13,10 @@ export const DEPRECATED_ENTRY_KEYS = [
 ];
 
 export const __EXPERIMENTAL_STYLE_PROPERTY = {
+	'--wp--style--border--radius': {
+		value: [ 'border', 'radius' ],
+		support: [ '__experimentalBorder', 'radius' ],
+	},
 	'--wp--style--color--link': {
 		value: [ 'color', 'link' ],
 		support: [ 'color', 'link' ],

From e3078e1dfe10b0300c33f46fabd3ab21eaeb8d60 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 5 Jan 2021 21:24:32 +1000
Subject: [PATCH 2/3] Update theme.json docs for search border support

---
 docs/designers-developers/developers/themes/theme-json.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
index d46acdb4c5a097..68efa27f45786a 100644
--- a/docs/designers-developers/developers/themes/theme-json.md
+++ b/docs/designers-developers/developers/themes/theme-json.md
@@ -317,6 +317,12 @@ h4 {
 }
 ```
 
+#### Border Properties
+
+| Context | Radius |
+| --- | --- |
+| Search | Yes |
+
 #### Color Properties
 
 These are the current color properties supported by blocks:

From 7e3af47f0708a8b5d4e33098ce0aa88783eb774b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 18 Jan 2021 15:29:02 +1000
Subject: [PATCH 3/3] Add border radius CSS variable to style test

---
 packages/block-editor/src/hooks/test/style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index 62c5a97b6e211e..78265643f8ce74 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -20,6 +20,7 @@ describe( 'getInlineStyles', () => {
 				border: { radius: 10 },
 			} )
 		).toEqual( {
+			'--wp--style--border--radius': 10,
 			backgroundColor: 'black',
 			borderRadius: 10,
 			color: 'red',