Search Block: Remove unused buttonBehavior attribute (#53467)

* Search Block: Remove unused `buttonBehavior` attribute * Update fixture * Rebuild docs
WordPress · Jan 5, 2024 · a889ef0 · a889ef0
1 parent 6f61d8b
commit a889ef0
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 50 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -799,7 +799,7 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/search
 -	**Category:** widgets
 -	**Supports:** align (center, left, right), color (background, gradients, text), interactivity, typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** buttonBehavior, buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
+-	**Attributes:** buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
 
 ## Separator
 

diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
@@ -43,10 +43,6 @@
 			"type": "object",
 			"default": {}
 		},
-		"buttonBehavior": {
-			"type": "string",
-			"default": "expand-searchfield"
-		},
 		"isSearchFieldHidden": {
 			"type": "boolean",
 			"default": false

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -59,8 +59,6 @@ import {
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
 
-const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
-
 export default function SearchEdit( {
 	className,
 	attributes,
@@ -79,7 +77,6 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
-		buttonBehavior,
 		isSearchFieldHidden,
 		style,
 	} = attributes;
@@ -187,9 +184,6 @@ export default function SearchEdit( {
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
 				: undefined,
-			hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior
-				? 'wp-block-search__button-behavior-expand'
-				: undefined,
 			hasOnlyButton && isSearchFieldHidden
 				? 'wp-block-search__searchfield-hidden'
 				: undefined
@@ -325,7 +319,7 @@ export default function SearchEdit( {
 				: borderProps.style ),
 		};
 		const handleButtonClick = () => {
-			if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) {
+			if ( hasOnlyButton ) {
 				setAttributes( {
 					isSearchFieldHidden: ! isSearchFieldHidden,
 				} );

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -36,7 +36,6 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
 	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
-	$button_behavior     = ( ! empty( $attributes['buttonBehavior'] ) ) ? $attributes['buttonBehavior'] : 'default';
 	$button              = '';
 	$query_params_markup = '';
 	$inline_styles       = styles_for_block_core_search( $attributes );
@@ -78,7 +77,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$input->set_attribute( 'value', get_search_query() );
 		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
 
-		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
+		$is_expandable_searchfield = 'button-only' === $button_position;
 		if ( $is_expandable_searchfield ) {
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
 			$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
@@ -154,7 +153,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		if ( $button->next_tag() ) {
 			$button->add_class( implode( ' ', $button_classes ) );
-			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
+			if ( 'button-only' === $attributes['buttonPosition'] ) {
 				$button->set_attribute( 'data-wp-bind--aria-label', 'state.ariaLabel' );
 				$button->set_attribute( 'data-wp-bind--aria-controls', 'state.ariaControls' );
 				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.isSearchInputVisible' );
@@ -249,10 +248,7 @@ function classnames_for_block_core_search( $attributes ) {
 		}
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
-			$classnames[] = 'wp-block-search__button-only';
-			if ( ! empty( $attributes['buttonBehavior'] ) && 'expand-searchfield' === $attributes['buttonBehavior'] ) {
-				$classnames[] = 'wp-block-search__button-behavior-expand wp-block-search__searchfield-hidden';
-			}
+			$classnames[] = 'wp-block-search__button-only wp-block-search__searchfield-hidden';
 		}
 	}
 

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -62,35 +62,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	.wp-block-search__button[aria-expanded="true"] {
 		max-width: calc(100% - 100px);
 	}
-}
-
-// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
-:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: $grid-unit-05;
-	border: 1px solid $gray-600;
-	box-sizing: border-box;
-
-	.wp-block-search__input {
-		border-radius: 0;
-		border: none;
-		padding: 0 $grid-unit-05;
-
-		&:focus {
-			outline: none;
-		}
-	}
-
-	// For lower specificity.
-	:where(.wp-block-search__button) {
-		padding: $grid-unit-05 $grid-unit-10;
-	}
-}
-
-.wp-block-search.aligncenter .wp-block-search__inside-wrapper {
-	margin: auto;
-}
 
-.wp-block-search__button-behavior-expand {
 	.wp-block-search__inside-wrapper {
 		transition-property: width;
 		min-width: 0 !important;
@@ -123,7 +95,33 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	}
 }
 
-.wp-block[data-align="right"] .wp-block-search__button-behavior-expand {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
+
+	.wp-block-search__input {
+		border-radius: 0;
+		border: none;
+		padding: 0 $grid-unit-05;
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	// For lower specificity.
+	:where(.wp-block-search__button) {
+		padding: $grid-unit-05 $grid-unit-10;
+	}
+}
+
+.wp-block-search.aligncenter .wp-block-search__inside-wrapper {
+	margin: auto;
+}
+
+.wp-block[data-align="right"] .wp-block-search.wp-block-search__button-only {
 	.wp-block-search__inside-wrapper {
 		float: right;
 	}

diff --git a/test/integration/fixtures/blocks/core__search.json b/test/integration/fixtures/blocks/core__search.json
@@ -8,7 +8,6 @@
 			"buttonPosition": "button-outside",
 			"buttonUseIcon": false,
 			"query": {},
-			"buttonBehavior": "expand-searchfield",
 			"isSearchFieldHidden": false
 		},
 		"innerBlocks": []

diff --git a/test/integration/fixtures/blocks/core__search__custom-text.json b/test/integration/fixtures/blocks/core__search__custom-text.json
@@ -10,7 +10,6 @@
 			"buttonPosition": "button-outside",
 			"buttonUseIcon": false,
 			"query": {},
-			"buttonBehavior": "expand-searchfield",
 			"isSearchFieldHidden": false
 		},
 		"innerBlocks": []