Get frontend js correctly working withb the show and hide of the text…

… field.
WordPress · May 27, 2021 · d544e4b · d544e4b
1 parent 8ad0a24
commit d544e4b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js
@@ -35,7 +35,7 @@ const wpBlockSearch = ( block ) => {
 
 			if (
 				block.classList.contains(
-					'wp-search-block__searchfield-hidden'
+					'wp-block-search__searchfield-hidden'
 				)
 			) {
 				showSearchField(
@@ -44,16 +44,21 @@ const wpBlockSearch = ( block ) => {
 					attributes.width,
 					attributes.widthUnit
 				);
+				block.classList.remove( 'wp-block-search__searchfield-hidden' );
 			} else {
 				hideSearchField( wrapper, searchField, button );
+				block.classList.add( 'wp-block-search__searchfield-hidden' );
 			}
 		} );
 };
 
+// eslint-disable-next-line @wordpress/no-global-event-listener
 document.addEventListener( 'DOMContentLoaded', () => {
-	Array.from( document.getElementsByClassName( 'wp-block-search__button-behavior-expand' ) ).forEach(
-		( block ) => {
-			wpBlockSearch( block );
-		}
-	);
+	Array.from(
+		document.getElementsByClassName(
+			'wp-block-search__button-behavior-expand'
+		)
+	).forEach( ( block ) => {
+		wpBlockSearch( block );
+	} );
 } );
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -54,15 +54,13 @@ 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" %s required />',
-			$input_id,
-			esc_attr( get_search_query() ),
-			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['shared']
-		);
-	}
+	$input_markup = sprintf(
+		'<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'] ),
+		$inline_styles['shared']
+	);
 
 	if ( $show_button ) {
 		$button_internal_markup = '';
@@ -152,6 +150,7 @@ function classnames_for_block_core_search( $attributes ) {
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
 			$classnames[] = 'wp-block-search__button-only';
+			$classnames[] = 'wp-block-search__searchfield-hidden';
 
 			if ( ! empty( $attributes['buttonBehavior'] ) ) {
 				if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) {
@@ -162,10 +161,6 @@ function classnames_for_block_core_search( $attributes ) {
 					$classnames[] = 'wp-block-search__button-behavior-link';
 				}
 			}
-
-			if ( ! empty( $attributes['isSearchFieldHidden'] ) ) {
-				$classnames[] = 'wp-block-search__searchfield-hidden';
-			}
 		}
 	}
 

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -78,6 +78,7 @@
 				min-width: 0 !important;
 				padding: 0 !important;
 				border-left-width: 0 !important;
+				flex-grow: 0;
 			}
 		}
 	}

diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js
@@ -5,7 +5,7 @@ export const PC_WIDTH_DEFAULT = 50;
 export const PX_WIDTH_DEFAULT = 350;
 export const MIN_WIDTH = 220;
 export const MIN_WIDTH_UNIT = 'px';
-const SEARCHFIELD_ANIMATION_DURATION = 300;
+export const SEARCHFIELD_ANIMATION_DURATION = 300;
 
 /**
  * Returns a boolean whether passed unit is percentage