Search Block: Add border radius support using skip serialization feat…

…ure (#30227) * Add border radius support to the search block
WordPress · Apr 7, 2021 · f36f3db · f36f3db
1 parent 564a6c0
commit f36f3db
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 11 deletions.
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
@@ -34,6 +34,10 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true
+		},
 		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -48,6 +48,10 @@ import {
 	MIN_WIDTH_UNIT,
 } from './utils.js';
 
+// Used to calculate border radius adjustment to avoid "fat" corners when
+// button is placed inside wrapper.
+const DEFAULT_INNER_PADDING = 4;
+
 export default function SearchEdit( {
 	className,
 	attributes,
@@ -65,8 +69,10 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		style,
 	} = attributes;
 
+	const borderRadius = style?.border?.radius;
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 
@@ -122,6 +128,7 @@ export default function SearchEdit( {
 		return (
 			<input
 				className="wp-block-search__input"
+				style={ { borderRadius } }
 				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
@@ -144,12 +151,14 @@ export default function SearchEdit( {
 					<Button
 						icon={ search }
 						className="wp-block-search__button"
+						style={ { borderRadius } }
 					/>
 				) }
 
 				{ ! buttonUseIcon && (
 					<RichText
 						className="wp-block-search__button"
+						style={ { borderRadius } }
 						aria-label={ __( 'Button text' ) }
 						placeholder={ __( 'Add button text…' ) }
 						withoutInteractiveFormatting
@@ -303,6 +312,19 @@ export default function SearchEdit( {
 		</>
 	);
 
+	const getWrapperStyles = () => {
+		if ( 'button-inside' === buttonPosition && style?.border?.radius ) {
+			// We have button inside wrapper and a border radius value to apply.
+			// Add default padding so we don't get "fat" corners.
+			const outerRadius =
+				parseInt( style?.border?.radius, 10 ) + DEFAULT_INNER_PADDING;
+
+			return { borderRadius: `${ outerRadius }px` };
+		}
+
+		return undefined;
+	};
+
 	const blockProps = useBlockProps( {
 		className: getBlockClassNames(),
 	} );
@@ -327,6 +349,7 @@ export default function SearchEdit( {
 					width: `${ width }${ widthUnit }`,
 				} }
 				className="wp-block-search__inside-wrapper"
+				style={ getWrapperStyles() }
 				minWidth={ MIN_WIDTH }
 				enable={ getResizableSides() }
 				onResizeStart={ ( event, direction, elt ) => {

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -36,7 +36,7 @@ function render_block_core_search( $attributes ) {
 	$label_markup    = '';
 	$input_markup    = '';
 	$button_markup   = '';
-	$width_styles    = '';
+	$inline_styles   = styles_for_block_core_search( $attributes );
 
 	if ( $show_label ) {
 		if ( ! empty( $attributes['label'] ) ) {
@@ -56,10 +56,11 @@ function render_block_core_search( $attributes ) {
 
 	if ( $show_input ) {
 		$input_markup = sprintf(
-			'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" required />',
+			'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
 			$input_id,
 			esc_attr( get_search_query() ),
-			esc_attr( $attributes['placeholder'] )
+			esc_attr( $attributes['placeholder'] ),
+			$inline_styles['shared']
 		);
 	}
 
@@ -80,20 +81,16 @@ function render_block_core_search( $attributes ) {
 		}
 
 		$button_markup = sprintf(
-			'<button type="submit" class="wp-block-search__button ' . $button_classes . '">%s</button>',
+			'<button type="submit" class="wp-block-search__button %s"%s>%s</button>',
+			$button_classes,
+			$inline_styles['shared'],
 			$button_internal_markup
 		);
 	}
 
-	if ( ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ) ) {
-		if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) {
-			$width_styles = ' style="width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"';
-		}
-	}
-
 	$field_markup       = sprintf(
 		'<div class="wp-block-search__inside-wrapper"%s>%s</div>',
-		$width_styles,
+		$inline_styles['wrapper'],
 		$input_markup . $button_markup
 	);
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
@@ -159,3 +156,58 @@ function classnames_for_block_core_search( $attributes ) {
 
 	return implode( ' ', $classnames );
 }
+
+/**
+ * Builds an array of inline styles for the search block.
+ *
+ * The result will contain one entry for shared styles such as those for the
+ * inner input or button and a second for the inner wrapper should the block
+ * be positioning the button "inside".
+ *
+ * @param  array $attributes The block attributes.
+ *
+ * @return array Style HTML attribute.
+ */
+function styles_for_block_core_search( $attributes ) {
+	$shared_styles  = array();
+	$wrapper_styles = array();
+
+	// Add width styles.
+	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
+	$button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
+
+	if ( $has_width && ! $button_only ) {
+		$wrapper_styles[] = sprintf(
+			'width: %d%s;',
+			esc_attr( $attributes['width'] ),
+			esc_attr( $attributes['widthUnit'] )
+		);
+	}
+
+	// Add border radius styles.
+	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
+
+	if ( $has_border_radius ) {
+		// Shared style for button and input radius values.
+		$border_radius   = $attributes['style']['border']['radius'];
+		$shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) );
+
+		// Apply wrapper border radius if button placed inside.
+		$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.
+			$default_padding  = 4;
+			$adjusted_radius  = $border_radius + $default_padding;
+			$wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) );
+		}
+	}
+
+	return array(
+		'shared'  => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
+		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
+	);
+}