Search: Update search block to handle per corner border radii (#33023)

Update the search block to support both shorthand and longhand border radius styles supplied via block supports.

packages/block-library/src/search/edit.js

@@ -11,6 +11,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
+	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/block-editor';
 import {
@@ -73,6 +74,15 @@ export default function SearchEdit( {
 	} = attributes;
 
 	const borderRadius = style?.border?.radius;
+	const borderProps = useBorderProps( attributes );
+
+	// Check for old deprecated numerical border radius. Done as a separate
+	// check so that a borderRadius style won't overwrite the longhand
+	// per-corner styles.
+	if ( typeof borderRadius === 'number' ) {
+		borderProps.style.borderRadius = `${ borderRadius }px`;
+	}
+
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 
@@ -133,7 +143,7 @@ export default function SearchEdit( {
 		return (
 			<input
 				className="wp-block-search__input"
-				style={ { borderRadius } }
+				style={ borderProps.style }
 				aria-label={ __( 'Optional placeholder text' ) }
 				// We hide the placeholder field's placeholder when there is a value. This
 				// stops screen readers from reading the placeholder field's placeholder
@@ -156,14 +166,14 @@ export default function SearchEdit( {
 					<Button
 						icon={ search }
 						className="wp-block-search__button"
-						style={ { borderRadius } }
+						style={ borderProps.style }
 					/>
 				) }
 
 				{ ! buttonUseIcon && (
 					<RichText
 						className="wp-block-search__button"
-						style={ { borderRadius } }
+						style={ borderProps.style }
 						aria-label={ __( 'Button text' ) }
 						placeholder={ __( 'Add button text…' ) }
 						withoutInteractiveFormatting
@@ -319,13 +329,38 @@ export default function SearchEdit( {
 		</>
 	);
 
+	const padBorderRadius = ( radius ) =>
+		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
+
 	const getWrapperStyles = () => {
-		if ( 'button-inside' === buttonPosition && style?.border?.radius ) {
+		const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;
+
+		if ( 'button-inside' === buttonPosition && isNonZeroBorderRadius ) {
 			// We have button inside wrapper and a border radius value to apply.
 			// Add default padding so we don't get "fat" corners.
 			//
-			// CSS calc() is used here to support non-pixel units. The inline
-			// style using calc() will only apply if both values have units.
+			// CSS calc() is used here to support non-pixel units.
+
+			if ( typeof borderRadius === 'object' ) {
+				// Individual corner border radii present.
+				const {
+					topLeft,
+					topRight,
+					bottomLeft,
+					bottomRight,
+				} = borderRadius;
+
+				return {
+					borderTopLeftRadius: padBorderRadius( topLeft ),
+					borderTopRightRadius: padBorderRadius( topRight ),
+					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
+					borderBottomRightRadius: padBorderRadius( bottomRight ),
+				};
+			}
+
+			// The inline style using calc() will only apply if both values
+			// supplied to calc() have units. Deprecated block's may have
+			// unitless integer.
 			const radius = Number.isInteger( borderRadius )
 				? `${ borderRadius }px`
 				: borderRadius;

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

@@ -188,25 +188,51 @@ function styles_for_block_core_search( $attributes ) {
 	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
 
 	if ( $has_border_radius ) {
-		// Shared style for button and input radius values.
+		$default_padding = '4px';
 		$border_radius   = $attributes['style']['border']['radius'];
-		$border_radius   = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
-		$shared_styles[] = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
-
-		// Apply wrapper border radius if button placed inside.
-		$button_inside = ! empty( $attributes['buttonPosition'] ) &&
+		$button_inside   = ! empty( $attributes['buttonPosition'] ) &&
 			'button-inside' === $attributes['buttonPosition'];
 
-		if ( $button_inside ) {
-			// We adjust the border radius value for the outer wrapper element
-			// to make it visually consistent with the radius applied to inner
-			// elements. calc() is used to support non-pixel CSS units.
-			$default_padding  = '4px';
-			$wrapper_styles[] = sprintf(
-				'border-radius: calc(%s + %s);',
-				esc_attr( $border_radius ),
-				esc_attr( $default_padding )
-			);
+		if ( is_array( $border_radius ) ) {
+			// Apply styles for individual corner border radii.
+			foreach ( $border_radius as $key => $value ) {
+				if ( null !== $value ) {
+					// Convert camelCase key to kebab-case.
+					$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
+
+					// Add shared styles for individual border radii for input & button.
+					$shared_styles[] = sprintf(
+						'border-%s-radius: %s;',
+						esc_attr( $name ),
+						esc_attr( $value )
+					);
+
+					// Add adjusted border radius styles for the wrapper element
+					// if button is positioned inside.
+					if ( $button_inside && intval( $value ) !== 0 ) {
+						$wrapper_styles[] = sprintf(
+							'border-%s-radius: calc(%s + %s);',
+							esc_attr( $name ),
+							esc_attr( $value ),
+							$default_padding
+						);
+					}
+				}
+			}
+		} 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 ) );
+
+			if ( $button_inside && intval( $border_radius ) !== 0 ) {
+				// Adjust wrapper border radii to maintain visual consistency
+				// with inner elements when button is positioned inside.
+				$wrapper_styles[] = sprintf(
+					'border-radius: calc(%s + %s);',
+					esc_attr( $border_radius ),
+					$default_padding
+				);
+			}
 		}
 	}