Abstracted border color class assembly into a method

Only apply border color to the input and button elements when the button is outside. When the button is inside, we apply the border color styles to the outer wrapper. Declaring variables for button positions to avoid repetition Applying `borderProps.style` to the text field and button when the button is not inside so we can ensure that all future supports styles such as border width and style are applied to the element.
WordPress · Jul 16, 2021 · 6bf809d · 6bf809d
1 parent b80ff73
commit 6bf809d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -85,6 +85,9 @@ export default function SearchEdit( {
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
+	const isButtonPositionOutside = 'button-outside' === buttonPosition;
+	const hasNoButton = 'no-button' === buttonPosition;
+	const hasOnlyButton = 'button-only' === buttonPosition;
 
 	const units = useCustomUnits( {
 		availableUnits: [ '%', 'px' ],
@@ -98,19 +101,15 @@ export default function SearchEdit( {
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
 				: undefined,
-			'button-outside' === buttonPosition
+			isButtonPositionOutside
 				? 'wp-block-search__button-outside'
 				: undefined,
-			'no-button' === buttonPosition
-				? 'wp-block-search__no-button'
-				: undefined,
-			'button-only' === buttonPosition
-				? 'wp-block-search__button-only'
-				: undefined,
-			! buttonUseIcon && 'no-button' !== buttonPosition
+			hasNoButton ? 'wp-block-search__no-button' : undefined,
+			hasOnlyButton ? 'wp-block-search__button-only' : undefined,
+			! buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__text-button'
 				: undefined,
-			buttonUseIcon && 'no-button' !== buttonPosition
+			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
 				: undefined
 		);
@@ -166,26 +165,26 @@ export default function SearchEdit( {
 	};
 
 	const getResizableSides = () => {
-		if ( 'button-only' === buttonPosition ) {
+		if ( hasOnlyButton ) {
 			return {};
 		}
 
 		return {
-			right: align === 'right' ? false : true,
-			left: align === 'right' ? true : false,
+			right: align !== 'right',
+			left: align === 'right',
 		};
 	};
 
 	const renderTextField = () => {
+		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
 		const textFieldClasses = classnames(
 			'wp-block-search__input',
-			! isButtonPositionInside ? borderProps.className : undefined
+			isButtonPositionInside ? undefined : borderProps.className
 		);
-		// If the button is inside the wrapper, the wrapper gets the border styles, not the input control.
-		const textFieldStyles = {
-			borderRadius: ! isButtonPositionInside ? borderRadius : undefined,
-			borderColor: ! isButtonPositionInside ? borderColor : undefined,
-		};
+		const textFieldStyles = isButtonPositionInside
+			? { borderRadius }
+			: borderProps.style;
+
 		return (
 			<input
 				className={ textFieldClasses }
@@ -206,24 +205,29 @@ export default function SearchEdit( {
 	};
 
 	const renderButton = () => {
+		// 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',
-			borderProps.className
+			isButtonPositionInside ? undefined : borderProps.className
 		);
+		const buttonStyles = isButtonPositionInside
+			? { borderRadius }
+			: borderProps.style;
+
 		return (
 			<>
 				{ buttonUseIcon && (
 					<Button
 						icon={ search }
 						className={ buttonClasses }
-						style={ { borderRadius, borderColor } }
+						style={ buttonStyles }
 					/>
 				) }
 
 				{ ! buttonUseIcon && (
 					<RichText
 						className={ buttonClasses }
-						style={ { borderRadius, borderColor } }
+						style={ buttonStyles }
 						aria-label={ __( 'Button text' ) }
 						placeholder={ __( 'Add button text…' ) }
 						withoutInteractiveFormatting
@@ -256,7 +260,7 @@ export default function SearchEdit( {
 						label={ __( 'Change button position' ) }
 						controls={ buttonPositionControls }
 					/>
-					{ 'no-button' !== buttonPosition && (
+					{ ! hasNoButton && (
 						<ToolbarButton
 							title={ __( 'Use button with icon' ) }
 							icon={ buttonWithIcon }
@@ -351,7 +355,7 @@ export default function SearchEdit( {
 
 		const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;
 
-		if ( 'button-inside' === buttonPosition && isNonZeroBorderRadius ) {
+		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
 			// We have button inside wrapper and a border radius value to apply.
 			// Add default padding so we don't get "fat" corners.
 			//
@@ -434,16 +438,15 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside ||
-					'button-outside' === buttonPosition ) && (
+				{ ( isButtonPositionInside || isButtonPositionOutside ) && (
 					<>
 						{ renderTextField() }
 						{ renderButton() }
 					</>
 				) }
 
-				{ 'button-only' === buttonPosition && renderButton() }
-				{ 'no-button' === buttonPosition && renderTextField() }
+				{ hasOnlyButton && renderButton() }
+				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>
 	);

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -87,7 +87,8 @@ function render_block_core_search( $attributes ) {
 		}
 
 		$button_markup = sprintf(
-'			<button type="submit" class="wp-block-search__button %s" %s>%s</button>',			$button_classes,
+	'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
+			$button_classes,
 			$inline_styles['shared'],
 			$button_internal_markup
 		);
@@ -100,7 +101,7 @@ function render_block_core_search( $attributes ) {
 		$inline_styles['wrapper'],
 		$input_markup . $button_markup
 	);
-$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 
 	return sprintf(
 		'<form role="search" method="get" action="%s" %s>%s</form>',