From 1101255b6797cd76c92ee26c054a6e2774b3b927 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 4 Aug 2023 09:40:27 +0200
Subject: [PATCH 01/29] Fist commit

---
 packages/block-library/src/search/index.php   | 41 +++++++++++++++----
 packages/block-library/src/search/style.scss  |  3 +-
 .../src/search/view-interactivity.js          | 29 +++++++++++++
 .../directive-class/render.php                |  5 +++
 4 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 packages/block-library/src/search/view-interactivity.js

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 670ceb0eb66c5..edc3d12cf472a 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -5,6 +5,24 @@
  * @package WordPress
  */
 
+if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
+	/**
+	 * Replaces view script for the File block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_search_update_interactive_view_script( $metadata ) {
+		if ( 'core/search' === $metadata['name'] ) {
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_search_update_interactive_view_script', 10, 1 );
+}
+
 /**
  * Dynamically renders the `core/search` block.
  *
@@ -144,6 +162,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
 				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
+				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.toggleSearch' );
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
@@ -160,13 +179,21 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
-
-	return sprintf(
-		'<form role="search" method="get" action="%s" %s>%s</form>',
-		esc_url( home_url( '/' ) ),
-		$wrapper_attributes,
-		$label . $field_markup
+	$form                 = new WP_HTML_Tag_Processor(
+		sprintf(
+			'<form role="search" method="get" action="%1s" %2s>%3s</form>',
+			esc_url( home_url( '/' ) ),
+			$wrapper_attributes,
+			$label . $field_markup
+		)
 	);
+	if ( $form->next_tag() ) {
+		$form->set_attribute( 'data-wp-interactive', true );
+		$form->set_attribute( 'data-wp-context', '{ "core": { "search": { "isSearchCollapsed": true } } }' );
+		$form->set_attribute( 'data-wp-class--wp-block-search-searchfield-hidden', 'context.core.search.isSearchCollapsed' );
+	}
+
+	return $form;
 }
 
 /**
@@ -208,7 +235,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-behavior-expand wp-block-search-searchfield-hidden';
 			}
 		}
 	}
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 1e813d9cf6f16..485a080c8fc8a 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -94,7 +94,8 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	}
 
 	// !important here to override inline styles on button only deselected view.
-	&.wp-block-search__searchfield-hidden {
+
+	&.wp-block-search-searchfield-hidden {
 		overflow: hidden;
 
 		.wp-block-search__inside-wrapper {
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
new file mode 100644
index 0000000000000..1b406f6a7961d
--- /dev/null
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { store as wpStore } from '@wordpress/interactivity';
+
+function toggleSearch( store ) {
+	store.context.core.search.isSearchCollapsed =
+		! store.context.core.search.isSearchCollapsed;
+}
+
+wpStore( {
+	actions: {
+		core: {
+			search: {
+				toggleSearch,
+			},
+		},
+	},
+} );
+
+// Listen for click events anywhere on the document so this script can be loaded asynchronously in the head.
+document.addEventListener(
+	'click',
+	() => {
+		// Get the ancestor expandable Search block of the clicked element.
+		console.log( 'state', state );
+	},
+	{ passive: true }
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
index b229418de2f67..068a5bd5e621a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -59,6 +59,11 @@ class="foo bar baz"
 		data-testid="can toggle class when class attribute is missing"
 	></div>
 
+	<div
+		data-wp-class--foo__bar="state.falseValue"
+		data-testid="can toggle class with underscores"
+	></div>
+
 	<div data-wp-context='{ "falseValue": false }'>
 		<div
 			class="foo"

From 2f84e4dd0e48a5bda28cbd87cdbfa16d0eaa3a0c Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 4 Aug 2023 14:06:31 +0200
Subject: [PATCH 02/29] Come back to default style, as we updated wp-class
 directive

---
 packages/block-library/src/search/index.php  | 4 ++--
 packages/block-library/src/search/style.scss | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index edc3d12cf472a..51d208395be6b 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -190,7 +190,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 	if ( $form->next_tag() ) {
 		$form->set_attribute( 'data-wp-interactive', true );
 		$form->set_attribute( 'data-wp-context', '{ "core": { "search": { "isSearchCollapsed": true } } }' );
-		$form->set_attribute( 'data-wp-class--wp-block-search-searchfield-hidden', 'context.core.search.isSearchCollapsed' );
+		$form->set_attribute( 'data-wp-class--wp-block-search__searchfield-hidden', 'context.core.search.isSearchCollapsed' );
 	}
 
 	return $form;
@@ -235,7 +235,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-behavior-expand wp-block-search__searchfield-hidden';
 			}
 		}
 	}
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 485a080c8fc8a..1e813d9cf6f16 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -94,8 +94,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	}
 
 	// !important here to override inline styles on button only deselected view.
-
-	&.wp-block-search-searchfield-hidden {
+	&.wp-block-search__searchfield-hidden {
 		overflow: hidden;
 
 		.wp-block-search__inside-wrapper {

From 8093bb03c23116115baa2ebdea61d00e8a685590 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 4 Aug 2023 14:11:29 +0200
Subject: [PATCH 03/29] Remove not needed test

---
 .../plugins/interactive-blocks/directive-class/render.php    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
index 068a5bd5e621a..b229418de2f67 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -59,11 +59,6 @@ class="foo bar baz"
 		data-testid="can toggle class when class attribute is missing"
 	></div>
 
-	<div
-		data-wp-class--foo__bar="state.falseValue"
-		data-testid="can toggle class with underscores"
-	></div>
-
 	<div data-wp-context='{ "falseValue": false }'>
 		<div
 			class="foo"

From 7028b5787211ddfe4d5aeae2f1f315580285ab6d Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Fri, 4 Aug 2023 18:13:28 +0200
Subject: [PATCH 04/29] Add interactions

---
 packages/block-library/src/search/index.php   |  2 +-
 .../src/search/view-interactivity.js          | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 51d208395be6b..f6ca62436fbe5 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -193,7 +193,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$form->set_attribute( 'data-wp-class--wp-block-search__searchfield-hidden', 'context.core.search.isSearchCollapsed' );
 	}
 
-	return $form;
+	return $form->get_updated_html();
 }
 
 /**
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index 1b406f6a7961d..995da91412895 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -3,9 +3,26 @@
  */
 import { store as wpStore } from '@wordpress/interactivity';
 
-function toggleSearch( store ) {
-	store.context.core.search.isSearchCollapsed =
-		! store.context.core.search.isSearchCollapsed;
+function toggleAriaLabel( element ) {
+	if ( ! ( 'toggledAriaLabel' in element.dataset ) ) {
+		throw new Error( 'Element lacks toggledAriaLabel in dataset.' );
+	}
+
+	const ariaLabel = element.dataset.toggledAriaLabel;
+	element.dataset.toggledAriaLabel = element.ariaLabel;
+	element.ariaLabel = ariaLabel;
+}
+
+function toggleSearch( { context, ref } ) {
+	if ( context.core.search.isSearchCollapsed ) {
+		context.core.search.isSearchCollapsed =
+			! context.core.search.isSearchCollapsed;
+		ref.type = 'submit';
+		ref.ariaExpanded = 'true';
+		ref.removeAttribute( 'aria-controls' );
+		toggleAriaLabel( ref );
+		// TODO: Focus on sibling input. (In Chrome seems to make it automatically)
+	}
 }
 
 wpStore( {
@@ -17,13 +34,3 @@ wpStore( {
 		},
 	},
 } );
-
-// Listen for click events anywhere on the document so this script can be loaded asynchronously in the head.
-document.addEventListener(
-	'click',
-	() => {
-		// Get the ancestor expandable Search block of the clicked element.
-		console.log( 'state', state );
-	},
-	{ passive: true }
-);

From f3567989203cc6e631dadf1b0142d9f105932be7 Mon Sep 17 00:00:00 2001
From: Michal Czaplinski <mmczaplinski@gmail.com>
Date: Wed, 9 Aug 2023 11:39:06 +0100
Subject: [PATCH 05/29] Use `wp_store` to handle ARIA label

We now use WP Store to handle ARIA labels for button functionality, doing away with hard-coding labels. The labels now adjust based on the state of the search field, providing more explicit instructions for users.

Co-authored-by: David Arenas <david.arenas@automattic.com>
---
 packages/block-library/src/search/index.php    | 18 ++++++++++++++++--
 .../src/search/view-interactivity.js           | 13 +++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index f6ca62436fbe5..a277836c43682 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -154,18 +154,32 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$button_classes[] = wp_theme_get_element_class_name( 'button' );
 		$button           = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
 
+		wp_store(
+			array(
+				'state' => array(
+					'core' => array(
+						'search' => array(
+							'ariaLabelCollapsed' => __( 'Expand search field' ),
+							'ariaLabelExpanded'  => __( 'Submit Search' ),
+						),
+					),
+				),
+			)
+		);
+
 		if ( $button->next_tag() ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
-				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
 				$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
 				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
 				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.toggleSearch' );
 			} else {
-				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
+
+			$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
+
 		}
 	}
 
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index 995da91412895..76e47c29ab13b 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -26,6 +26,19 @@ function toggleSearch( { context, ref } ) {
 }
 
 wpStore( {
+	selectors: {
+		core: {
+			search: {
+				ariaLabel: ( { state, context } ) => {
+					const { ariaLabelCollapsed, ariaLabelExpanded } =
+						state.core.search;
+					return context.core.search.isSearchCollapsed
+						? ariaLabelCollapsed
+						: ariaLabelExpanded;
+				},
+			},
+		},
+	},
 	actions: {
 		core: {
 			search: {

From 462edb03c935aac1ce8d39dbbcc8ddcd42f69c87 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 13:43:12 +0200
Subject: [PATCH 06/29] Move `FORM` directives directly to the HTML

---
 packages/block-library/src/search/index.php | 23 +++++++++++----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index a277836c43682..8cb05d317b928 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -193,21 +193,22 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
-	$form                 = new WP_HTML_Tag_Processor(
-		sprintf(
-			'<form role="search" method="get" action="%1s" %2s>%3s</form>',
+	return sprintf(
+			'<form
+				role="search"
+				method="get"
+				action="%1s"
+				%2s
+				data-wp-interactive
+				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false } } }\'
+				data-wp-class--wp-block-search__searchfield-hidden="context.core.search.isSearchInputVisible"
+			>
+				%3s
+			</form>',
 			esc_url( home_url( '/' ) ),
 			$wrapper_attributes,
 			$label . $field_markup
-		)
 	);
-	if ( $form->next_tag() ) {
-		$form->set_attribute( 'data-wp-interactive', true );
-		$form->set_attribute( 'data-wp-context', '{ "core": { "search": { "isSearchCollapsed": true } } }' );
-		$form->set_attribute( 'data-wp-class--wp-block-search__searchfield-hidden', 'context.core.search.isSearchCollapsed' );
-	}
-
-	return $form->get_updated_html();
 }
 
 /**

From 99f681b5d9c000aecbf8cc8e232d9a3d7baeea17 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 13:46:58 +0200
Subject: [PATCH 07/29] Move `aria-label` directive inside conditional

---
 packages/block-library/src/search/index.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 8cb05d317b928..8617e1adf6824 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -170,16 +170,14 @@ 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'] ) {
-				$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
+				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
 				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
 				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.toggleSearch' );
 			} else {
+				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
-
-			$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
-
 		}
 	}
 

From ff5eb0dc2747056bd4984c63a4268d0acdc95d44 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 13:47:24 +0200
Subject: [PATCH 08/29] Change context variable name

---
 packages/block-library/src/search/index.php             | 2 +-
 packages/block-library/src/search/view-interactivity.js | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 8617e1adf6824..6ef8103e72d96 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -199,7 +199,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 				%2s
 				data-wp-interactive
 				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false } } }\'
-				data-wp-class--wp-block-search__searchfield-hidden="context.core.search.isSearchInputVisible"
+				data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
 			>
 				%3s
 			</form>',
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index 76e47c29ab13b..96df43859fc86 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -32,9 +32,9 @@ wpStore( {
 				ariaLabel: ( { state, context } ) => {
 					const { ariaLabelCollapsed, ariaLabelExpanded } =
 						state.core.search;
-					return context.core.search.isSearchCollapsed
-						? ariaLabelCollapsed
-						: ariaLabelExpanded;
+					return context.core.search.isSearchInputVisible
+						? ariaLabelExpanded
+						: ariaLabelCollapsed;
 				},
 			},
 		},
@@ -43,6 +43,9 @@ wpStore( {
 		core: {
 			search: {
 				toggleSearch,
+				openSearchInput: ( { context } ) => {
+					context.core.search.isSearchInputVisible = true;
+				},
 			},
 		},
 	},

From d23428dd59d9a052dc20a4ed69b4b0aa7cf7ca28 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:01:38 +0200
Subject: [PATCH 09/29] Add search button directives

---
 packages/block-library/src/search/index.php        | 10 +++++-----
 .../block-library/src/search/view-interactivity.js | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 6ef8103e72d96..0989a973cd6a9 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -171,10 +171,10 @@ function render_block_core_search( $attributes, $content, $block ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
 				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
-				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
-				$button->set_attribute( 'aria-expanded', 'false' );
-				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
-				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.toggleSearch' );
+				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
+				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
+				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
+				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
@@ -198,7 +198,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 				action="%1s"
 				%2s
 				data-wp-interactive
-				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false } } }\'
+				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
 				data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
 			>
 				%3s
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index 96df43859fc86..d9b91e8c96692 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -36,6 +36,16 @@ wpStore( {
 						? ariaLabelExpanded
 						: ariaLabelCollapsed;
 				},
+				ariaControls: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? ''
+						: context.core.search.inputId;
+				},
+				type: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? 'submit'
+						: 'button';
+				},
 			},
 		},
 	},
@@ -44,7 +54,9 @@ wpStore( {
 			search: {
 				toggleSearch,
 				openSearchInput: ( { context } ) => {
-					context.core.search.isSearchInputVisible = true;
+					if ( ! context.core.search.isSearchInputVisible ) {
+						context.core.search.isSearchInputVisible = true;
+					}
 				},
 			},
 		},

From 80eaa0c944c742e0b7f1f04da0b438e36cf442bd Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:17:54 +0200
Subject: [PATCH 10/29] Add input directives and needed actions

---
 packages/block-library/src/search/index.php   |  6 ++--
 .../src/search/view-interactivity.js          | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 0989a973cd6a9..a51f65633d7ed 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -95,8 +95,8 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			$input->set_attribute( 'aria-hidden', 'true' );
-			$input->set_attribute( 'tabindex', '-1' );
+			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
+			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
 		}
 
 		// If the script already exists, there is no point in removing it from viewScript.
@@ -200,6 +200,8 @@ function render_block_core_search( $attributes, $content, $block ) {
 				data-wp-interactive
 				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
 				data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
+				data-wp-on--keydown="actions.core.search.handleSearchKeydown"
+				data-wp-on--focusout="actions.core.search.handleSearchFocusout"
 			>
 				%3s
 			</form>',
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index d9b91e8c96692..e435b9d878934 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -46,6 +46,11 @@ wpStore( {
 						? 'submit'
 						: 'button';
 				},
+				tabindex: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? '0'
+						: '-1';
+				},
 			},
 		},
 	},
@@ -58,6 +63,32 @@ wpStore( {
 						context.core.search.isSearchInputVisible = true;
 					}
 				},
+				closeSearchInput: ( { context } ) => {
+					if ( context.core.search.isSearchInputVisible ) {
+						context.core.search.isSearchInputVisible = false;
+					}
+				},
+				handleSearchKeydown: ( store ) => {
+					const { actions, event } = store;
+					// If Escape close the menu.
+					if ( event?.key === 'Escape' ) {
+						actions.core.search.closeSearchInput( store );
+					}
+				},
+				handleSearchFocusout: ( store ) => {
+					const { actions, event, ref } = store;
+					// If focus is outside search form, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! ref.contains( event.relatedTarget ) &&
+						event.target !== window.document.activeElement
+					) {
+						actions.core.search.closeSearchInput( store );
+					}
+				},
 			},
 		},
 	},

From afc0b70302c59951c0db847ae65265e06b08a5bb Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:24:52 +0200
Subject: [PATCH 11/29] Remove old functions

---
 .../src/search/view-interactivity.js          | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index e435b9d878934..c794aacf2d51a 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -3,28 +3,6 @@
  */
 import { store as wpStore } from '@wordpress/interactivity';
 
-function toggleAriaLabel( element ) {
-	if ( ! ( 'toggledAriaLabel' in element.dataset ) ) {
-		throw new Error( 'Element lacks toggledAriaLabel in dataset.' );
-	}
-
-	const ariaLabel = element.dataset.toggledAriaLabel;
-	element.dataset.toggledAriaLabel = element.ariaLabel;
-	element.ariaLabel = ariaLabel;
-}
-
-function toggleSearch( { context, ref } ) {
-	if ( context.core.search.isSearchCollapsed ) {
-		context.core.search.isSearchCollapsed =
-			! context.core.search.isSearchCollapsed;
-		ref.type = 'submit';
-		ref.ariaExpanded = 'true';
-		ref.removeAttribute( 'aria-controls' );
-		toggleAriaLabel( ref );
-		// TODO: Focus on sibling input. (In Chrome seems to make it automatically)
-	}
-}
-
 wpStore( {
 	selectors: {
 		core: {
@@ -57,7 +35,6 @@ wpStore( {
 	actions: {
 		core: {
 			search: {
-				toggleSearch,
 				openSearchInput: ( { context } ) => {
 					if ( ! context.core.search.isSearchInputVisible ) {
 						context.core.search.isSearchInputVisible = true;

From b75bd407bb8ae0357c3b16bee65b9ce5af61b337 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:43:00 +0200
Subject: [PATCH 12/29] Load the search directives only if using Gutenberg

---
 packages/block-library/src/search/index.php | 50 +++++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index a51f65633d7ed..850793e891175 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -95,8 +95,14 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
-			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
+				$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
+				$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			} else {
+				$input->set_attribute( 'aria-hidden', 'true' );
+				$input->set_attribute( 'tabindex', '-1' );
+			}
+			
 		}
 
 		// If the script already exists, there is no point in removing it from viewScript.
@@ -170,11 +176,19 @@ 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'] ) {
-				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
-				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
-				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
-				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
-				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
+					$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
+					$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
+					$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
+					$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
+					$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				} else {
+					$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+					$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
+					$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
+					$button->set_attribute( 'aria-expanded', 'false' );
+					$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
+				}
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
@@ -191,23 +205,31 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
+	$form_directives      = '';
+	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
+		$form_directives      = '
+			data-wp-interactive
+			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
+			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
+			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
+			data-wp-on--focusout="actions.core.search.handleSearchFocusout"
+		';
+	};
+
 	return sprintf(
 			'<form
 				role="search"
 				method="get"
 				action="%1s"
 				%2s
-				data-wp-interactive
-				data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
-				data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
-				data-wp-on--keydown="actions.core.search.handleSearchKeydown"
-				data-wp-on--focusout="actions.core.search.handleSearchFocusout"
-			>
 				%3s
+			>
+				%4s
 			</form>',
 			esc_url( home_url( '/' ) ),
 			$wrapper_attributes,
-			$label . $field_markup
+			$form_directives,
+			$label . $field_markup,
 	);
 }
 

From e9294a5745ebe5451b10e9cd572d041e83ce14b5 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:53:30 +0200
Subject: [PATCH 13/29] Change PHP formatting

---
 packages/block-library/src/search/index.php | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 850793e891175..18d95ce5f8be0 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -95,14 +95,13 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
+			if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
 				$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
 				$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
 			} else {
 				$input->set_attribute( 'aria-hidden', 'true' );
 				$input->set_attribute( 'tabindex', '-1' );
 			}
-			
 		}
 
 		// If the script already exists, there is no point in removing it from viewScript.
@@ -176,7 +175,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 ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
+				if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
 					$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
 					$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
 					$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
@@ -206,8 +205,8 @@ function render_block_core_search( $attributes, $content, $block ) {
 		array( 'class' => $classnames )
 	);
 	$form_directives      = '';
-	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) { 
-		$form_directives      = '
+	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
+		$form_directives = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
 			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
@@ -217,15 +216,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 	};
 
 	return sprintf(
-			'<form
-				role="search"
-				method="get"
-				action="%1s"
-				%2s
-				%3s
-			>
-				%4s
-			</form>',
+			'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
 			esc_url( home_url( '/' ) ),
 			$wrapper_attributes,
 			$form_directives,

From 39b163068b775d56d6c8a01ae6d4ec3fde55e69d Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 14:55:30 +0200
Subject: [PATCH 14/29] Fix PHP coding standard issues

---
 packages/block-library/src/search/index.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 18d95ce5f8be0..a3802a95592a6 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -216,11 +216,11 @@ function render_block_core_search( $attributes, $content, $block ) {
 	};
 
 	return sprintf(
-			'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
-			esc_url( home_url( '/' ) ),
-			$wrapper_attributes,
-			$form_directives,
-			$label . $field_markup,
+		'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
+		esc_url( home_url( '/' ) ),
+		$wrapper_attributes,
+		$form_directives,
+		$label . $field_markup,
 	);
 }
 

From 6d01ab8afda6c49a8fa11b528bb048f50d236158 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 15:56:07 +0200
Subject: [PATCH 15/29] Remove trailing comma

---
 packages/block-library/src/search/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index a3802a95592a6..40971343a9fdb 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -220,7 +220,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
 		$form_directives,
-		$label . $field_markup,
+		$label . $field_markup
 	);
 }
 

From 347685fa02a151a3fef49d9ce98cff2863a94347 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 16:09:57 +0200
Subject: [PATCH 16/29] Don't submit form when input is closed

---
 packages/block-library/src/search/view-interactivity.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index c794aacf2d51a..c2f3a409cf628 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -16,7 +16,7 @@ wpStore( {
 				},
 				ariaControls: ( { context } ) => {
 					return context.core.search.isSearchInputVisible
-						? ''
+						? undefined
 						: context.core.search.inputId;
 				},
 				type: ( { context } ) => {
@@ -35,9 +35,11 @@ wpStore( {
 	actions: {
 		core: {
 			search: {
-				openSearchInput: ( { context } ) => {
+				openSearchInput: ( { context, event, ref } ) => {
 					if ( ! context.core.search.isSearchInputVisible ) {
+						event.preventDefault();
 						context.core.search.isSearchInputVisible = true;
+						ref.parentElement.querySelector( 'input' ).focus();
 					}
 				},
 				closeSearchInput: ( { context } ) => {

From 00d1b4cdb2754e375d1e0566cd5c14f7d0e4ab3d Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 9 Aug 2023 16:52:46 +0200
Subject: [PATCH 17/29] Focus button when closed with ESC key

---
 packages/block-library/src/search/view-interactivity.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index c2f3a409cf628..dc643fbdf715d 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -48,10 +48,11 @@ wpStore( {
 					}
 				},
 				handleSearchKeydown: ( store ) => {
-					const { actions, event } = store;
+					const { actions, event, ref } = store;
 					// If Escape close the menu.
 					if ( event?.key === 'Escape' ) {
 						actions.core.search.closeSearchInput( store );
+						ref.querySelector( 'button' ).focus();
 					}
 				},
 				handleSearchFocusout: ( store ) => {

From ab3fe0679a0f838ab9e89bf76d19fcb64926056a Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Thu, 10 Aug 2023 16:08:54 +0200
Subject: [PATCH 18/29] Add selector in SSR

---
 packages/block-library/src/search/index.php | 50 +++++++++++++++------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 40971343a9fdb..38fa125e8203b 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -64,6 +64,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
+	$open_by_default      = 'false';
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
@@ -96,6 +97,17 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
 			if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
+				wp_store(
+					array(
+						'selectors' => array(
+							'core' => array(
+								'search' => array(
+									'tabindex' => $open_by_default === 'true' ? '0' : '-1',
+								),
+							),
+						),
+					)
+				);
 				$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
 				$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
 			} else {
@@ -159,23 +171,33 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$button_classes[] = wp_theme_get_element_class_name( 'button' );
 		$button           = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
 
-		wp_store(
-			array(
-				'state' => array(
-					'core' => array(
-						'search' => array(
-							'ariaLabelCollapsed' => __( 'Expand search field' ),
-							'ariaLabelExpanded'  => __( 'Submit Search' ),
-						),
-					),
-				),
-			)
-		);
-
 		if ( $button->next_tag() ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
 				if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
+					$aria_label_expanded  = __( 'Submit Search' );
+					$aria_label_collapsed = __( 'Expand search field' );
+					wp_store(
+						array(
+							'state' => array(
+								'core' => array(
+									'search' => array(
+										'ariaLabelCollapsed' => $aria_label_collapsed,
+										'ariaLabelExpanded'  => $aria_label_expanded,
+									),
+								),
+							),
+							'selectors' => array(
+								'core' => array(
+									'search' => array(
+										'ariaLabel'    => $open_by_default === 'true' ? $aria_label_expanded : $aria_label_collapsed,
+										'ariaControls' => $open_by_default === 'true' ? null : $input_id,
+										'type'         => $open_by_default === 'true' ? 'submit' : 'button',
+									),
+								),
+							),
+						)
+					);
 					$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
 					$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
 					$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
@@ -208,7 +230,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
 		$form_directives = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": false, "inputId": "' . $input_id . '" } } }\'
+			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default  . ', "inputId": "' . $input_id . '" } } }\'
 			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
 			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
 			data-wp-on--focusout="actions.core.search.handleSearchFocusout"

From abb18f66f92312ab5a7301eadb4d7b67a329dfa1 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Thu, 10 Aug 2023 16:13:24 +0200
Subject: [PATCH 19/29] Format PHP

---
 packages/block-library/src/search/index.php | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 38fa125e8203b..765d8eaa5dd2a 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -102,7 +102,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 						'selectors' => array(
 							'core' => array(
 								'search' => array(
-									'tabindex' => $open_by_default === 'true' ? '0' : '-1',
+									'tabindex' => 'true' === $open_by_default ? '0' : '-1',
 								),
 							),
 						),
@@ -179,7 +179,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 					$aria_label_collapsed = __( 'Expand search field' );
 					wp_store(
 						array(
-							'state' => array(
+							'state'     => array(
 								'core' => array(
 									'search' => array(
 										'ariaLabelCollapsed' => $aria_label_collapsed,
@@ -190,9 +190,9 @@ function render_block_core_search( $attributes, $content, $block ) {
 							'selectors' => array(
 								'core' => array(
 									'search' => array(
-										'ariaLabel'    => $open_by_default === 'true' ? $aria_label_expanded : $aria_label_collapsed,
-										'ariaControls' => $open_by_default === 'true' ? null : $input_id,
-										'type'         => $open_by_default === 'true' ? 'submit' : 'button',
+										'ariaLabel'    => 'true' === $open_by_default ? $aria_label_expanded : $aria_label_collapsed,
+										'ariaControls' => 'true' === $open_by_default ? null : $input_id,
+										'type'         => 'true' === $open_by_default ? 'submit' : 'button',
 									),
 								),
 							),
@@ -230,7 +230,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
 		$form_directives = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default  . ', "inputId": "' . $input_id . '" } } }\'
+			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '" } } }\'
 			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
 			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
 			data-wp-on--focusout="actions.core.search.handleSearchFocusout"

From 7d17805c3d2e1afe4c0ce8d6ba8cd3174909d820 Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Fri, 11 Aug 2023 09:55:35 +0200
Subject: [PATCH 20/29] Fix typo

Co-authored-by: Michal <mmczaplinski@gmail.com>
---
 packages/block-library/src/search/view-interactivity.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
index dc643fbdf715d..8f3fbf36b921e 100644
--- a/packages/block-library/src/search/view-interactivity.js
+++ b/packages/block-library/src/search/view-interactivity.js
@@ -60,7 +60,7 @@ wpStore( {
 					// If focus is outside search form, and in the document, close menu
 					// event.target === The element losing focus
 					// event.relatedTarget === The element receiving focus (if any)
-					// When focusout is outsite the document,
+					// When focusout is outside the document,
 					// `window.document.activeElement` doesn't change.
 					if (
 						! ref.contains( event.relatedTarget ) &&

From 262bca8dda8dbf2910c4dc9606d688230eda385e Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Wed, 16 Aug 2023 13:40:57 +0200
Subject: [PATCH 21/29] Add comment for `$open_by_default` variable

---
 packages/block-library/src/search/index.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 765d8eaa5dd2a..06012d19d4b9b 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -64,6 +64,8 @@ function render_block_core_search( $attributes, $content, $block ) {
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
+	// This variable is a constant and its value is always false at this moment.
+	// It is defined this way because some values depend on it, in case it changes in the future.
 	$open_by_default      = 'false';
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );

From ae7d05462bb648421ea1477be3a45737373b8ae9 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Mon, 4 Sep 2023 15:45:26 +0200
Subject: [PATCH 22/29] Remove extra space

---
 packages/block-library/src/search/index.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 06012d19d4b9b..eda61a09b65f5 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -66,7 +66,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 	// This variable is a constant and its value is always false at this moment.
 	// It is defined this way because some values depend on it, in case it changes in the future.
-	$open_by_default      = 'false';
+	$open_by_default = 'false';
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );

From 72426b02724c94e3540c94e0c5baa8e9b9e4d56a Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Mon, 4 Sep 2023 15:49:04 +0200
Subject: [PATCH 23/29] Rename search block function

---
 packages/block-library/src/search/index.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index eda61a09b65f5..1887da532c0ff 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -13,14 +13,14 @@
 	 *
 	 * @return array Filtered block type metadata.
 	 */
-	function gutenberg_block_core_search_update_interactive_view_script( $metadata ) {
+	function block_core_search_update_interactive_view_script( $metadata ) {
 		if ( 'core/search' === $metadata['name'] ) {
 			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
 			$metadata['supports']['interactivity'] = true;
 		}
 		return $metadata;
 	}
-	add_filter( 'block_type_metadata', 'gutenberg_block_core_search_update_interactive_view_script', 10, 1 );
+	add_filter( 'block_type_metadata', 'block_core_search_update_interactive_view_script', 10, 1 );
 }
 
 /**

From 5a605d17124862588e9464ae0f70bea8ebb13d62 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Fri, 8 Sep 2023 14:21:05 +0200
Subject: [PATCH 24/29] Add `supports.interactivity`

---
 docs/reference-guides/core-blocks.md         | 2 +-
 packages/block-library/src/search/block.json | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 1d83564fe3c17..b9f8dad79e6cf 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -759,7 +759,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), typography (fontSize, lineHeight), ~~html~~
+-	**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
 
 ## Separator
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index b2873bfa8e572..5669a9089d0e0 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -62,6 +62,7 @@
 				"text": true
 			}
 		},
+		"interactivity": true,
 		"typography": {
 			"__experimentalSkipSerialization": true,
 			"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",

From bf0938e281a5ab633123af01ba2e939d94e3db7a Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Fri, 8 Sep 2023 14:29:00 +0200
Subject: [PATCH 25/29] Remove old files and

---
 packages/block-library/src/search/index.php   | 109 +++-----
 .../src/search/view-interactivity.js          |  75 ------
 packages/block-library/src/search/view.js     | 241 ++++++------------
 3 files changed, 114 insertions(+), 311 deletions(-)
 delete mode 100644 packages/block-library/src/search/view-interactivity.js

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 1887da532c0ff..3b5c2e4b82985 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -5,24 +5,6 @@
  * @package WordPress
  */
 
-if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
-	/**
-	 * Replaces view script for the File block with version using Interactivity API.
-	 *
-	 * @param array $metadata Block metadata as read in via block.json.
-	 *
-	 * @return array Filtered block type metadata.
-	 */
-	function block_core_search_update_interactive_view_script( $metadata ) {
-		if ( 'core/search' === $metadata['name'] ) {
-			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
-			$metadata['supports']['interactivity'] = true;
-		}
-		return $metadata;
-	}
-	add_filter( 'block_type_metadata', 'block_core_search_update_interactive_view_script', 10, 1 );
-}
-
 /**
  * Dynamically renders the `core/search` block.
  *
@@ -98,24 +80,21 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
-				wp_store(
-					array(
-						'selectors' => array(
-							'core' => array(
-								'search' => array(
-									'tabindex' => 'true' === $open_by_default ? '0' : '-1',
-								),
+			wp_store(
+				array(
+					'selectors' => array(
+						'core' => array(
+							'search' => array(
+								'tabindex' => 'true' === $open_by_default ? '0' : '-1',
 							),
 						),
-					)
-				);
-				$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
-				$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
-			} else {
-				$input->set_attribute( 'aria-hidden', 'true' );
-				$input->set_attribute( 'tabindex', '-1' );
-			}
+					),
+				)
+			);
+			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
+			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			$input->set_attribute( 'aria-hidden', 'true' );
+			$input->set_attribute( 'tabindex', '-1' );
 		}
 
 		// If the script already exists, there is no point in removing it from viewScript.
@@ -176,42 +155,38 @@ 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 ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
-					$aria_label_expanded  = __( 'Submit Search' );
-					$aria_label_collapsed = __( 'Expand search field' );
-					wp_store(
-						array(
-							'state'     => array(
-								'core' => array(
-									'search' => array(
-										'ariaLabelCollapsed' => $aria_label_collapsed,
-										'ariaLabelExpanded'  => $aria_label_expanded,
-									),
+				$aria_label_expanded  = __( 'Submit Search' );
+				$aria_label_collapsed = __( 'Expand search field' );
+				wp_store(
+					array(
+						'state'     => array(
+							'core' => array(
+								'search' => array(
+									'ariaLabelCollapsed' => $aria_label_collapsed,
+									'ariaLabelExpanded'  => $aria_label_expanded,
 								),
 							),
-							'selectors' => array(
-								'core' => array(
-									'search' => array(
-										'ariaLabel'    => 'true' === $open_by_default ? $aria_label_expanded : $aria_label_collapsed,
-										'ariaControls' => 'true' === $open_by_default ? null : $input_id,
-										'type'         => 'true' === $open_by_default ? 'submit' : 'button',
-									),
+						),
+						'selectors' => array(
+							'core' => array(
+								'search' => array(
+									'ariaLabel'    => 'true' === $open_by_default ? $aria_label_expanded : $aria_label_collapsed,
+									'ariaControls' => 'true' === $open_by_default ? null : $input_id,
+									'type'         => 'true' === $open_by_default ? 'submit' : 'button',
 								),
 							),
-						)
-					);
-					$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
-					$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
-					$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
-					$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
-					$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
-				} else {
-					$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
-					$button->set_attribute( 'data-toggled-aria-label', __( 'Submit Search' ) );
-					$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
-					$button->set_attribute( 'aria-expanded', 'false' );
-					$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
-				}
+						),
+					)
+				);
+				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
+				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
+				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
+				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
+				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
+				$button->set_attribute( 'aria-expanded', 'false' );
+				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}
@@ -229,7 +204,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 		array( 'class' => $classnames )
 	);
 	$form_directives      = '';
-	if ( gutenberg_should_block_use_interactivity_api( 'core/search' ) ) {
+	if ( $is_expandable_searchfield ) {
 		$form_directives = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '" } } }\'
diff --git a/packages/block-library/src/search/view-interactivity.js b/packages/block-library/src/search/view-interactivity.js
deleted file mode 100644
index 8f3fbf36b921e..0000000000000
--- a/packages/block-library/src/search/view-interactivity.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as wpStore } from '@wordpress/interactivity';
-
-wpStore( {
-	selectors: {
-		core: {
-			search: {
-				ariaLabel: ( { state, context } ) => {
-					const { ariaLabelCollapsed, ariaLabelExpanded } =
-						state.core.search;
-					return context.core.search.isSearchInputVisible
-						? ariaLabelExpanded
-						: ariaLabelCollapsed;
-				},
-				ariaControls: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? undefined
-						: context.core.search.inputId;
-				},
-				type: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? 'submit'
-						: 'button';
-				},
-				tabindex: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? '0'
-						: '-1';
-				},
-			},
-		},
-	},
-	actions: {
-		core: {
-			search: {
-				openSearchInput: ( { context, event, ref } ) => {
-					if ( ! context.core.search.isSearchInputVisible ) {
-						event.preventDefault();
-						context.core.search.isSearchInputVisible = true;
-						ref.parentElement.querySelector( 'input' ).focus();
-					}
-				},
-				closeSearchInput: ( { context } ) => {
-					if ( context.core.search.isSearchInputVisible ) {
-						context.core.search.isSearchInputVisible = false;
-					}
-				},
-				handleSearchKeydown: ( store ) => {
-					const { actions, event, ref } = store;
-					// If Escape close the menu.
-					if ( event?.key === 'Escape' ) {
-						actions.core.search.closeSearchInput( store );
-						ref.querySelector( 'button' ).focus();
-					}
-				},
-				handleSearchFocusout: ( store ) => {
-					const { actions, event, ref } = store;
-					// If focus is outside search form, and in the document, close menu
-					// event.target === The element losing focus
-					// event.relatedTarget === The element receiving focus (if any)
-					// When focusout is outside the document,
-					// `window.document.activeElement` doesn't change.
-					if (
-						! ref.contains( event.relatedTarget ) &&
-						event.target !== window.document.activeElement
-					) {
-						actions.core.search.closeSearchInput( store );
-					}
-				},
-			},
-		},
-	},
-} );
diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js
index 5aaf1dd1ef3ad..8f3fbf36b921e 100644
--- a/packages/block-library/src/search/view.js
+++ b/packages/block-library/src/search/view.js
@@ -1,172 +1,75 @@
-/*eslint-env browser*/
-
-/** @type {?HTMLFormElement} */
-let expandedSearchBlock = null;
-
-const hiddenClass = 'wp-block-search__searchfield-hidden';
-
-/**
- * Toggles aria-label with data-toggled-aria-label.
- *
- * @param {HTMLElement} element
- */
-function toggleAriaLabel( element ) {
-	if ( ! ( 'toggledAriaLabel' in element.dataset ) ) {
-		throw new Error( 'Element lacks toggledAriaLabel in dataset.' );
-	}
-
-	const ariaLabel = element.dataset.toggledAriaLabel;
-	element.dataset.toggledAriaLabel = element.ariaLabel;
-	element.ariaLabel = ariaLabel;
-}
-
-/**
- * Gets search input.
- *
- * @param {HTMLFormElement} block Search block.
- * @return {HTMLInputElement} Search input.
- */
-function getSearchInput( block ) {
-	return block.querySelector( '.wp-block-search__input' );
-}
-
-/**
- * Gets search button.
- *
- * @param {HTMLFormElement} block Search block.
- * @return {HTMLButtonElement} Search button.
- */
-function getSearchButton( block ) {
-	return block.querySelector( '.wp-block-search__button' );
-}
-
-/**
- * Handles keydown event to collapse an expanded Search block (when pressing Escape key).
- *
- * @param {KeyboardEvent} event
- */
-function handleKeydownEvent( event ) {
-	if ( ! expandedSearchBlock ) {
-		// In case the event listener wasn't removed in time.
-		return;
-	}
-
-	if ( event.key === 'Escape' ) {
-		const block = expandedSearchBlock; // This is nullified by collapseExpandedSearchBlock().
-		collapseExpandedSearchBlock();
-		getSearchButton( block ).focus();
-	}
-}
-
-/**
- * Handles keyup event to collapse an expanded Search block (e.g. when tabbing out of expanded Search block).
- *
- * @param {KeyboardEvent} event
- */
-function handleKeyupEvent( event ) {
-	if ( ! expandedSearchBlock ) {
-		// In case the event listener wasn't removed in time.
-		return;
-	}
-
-	if ( event.target.closest( '.wp-block-search' ) !== expandedSearchBlock ) {
-		collapseExpandedSearchBlock();
-	}
-}
-
-/**
- * Expands search block.
- *
- * Inverse of what is done in collapseExpandedSearchBlock().
- *
- * @param {HTMLFormElement} block Search block.
- */
-function expandSearchBlock( block ) {
-	// Make sure only one is open at a time.
-	if ( expandedSearchBlock ) {
-		collapseExpandedSearchBlock();
-	}
-
-	const searchField = getSearchInput( block );
-	const searchButton = getSearchButton( block );
-
-	searchButton.type = 'submit';
-	searchField.ariaHidden = 'false';
-	searchField.tabIndex = 0;
-	searchButton.ariaExpanded = 'true';
-	searchButton.removeAttribute( 'aria-controls' ); // Note: Seemingly not reflected with searchButton.ariaControls.
-	toggleAriaLabel( searchButton );
-	block.classList.remove( hiddenClass );
-
-	searchField.focus(); // Note that Chrome seems to do this automatically.
-
-	// The following two must be inverse of what is done in collapseExpandedSearchBlock().
-	document.addEventListener( 'keydown', handleKeydownEvent, {
-		passive: true,
-	} );
-	document.addEventListener( 'keyup', handleKeyupEvent, {
-		passive: true,
-	} );
-
-	expandedSearchBlock = block;
-}
-
 /**
- * Collapses the expanded search block.
- *
- * Inverse of what is done in expandSearchBlock().
+ * WordPress dependencies
  */
-function collapseExpandedSearchBlock() {
-	if ( ! expandedSearchBlock ) {
-		throw new Error( 'Expected expandedSearchBlock to be defined.' );
-	}
-	const block = expandedSearchBlock;
-	const searchField = getSearchInput( block );
-	const searchButton = getSearchButton( block );
-
-	searchButton.type = 'button';
-	searchField.ariaHidden = 'true';
-	searchField.tabIndex = -1;
-	searchButton.ariaExpanded = 'false';
-	searchButton.setAttribute( 'aria-controls', searchField.id ); // Note: Seemingly not reflected with searchButton.ariaControls.
-	toggleAriaLabel( searchButton );
-	block.classList.add( hiddenClass );
-
-	// The following two must be inverse of what is done in expandSearchBlock().
-	document.removeEventListener( 'keydown', handleKeydownEvent, {
-		passive: true,
-	} );
-	document.removeEventListener( 'keyup', handleKeyupEvent, {
-		passive: true,
-	} );
-
-	expandedSearchBlock = null;
-}
-
-// Listen for click events anywhere on the document so this script can be loaded asynchronously in the head.
-document.addEventListener(
-	'click',
-	( event ) => {
-		// Get the ancestor expandable Search block of the clicked element.
-		const block = event.target.closest(
-			'.wp-block-search__button-behavior-expand'
-		);
-
-		/*
-		 * If there is already an expanded search block and either the current click was not for a Search block or it was
-		 * for another block, then collapse the currently-expanded block.
-		 */
-		if ( expandedSearchBlock && block !== expandedSearchBlock ) {
-			collapseExpandedSearchBlock();
-		}
-
-		// If the click was on or inside a collapsed Search block, expand it.
-		if (
-			block instanceof HTMLFormElement &&
-			block.classList.contains( hiddenClass )
-		) {
-			expandSearchBlock( block );
-		}
+import { store as wpStore } from '@wordpress/interactivity';
+
+wpStore( {
+	selectors: {
+		core: {
+			search: {
+				ariaLabel: ( { state, context } ) => {
+					const { ariaLabelCollapsed, ariaLabelExpanded } =
+						state.core.search;
+					return context.core.search.isSearchInputVisible
+						? ariaLabelExpanded
+						: ariaLabelCollapsed;
+				},
+				ariaControls: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? undefined
+						: context.core.search.inputId;
+				},
+				type: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? 'submit'
+						: 'button';
+				},
+				tabindex: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? '0'
+						: '-1';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			search: {
+				openSearchInput: ( { context, event, ref } ) => {
+					if ( ! context.core.search.isSearchInputVisible ) {
+						event.preventDefault();
+						context.core.search.isSearchInputVisible = true;
+						ref.parentElement.querySelector( 'input' ).focus();
+					}
+				},
+				closeSearchInput: ( { context } ) => {
+					if ( context.core.search.isSearchInputVisible ) {
+						context.core.search.isSearchInputVisible = false;
+					}
+				},
+				handleSearchKeydown: ( store ) => {
+					const { actions, event, ref } = store;
+					// If Escape close the menu.
+					if ( event?.key === 'Escape' ) {
+						actions.core.search.closeSearchInput( store );
+						ref.querySelector( 'button' ).focus();
+					}
+				},
+				handleSearchFocusout: ( store ) => {
+					const { actions, event, ref } = store;
+					// If focus is outside search form, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outside the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! ref.contains( event.relatedTarget ) &&
+						event.target !== window.document.activeElement
+					) {
+						actions.core.search.closeSearchInput( store );
+					}
+				},
+			},
+		},
 	},
-	{ passive: true }
-);
+} );

From 128ae33daaec9ceae454f1b63a01a1c32f5e8305 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Mon, 11 Sep 2023 10:55:14 +0200
Subject: [PATCH 26/29] Add comment to manual SSR for core

---
 packages/block-library/src/search/index.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 3b5c2e4b82985..4b60fd01f17c7 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -93,6 +93,7 @@ function render_block_core_search( $attributes, $content, $block ) {
 			);
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
 			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 			$input->set_attribute( 'aria-hidden', 'true' );
 			$input->set_attribute( 'tabindex', '-1' );
 		}
@@ -183,10 +184,11 @@ function render_block_core_search( $attributes, $content, $block ) {
 				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
 				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
 				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
 				$button->set_attribute( 'aria-expanded', 'false' );
-				$button->set_attribute( 'type', 'button' ); // Will be set to submit after clicking.
+				$button->set_attribute( 'type', 'button' );
 			} else {
 				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
 			}

From a7686f62e496f256a8dc08d9ef92c70f5f96e193 Mon Sep 17 00:00:00 2001
From: Mario Santos <santosguillamot@gmail.com>
Date: Mon, 11 Sep 2023 16:06:23 +0200
Subject: [PATCH 27/29] Remove wp_store

---
 packages/block-library/src/search/index.php | 40 +++------------------
 packages/block-library/src/search/view.js   |  4 +--
 2 files changed, 6 insertions(+), 38 deletions(-)

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 4b60fd01f17c7..da04a0478e306 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -80,17 +80,6 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			wp_store(
-				array(
-					'selectors' => array(
-						'core' => array(
-							'search' => array(
-								'tabindex' => 'true' === $open_by_default ? '0' : '-1',
-							),
-						),
-					),
-				)
-			);
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
 			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
 			// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
@@ -156,29 +145,6 @@ 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'] ) {
-				$aria_label_expanded  = __( 'Submit Search' );
-				$aria_label_collapsed = __( 'Expand search field' );
-				wp_store(
-					array(
-						'state'     => array(
-							'core' => array(
-								'search' => array(
-									'ariaLabelCollapsed' => $aria_label_collapsed,
-									'ariaLabelExpanded'  => $aria_label_expanded,
-								),
-							),
-						),
-						'selectors' => array(
-							'core' => array(
-								'search' => array(
-									'ariaLabel'    => 'true' === $open_by_default ? $aria_label_expanded : $aria_label_collapsed,
-									'ariaControls' => 'true' === $open_by_default ? null : $input_id,
-									'type'         => 'true' === $open_by_default ? 'submit' : 'button',
-								),
-							),
-						),
-					)
-				);
 				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
 				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
 				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
@@ -207,9 +173,11 @@ function render_block_core_search( $attributes, $content, $block ) {
 	);
 	$form_directives      = '';
 	if ( $is_expandable_searchfield ) {
-		$form_directives = '
+		$aria_label_expanded  = __( 'Submit Search' );
+		$aria_label_collapsed = __( 'Expand search field' );
+		$form_directives      = '
 			data-wp-interactive
-			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '" } } }\'
+			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" } } }\'
 			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
 			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
 			data-wp-on--focusout="actions.core.search.handleSearchFocusout"
diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js
index 8f3fbf36b921e..72f6d4efaba94 100644
--- a/packages/block-library/src/search/view.js
+++ b/packages/block-library/src/search/view.js
@@ -7,9 +7,9 @@ wpStore( {
 	selectors: {
 		core: {
 			search: {
-				ariaLabel: ( { state, context } ) => {
+				ariaLabel: ( { context } ) => {
 					const { ariaLabelCollapsed, ariaLabelExpanded } =
-						state.core.search;
+						context.core.search;
 					return context.core.search.isSearchInputVisible
 						? ariaLabelExpanded
 						: ariaLabelCollapsed;

From e498b4c5cbc698508901a5770403e634a1114b03 Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Mon, 11 Sep 2023 17:07:48 +0200
Subject: [PATCH 28/29] Use `null` instead of `undefined

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---
 packages/block-library/src/search/view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js
index 72f6d4efaba94..dc0b3689d2833 100644
--- a/packages/block-library/src/search/view.js
+++ b/packages/block-library/src/search/view.js
@@ -16,7 +16,7 @@ wpStore( {
 				},
 				ariaControls: ( { context } ) => {
 					return context.core.search.isSearchInputVisible
-						? undefined
+						? null
 						: context.core.search.inputId;
 				},
 				type: ( { context } ) => {

From f040f3b879ddb71b0c1a6c0721be697e7583e0fa Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Mon, 11 Sep 2023 17:08:16 +0200
Subject: [PATCH 29/29] Remove unnecessary conditional

Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---
 packages/block-library/src/search/view.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js
index dc0b3689d2833..d99dfc5696ccb 100644
--- a/packages/block-library/src/search/view.js
+++ b/packages/block-library/src/search/view.js
@@ -43,9 +43,7 @@ wpStore( {
 					}
 				},
 				closeSearchInput: ( { context } ) => {
-					if ( context.core.search.isSearchInputVisible ) {
-						context.core.search.isSearchInputVisible = false;
-					}
+					context.core.search.isSearchInputVisible = false;
 				},
 				handleSearchKeydown: ( store ) => {
 					const { actions, event, ref } = store;