diff --git a/packages/block-library/src/search/frontend.js b/packages/block-library/src/search/frontend.js
index 51decb4274b80..fe10c8f89ad68 100644
--- 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
index aeed61e9282f2..5ed564ff457ad 100644
--- 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_id,
- esc_attr( get_search_query() ),
- esc_attr( $attributes['placeholder'] ),
- $inline_styles['shared']
- );
- }
+ $input_markup = sprintf(
+ '',
+ $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
index 791113a5ebe4b..b77333d583933 100644
--- 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
index a8e3f0986b10d..e5fe26ae6f2eb 100644
--- 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