From 5180961988b2a06b171aacfb39efb203699f44d9 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Thu, 25 May 2023 12:18:07 +0200
Subject: [PATCH 1/8] Set correct aria-expanded on hover

---
 lib/experimental/interactivity-api/blocks.php       |  4 +++-
 .../block-library/src/navigation/interactivity.js   | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index 3ad6d13d660fb..feef76fd94ec3 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -192,10 +192,12 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
 		)
 	) ) {
 		// Add directives to the parent `<li>`.
-		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false, "isHovering": false } } }' );
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->set_attribute( 'data-wp-on.mouseover', 'actions.core.navigation.openMenuOnHover' );
+		$w->set_attribute( 'data-wp-on.mouseout', 'actions.core.navigation.closeMenuOnHover' );
 
 		// Add directives to the toggle submenu button.
 		if ( $w->next_tag(
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index 80152762c9cd6..26a82f6591ade 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -68,7 +68,10 @@ store( {
 					}
 				},
 				closeMenu: ( { context } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+					if (
+						context.core.navigation.isMenuOpen &&
+						! context.core.navigation.isHovering
+					) {
 						context.core.navigation.isMenuOpen = false;
 						if (
 							context.core.navigation.modal.contains(
@@ -86,6 +89,14 @@ store( {
 						}
 					}
 				},
+				openMenuOnHover( { actions, context, ref } ) {
+					context.core.navigation.isHovering = true;
+					actions.core.navigation.openMenu( { context, ref } );
+				},
+				closeMenuOnHover( { actions, context } ) {
+					context.core.navigation.isHovering = false;
+					actions.core.navigation.closeMenu( { context } );
+				},
 				toggleMenu: ( { context, actions, ref } ) => {
 					if ( context.core.navigation.isMenuOpen ) {
 						actions.core.navigation.closeMenu( { context } );

From dfa4425d9213c51f0255cff5744bb6bc9fb54906 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:06:05 +0200
Subject: [PATCH 2/8] Store both `click` and `hover` in `isMenuOpen`

---
 lib/experimental/interactivity-api/blocks.php |  51 ++++---
 .../src/navigation/interactivity.js           | 137 +++++++++---------
 2 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index feef76fd94ec3..e9e1b768aa462 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -35,7 +35,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  *
  * <nav
  *   data-wp-island
- *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }'
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }'
  * >
  *   <button
  *     class="wp-block-navigation__responsive-container-open"
@@ -44,9 +44,9 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  *   >
  *   <div
  *     class="wp-block-navigation__responsive-container"
- *     data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
- *     data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
- *     data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
+ *     data-wp-class.has-modal-open="selectors.core.navigation.isMenuOpen"
+ *     data-wp-class.is-menu-open="selectors.core.navigation.isMenuOpen"
+ *     data-wp-bind.aria-hidden="!selectors.core.navigation.isMenuOpen"
  *     data-wp-effect="effects.core.navigation.initMenu"
  *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
  *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
@@ -55,7 +55,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  *     <div class="wp-block-navigation__responsive-close">
  *       <div
  *         class="wp-block-navigation__responsive-dialog"
- *         data-wp-bind.aria-modal="context.core.navigation.isMenuOpen"
+ *         data-wp-bind.aria-modal="selectors.core.navigation.isMenuOpen"
  *         data-wp-bind.role="selectors.core.navigation.roleAttribute"
  *         data-wp-effect="effects.core.navigation.focusFirstElement"
  *       >
@@ -75,12 +75,12 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  *
  * @return string Navigation block markup with the proper directives
  */
-function gutenberg_block_core_navigation_add_directives_to_markup( $block_content ) {
+function gutenberg_block_core_navigation_add_directives_to_markup( $block_content, $block, $instance ) {
 	$w = new WP_HTML_Tag_Processor( $block_content );
 	// Add directives to the `<nav>` element.
 	if ( $w->next_tag( 'nav' ) ) {
 		$w->set_attribute( 'data-wp-island', '' );
-		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }' );
 	};
 
 	// Add directives to the open menu button.
@@ -90,14 +90,14 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 			'class_name' => 'wp-block-navigation__responsive-container-open',
 		)
 	) ) {
-		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenuOnClick' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
 		$w->remove_attribute( 'data-micromodal-trigger' );
 	} else {
 		// If the open modal button not found, we handle submenus immediately.
 		$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
 
-		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block[ 'attrs' ] );
 
 		return $w->get_updated_html();
 	}
@@ -109,9 +109,9 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 			'class_name' => 'wp-block-navigation__responsive-container',
 		)
 	) ) {
-		$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
-		$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
-		$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-class.has-modal-open', 'selectors.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-class.is-menu-open', 'selectors.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.aria-hidden', '!selectors.core.navigation.isMenuOpen' );
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
 		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
@@ -135,7 +135,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 			'class_name' => 'wp-block-navigation__responsive-dialog',
 		)
 	) ) {
-		$w->set_attribute( 'data-wp-bind.aria-modal', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.aria-modal', 'selectors.core.navigation.isMenuOpen' );
 		$w->set_attribute( 'data-wp-bind.role', 'selectors.core.navigation.roleAttribute' );
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.focusFirstElement' );
 	};
@@ -152,7 +152,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 	};
 
 	// Submenus.
-	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+	gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block[ 'attrs' ] );
 
 	return $w->get_updated_html();
 };
@@ -163,7 +163,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *
  * <li
  *   class="has-child"
- *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false, "overlay": false } } }'
  *   data-wp-effect="effects.core.navigation.initMenu"
  *   data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
  *   data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
@@ -171,7 +171,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *   <button
  *     class="wp-block-navigation-submenu__toggle"
  *     data-wp-on.click="actions.core.navigation.openMenu"
- *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
+ *     data-wp-bind.aria-expanded="selectors.core.navigation.isMenuOpen"
  *   >
  *   </button>
  *   <span>Title</span>
@@ -184,7 +184,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *
  * @return void
  */
-function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
+function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) {
 	while ( $w->next_tag(
 		array(
 			'tag_name'   => 'LI',
@@ -192,12 +192,14 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
 		)
 	) ) {
 		// Add directives to the parent `<li>`.
-		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false, "isHovering": false } } }' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' );
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
-		$w->set_attribute( 'data-wp-on.mouseover', 'actions.core.navigation.openMenuOnHover' );
-		$w->set_attribute( 'data-wp-on.mouseout', 'actions.core.navigation.closeMenuOnHover' );
+		if ( ! isset( $block_attributes[ 'openSubmenusOnClick' ] ) ) {
+			$w->set_attribute( 'data-wp-on.mouseenter', 'actions.core.navigation.openMenuOnHover' );
+			$w->set_attribute( 'data-wp-on.mouseleave', 'actions.core.navigation.closeMenuOnHover' );
+		}
 
 		// Add directives to the toggle submenu button.
 		if ( $w->next_tag(
@@ -206,16 +208,17 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.toggleMenu' );
-			$w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.toggleMenuOnClick' );
+			$w->set_attribute( 'data-wp-bind.aria-expanded', 'selectors.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-bind.data-menu-opened-on', 'selectors.core.navigation.menuOpenedOn' );
 		};
 
 		// Iterate through subitems if exist.
-		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_attributes );
 	}
 };
 
-add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
+add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 3 );
 
 /**
  * Replaces view script for the File, Navigation, and Image blocks with version using Interactivity API.
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index 26a82f6591ade..05b2a02513ff9 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -17,12 +17,39 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+const openMenu = ( { context, ref }, menuOpenedOn ) => {
+	context.core.navigation.isMenuOpen[ menuOpenedOn ] = true;
+	context.core.navigation.previousFocus = ref;
+	if ( context.core.navigation.overlay ) {
+		// It adds a `has-modal-open` class to the <html> root
+		document.documentElement.classList.add( 'has-modal-open' );
+	}
+};
+
+const closeMenu = ( { context, selectors }, menuClosedOn ) => {
+	context.core.navigation.isMenuOpen[ menuClosedOn ] = false;
+	if ( ! selectors.core.navigation.isMenuOpen( { context } ) ) {
+		if (
+			context.core.navigation.modal.contains(
+				window.document.activeElement
+			)
+		) {
+			context.core.navigation.previousFocus.focus();
+		}
+		context.core.navigation.modal = null;
+		context.core.navigation.previousFocus = null;
+		if ( context.core.navigation.overlay ) {
+			document.documentElement.classList.remove( 'has-modal-open' );
+		}
+	}
+};
+
 store( {
 	effects: {
 		core: {
 			navigation: {
-				initMenu: ( { context, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+				initMenu: ( { context, selectors, ref } ) => {
+					if ( selectors.core.navigation.isMenuOpen( { context } ) ) {
 						const focusableElements =
 							ref.querySelectorAll( focusableSelectors );
 						context.core.navigation.modal = ref;
@@ -32,8 +59,8 @@ store( {
 							focusableElements[ focusableElements.length - 1 ];
 					}
 				},
-				focusFirstElement: ( { context, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
+				focusFirstElement: ( { context, selectors, ref } ) => {
+					if ( selectors.core.navigation.isMenuOpen( { context } ) ) {
 						ref.querySelector(
 							'.wp-block-navigation-item > *:first-child'
 						).focus();
@@ -45,73 +72,49 @@ store( {
 	selectors: {
 		core: {
 			navigation: {
-				roleAttribute: ( { context } ) => {
-					return context.core.navigation.overlay &&
-						context.core.navigation.isMenuOpen
+				roleAttribute: ( { context } ) =>
+					context.core.navigation.overlay &&
+					context.core.navigation.isMenuOpen
 						? 'dialog'
-						: '';
-				},
+						: '',
+				isMenuOpen: ( { context } ) =>
+					Object.values( context.core.navigation.isMenuOpen ).filter(
+						Boolean
+					).length > 0,
+				menuOpenedOn: ( { context } ) =>
+					Object.entries( context.core.navigation.isMenuOpen )
+						.filter( ( [ , value ] ) => value )
+						.map( ( [ key ] ) => key )
+						.join( ', ' ) || 'none',
 			},
 		},
 	},
 	actions: {
 		core: {
 			navigation: {
-				openMenu: ( { context, ref } ) => {
-					context.core.navigation.isMenuOpen = true;
-					context.core.navigation.previousFocus = ref;
-					if ( context.core.navigation.overlay ) {
-						// It adds a `has-modal-open` class to the <html> root
-						document.documentElement.classList.add(
-							'has-modal-open'
-						);
-					}
-				},
-				closeMenu: ( { context } ) => {
-					if (
-						context.core.navigation.isMenuOpen &&
-						! context.core.navigation.isHovering
-					) {
-						context.core.navigation.isMenuOpen = false;
-						if (
-							context.core.navigation.modal.contains(
-								window.document.activeElement
-							)
-						) {
-							context.core.navigation.previousFocus.focus();
-						}
-						context.core.navigation.modal = null;
-						context.core.navigation.previousFocus = null;
-						if ( context.core.navigation.overlay ) {
-							document.documentElement.classList.remove(
-								'has-modal-open'
-							);
-						}
-					}
+				openMenuOnHover( args ) {
+					openMenu( args, 'hover' );
 				},
-				openMenuOnHover( { actions, context, ref } ) {
-					context.core.navigation.isHovering = true;
-					actions.core.navigation.openMenu( { context, ref } );
+				closeMenuOnHover( args ) {
+					closeMenu( args, 'hover' );
 				},
-				closeMenuOnHover( { actions, context } ) {
-					context.core.navigation.isHovering = false;
-					actions.core.navigation.closeMenu( { context } );
-				},
-				toggleMenu: ( { context, actions, ref } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
-						actions.core.navigation.closeMenu( { context } );
+				toggleMenuOnClick: ( args ) => {
+					const { context } = args;
+					if ( context.core.navigation.isMenuOpen.click ) {
+						closeMenu( args, 'click' );
 					} else {
-						actions.core.navigation.openMenu( { context, ref } );
+						openMenu( args, 'click' );
 					}
 				},
-				handleMenuKeydown: ( { actions, context, event } ) => {
+				handleMenuKeydown: ( args ) => {
+					const { context, event } = args;
 					if ( context.core.navigation.isMenuOpen ) {
 						// If Escape close the menu
 						if (
 							event?.key === 'Escape' ||
 							event?.keyCode === 27
 						) {
-							actions.core.navigation.closeMenu( { context } );
+							closeMenu( args, 'click' );
 							return;
 						}
 
@@ -140,20 +143,20 @@ store( {
 						}
 					}
 				},
-				handleMenuFocusout: ( { actions, context, event } ) => {
-					if ( context.core.navigation.isMenuOpen ) {
-						// If focus is outside modal, 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 (
-							! context.core.navigation.modal.contains(
-								event.relatedTarget
-							) &&
-							event.target !== window.document.activeElement
-						) {
-							actions.core.navigation.closeMenu( { context } );
-						}
+				handleMenuFocusout: ( args ) => {
+					const { context, event } = args;
+					// If focus is outside modal, 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 (
+						context.core.navigation.isMenuOpen.click &&
+						! context.core.navigation.modal.contains(
+							event.relatedTarget
+						) &&
+						event.target !== window.document.activeElement
+					) {
+						closeMenu( args, 'click' );
 					}
 				},
 			},

From 6337b522b9bda5941c74caf1e70ffb78390af31f Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:22:24 +0200
Subject: [PATCH 3/8] Fix nav menu

---
 lib/experimental/interactivity-api/blocks.php          | 6 +++---
 packages/block-library/src/navigation/interactivity.js | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index e9e1b768aa462..6c9511cd4b84b 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -61,7 +61,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  *       >
  *         <button
  *           class="wp-block-navigation__responsive-container-close"
- *           data-wp-on.click="actions.core.navigation.closeMenu"
+ *           data-wp-on.click="actions.core.navigation.closeMenuOnclick"
  *         >
  *           <svg>
  *         <button>
@@ -147,7 +147,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 			'class_name' => 'wp-block-navigation__responsive-container-close',
 		)
 	) ) {
-		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenu' );
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenuOnClick' );
 		$w->remove_attribute( 'data-micromodal-close' );
 	};
 
@@ -170,7 +170,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  * >
  *   <button
  *     class="wp-block-navigation-submenu__toggle"
- *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-on.click="actions.core.navigation.openMenuOnClick"
  *     data-wp-bind.aria-expanded="selectors.core.navigation.isMenuOpen"
  *   >
  *   </button>
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index 05b2a02513ff9..1e03acabf73d8 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -98,6 +98,12 @@ store( {
 				closeMenuOnHover( args ) {
 					closeMenu( args, 'hover' );
 				},
+				openMenuOnClick( args ) {
+					openMenu( args, 'click' );
+				},
+				closeMenuOnClick( args ) {
+					closeMenu( args, 'click' );
+				},
 				toggleMenuOnClick: ( args ) => {
 					const { context } = args;
 					if ( context.core.navigation.isMenuOpen.click ) {

From d4fc6acf7fd9259f44e128377476a95f881ca917 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:23:22 +0200
Subject: [PATCH 4/8] Remove menuOpenedOn debugger

---
 lib/experimental/interactivity-api/blocks.php          | 1 -
 packages/block-library/src/navigation/interactivity.js | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index 6c9511cd4b84b..c46866fdf774f 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -210,7 +210,6 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a
 		) ) {
 			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.toggleMenuOnClick' );
 			$w->set_attribute( 'data-wp-bind.aria-expanded', 'selectors.core.navigation.isMenuOpen' );
-			$w->set_attribute( 'data-wp-bind.data-menu-opened-on', 'selectors.core.navigation.menuOpenedOn' );
 		};
 
 		// Iterate through subitems if exist.
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index 1e03acabf73d8..16010fe17de5a 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -81,11 +81,6 @@ store( {
 					Object.values( context.core.navigation.isMenuOpen ).filter(
 						Boolean
 					).length > 0,
-				menuOpenedOn: ( { context } ) =>
-					Object.entries( context.core.navigation.isMenuOpen )
-						.filter( ( [ , value ] ) => value )
-						.map( ( [ key ] ) => key )
-						.join( ', ' ) || 'none',
 			},
 		},
 	},

From 18134aca4acc46605eed0c2eb0be5d17d00d6323 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:29:44 +0200
Subject: [PATCH 5/8] Add comments and fix example HTML

---
 lib/experimental/interactivity-api/blocks.php          | 6 ++++--
 packages/block-library/src/navigation/interactivity.js | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index c46866fdf774f..ef17825598166 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -39,7 +39,7 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  * >
  *   <button
  *     class="wp-block-navigation__responsive-container-open"
- *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-on.click="actions.core.navigation.openMenuOnClick"
  *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
  *   >
  *   <div
@@ -167,10 +167,12 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *   data-wp-effect="effects.core.navigation.initMenu"
  *   data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
  *   data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ * 	 data-wp-on.mouseenter="actions.core.navigation.openMenuOnHover"
+ * 	 data-wp-on.mouseleave="actions.core.navigation.closeMenuOnHover"
  * >
  *   <button
  *     class="wp-block-navigation-submenu__toggle"
- *     data-wp-on.click="actions.core.navigation.openMenuOnClick"
+ *     data-wp-on.click="actions.core.navigation.toggleMenuOnClick"
  *     data-wp-bind.aria-expanded="selectors.core.navigation.isMenuOpen"
  *   >
  *   </button>
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index 16010fe17de5a..deb364d0f42b3 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -21,13 +21,14 @@ const openMenu = ( { context, ref }, menuOpenedOn ) => {
 	context.core.navigation.isMenuOpen[ menuOpenedOn ] = true;
 	context.core.navigation.previousFocus = ref;
 	if ( context.core.navigation.overlay ) {
-		// It adds a `has-modal-open` class to the <html> root
+		// Add a `has-modal-open` class to the <html> root.
 		document.documentElement.classList.add( 'has-modal-open' );
 	}
 };
 
 const closeMenu = ( { context, selectors }, menuClosedOn ) => {
 	context.core.navigation.isMenuOpen[ menuClosedOn ] = false;
+	// Check if the menu is still open or not.
 	if ( ! selectors.core.navigation.isMenuOpen( { context } ) ) {
 		if (
 			context.core.navigation.modal.contains(
@@ -78,6 +79,7 @@ store( {
 						? 'dialog'
 						: '',
 				isMenuOpen: ( { context } ) =>
+					// The menu is opened if either `click` or `hover` is true.
 					Object.values( context.core.navigation.isMenuOpen ).filter(
 						Boolean
 					).length > 0,
@@ -149,7 +151,8 @@ store( {
 					// If focus is outside modal, 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
+					// When focusout is outsite the document,
+					// `window.document.activeElement` doesn't change
 					if (
 						context.core.navigation.isMenuOpen.click &&
 						! context.core.navigation.modal.contains(

From 8b89ed7a830e00057a56fea81b567aa610bec1a8 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:44:03 +0200
Subject: [PATCH 6/8] Fix PHP lint

---
 lib/experimental/interactivity-api/blocks.php | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index ef17825598166..d02fa9682f3f0 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -72,10 +72,11 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
  * </nav>
  *
  * @param string $block_content Markup of the navigation block.
+ * @param array  $block         Block object.
  *
  * @return string Navigation block markup with the proper directives
  */
-function gutenberg_block_core_navigation_add_directives_to_markup( $block_content, $block, $instance ) {
+function gutenberg_block_core_navigation_add_directives_to_markup( $block_content, $block ) {
 	$w = new WP_HTML_Tag_Processor( $block_content );
 	// Add directives to the `<nav>` element.
 	if ( $w->next_tag( 'nav' ) ) {
@@ -97,7 +98,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 		// If the open modal button not found, we handle submenus immediately.
 		$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
 
-		gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block[ 'attrs' ] );
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block['attrs'] );
 
 		return $w->get_updated_html();
 	}
@@ -152,7 +153,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
 	};
 
 	// Submenus.
-	gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block[ 'attrs' ] );
+	gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block['attrs'] );
 
 	return $w->get_updated_html();
 };
@@ -167,8 +168,8 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *   data-wp-effect="effects.core.navigation.initMenu"
  *   data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
  *   data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
- * 	 data-wp-on.mouseenter="actions.core.navigation.openMenuOnHover"
- * 	 data-wp-on.mouseleave="actions.core.navigation.closeMenuOnHover"
+ *   data-wp-on.mouseenter="actions.core.navigation.openMenuOnHover"
+ *   data-wp-on.mouseleave="actions.core.navigation.closeMenuOnHover"
  * >
  *   <button
  *     class="wp-block-navigation-submenu__toggle"
@@ -182,7 +183,8 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
  *   </ul>
  * </li>
  *
- * @param string $w Markup of the navigation block.
+ * @param string $w                Markup of the navigation block.
+ * @param array  $block_attributes Block attributes.
  *
  * @return void
  */
@@ -198,7 +200,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
-		if ( ! isset( $block_attributes[ 'openSubmenusOnClick' ] ) ) {
+		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) ) {
 			$w->set_attribute( 'data-wp-on.mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on.mouseleave', 'actions.core.navigation.closeMenuOnHover' );
 		}
@@ -219,7 +221,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a
 	}
 };
 
-add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 3 );
+add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 2 );
 
 /**
  * Replaces view script for the File, Navigation, and Image blocks with version using Interactivity API.

From b2c51183c284432e8a05ab25bd6e5a1fa28859f7 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 11:51:49 +0200
Subject: [PATCH 7/8] Just in case openSubmenusOnClick exists but it's false

---
 lib/experimental/interactivity-api/blocks.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/experimental/interactivity-api/blocks.php b/lib/experimental/interactivity-api/blocks.php
index d02fa9682f3f0..d9a2b1b2718a8 100644
--- a/lib/experimental/interactivity-api/blocks.php
+++ b/lib/experimental/interactivity-api/blocks.php
@@ -200,7 +200,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w, $block_a
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
-		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) ) {
+		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
 			$w->set_attribute( 'data-wp-on.mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on.mouseleave', 'actions.core.navigation.closeMenuOnHover' );
 		}

From 07b41f91b3381a4e61c5f92556c3d48abf8004b8 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Tue, 30 May 2023 13:23:17 +0200
Subject: [PATCH 8/8] Switch to isMenuOpen selector in roleAttribute

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

diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
index deb364d0f42b3..dfc9cb0f9c4a5 100644
--- a/packages/block-library/src/navigation/interactivity.js
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -73,9 +73,9 @@ store( {
 	selectors: {
 		core: {
 			navigation: {
-				roleAttribute: ( { context } ) =>
+				roleAttribute: ( { context, selectors } ) =>
 					context.core.navigation.overlay &&
-					context.core.navigation.isMenuOpen
+					selectors.core.navigation.isMenuOpen( { context } )
 						? 'dialog'
 						: '',
 				isMenuOpen: ( { context } ) =>