Search: Border radius presets work correctly (#71481)

shimotmk · shimotmk · andrewserong · web-flow · commit c06bd3733f9a · 2025-09-04T13:40:06.000+10:00
* fix/search/border-radius

* lint

* Update packages/block-library/src/search/index.php

Co-authored-by: Andrew Serong &lt;14988353+andrewserong@users.noreply.github.com&gt;

* Update packages/block-library/src/search/index.php

Co-authored-by: Andrew Serong &lt;14988353+andrewserong@users.noreply.github.com&gt;

---------

Co-authored-by: Andrew Serong &lt;14988353+andrewserong@users.noreply.github.com&gt;

Co-authored-by: shimotmk &lt;shimotomoki@git.wordpress.org&gt;
Co-authored-by: andrewserong &lt;andrewserong@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -228,7 +228,17 @@ export default function SearchEdit( {
 		);
 		const textFieldStyles = {
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 			...typographyProps.style,
 			textDecoration: undefined,
@@ -269,7 +279,17 @@ export default function SearchEdit( {
 			...colorProps.style,
 			...typographyProps.style,
 			...( isButtonPositionInside
-				? { borderRadius }
+				? {
+						borderRadius: borderProps.style?.borderRadius,
+						borderTopLeftRadius:
+							borderProps.style?.borderTopLeftRadius,
+						borderTopRightRadius:
+							borderProps.style?.borderTopRightRadius,
+						borderBottomLeftRadius:
+							borderProps.style?.borderBottomLeftRadius,
+						borderBottomRightRadius:
+							borderProps.style?.borderBottomRightRadius,
+				  }
 				: borderProps.style ),
 		};
 		const handleButtonClick = () => {
@@ -495,8 +515,13 @@ export default function SearchEdit( {
 		</>
 	);
 
+	const isNonZeroBorderRadius = ( radius ) =>
+		radius !== undefined && parseInt( radius, 10 ) !== 0;
+
 	const padBorderRadius = ( radius ) =>
-		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
+		isNonZeroBorderRadius( radius )
+			? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`
+			: undefined;
 
 	const getWrapperStyles = () => {
 		const styles = isButtonPositionInside
@@ -512,10 +537,7 @@ export default function SearchEdit( {
 						borderProps.style?.borderBottomRightRadius,
 			  };
 
-		const isNonZeroBorderRadius =
-			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
-
-		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
+		if ( isButtonPositionInside ) {
 			// We have button inside wrapper and a border radius value to apply.
 			// Add default padding so we don't get "fat" corners.
 			//
@@ -524,15 +546,24 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const { topLeft, topRight, bottomLeft, bottomRight } =
-					borderRadius;
+				const {
+					borderTopLeftRadius,
+					borderTopRightRadius,
+					borderBottomLeftRadius,
+					borderBottomRightRadius,
+				} = borderProps.style;
 
 				return {
 					...styles,
-					borderTopLeftRadius: padBorderRadius( topLeft ),
-					borderTopRightRadius: padBorderRadius( topRight ),
-					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
-					borderBottomRightRadius: padBorderRadius( bottomRight ),
+					borderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),
+					borderTopRightRadius:
+						padBorderRadius( borderTopRightRadius ),
+					borderBottomLeftRadius: padBorderRadius(
+						borderBottomLeftRadius
+					),
+					borderBottomRightRadius: padBorderRadius(
+						borderBottomRightRadius
+					),
 				};
 			}
 
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -372,6 +372,13 @@ function styles_for_block_core_search( $attributes ) {
 		if ( is_array( $border_radius ) ) {
 			// Apply styles for individual corner border radii.
 			foreach ( $border_radius as $key => $value ) {
+				// Get border-radius CSS variable from preset value if provided.
+				if ( is_string( $value ) && str_contains( $value, 'var:preset|border-radius|' ) ) {
+					$index_to_splice = strrpos( $value, '|' ) + 1;
+					$slug            = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
+					$value           = "var(--wp--preset--border-radius--$slug)";
+				}
+
 				if ( null !== $value ) {
 					// Convert camelCase key to kebab-case.
 					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
@@ -387,7 +394,7 @@ function styles_for_block_core_search( $attributes ) {
 
 					// Add adjusted border radius styles for the wrapper element
 					// if button is positioned inside.
-					if ( $is_button_inside && intval( $value ) !== 0 ) {
+					if ( $is_button_inside && ( intval( $value ) !== 0 || str_contains( $value, 'var(--wp--preset--border-radius--' ) ) ) {
 						$wrapper_styles[] = sprintf(
 							'border-%s-radius: calc(%s + %s);',
 							esc_attr( $name ),
@@ -399,7 +406,14 @@ 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;
+			$border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
+			// Get border-radius CSS variable from preset value if provided.
+			if ( is_string( $border_radius ) && str_contains( $border_radius, 'var:preset|border-radius|' ) ) {
+				$index_to_splice = strrpos( $border_radius, '|' ) + 1;
+				$slug            = _wp_to_kebab_case( substr( $border_radius, $index_to_splice ) );
+				$border_radius   = "var(--wp--preset--border-radius--$slug)";
+			}
+
 			$border_style    = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
 			$input_styles[]  = $border_style;
 			$button_styles[] = $border_style;
