Use data-wp-on-async directives in core blocks when handler does not …

…need synchronous access to event (#62160)

* Use data-wp-on-async directives when handler does not need synchronous access to event

* Fix unit tests

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>

packages/block-library/src/navigation/index.php

@@ -495,15 +495,15 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$close_button_directives         = '';
 		if ( $is_interactive ) {
 			$open_button_directives                  = '
-				data-wp-on--click="actions.openMenuOnClick"
+				data-wp-on-async--click="actions.openMenuOnClick"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
 			$responsive_container_directives         = '
 				data-wp-class--has-modal-open="state.isMenuOpen"
 				data-wp-class--is-menu-open="state.isMenuOpen"
 				data-wp-watch="callbacks.initMenu"
 				data-wp-on--keydown="actions.handleMenuKeydown"
-				data-wp-on--focusout="actions.handleMenuFocusout"
+				data-wp-on-async--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives            = '
@@ -512,7 +512,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 				data-wp-bind--role="state.roleAttribute"
 			';
 			$close_button_directives                 = '
-				data-wp-on--click="actions.closeMenuOnClick"
+				data-wp-on-async--click="actions.closeMenuOnClick"
 			';
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
@@ -826,7 +826,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
-		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on-async--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
 
 		// This is a fix for Safari. Without it, Safari doesn't change the active
@@ -836,8 +836,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'tabindex', '-1' );
 
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
-			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -847,7 +847,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' );
 			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
@@ -858,7 +858,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation__submenu-container',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.

packages/block-library/src/navigation/view.js

@@ -143,7 +143,7 @@ const { state, actions } = 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,
+				// When focusout is outside the document,
 				// `window.document.activeElement` doesn't change.
 
 				// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.

packages/block-library/src/query-pagination-next/index.php

@@ -77,7 +77,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

packages/block-library/src/query-pagination-previous/index.php

@@ -63,7 +63,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

packages/block-library/src/search/index.php

@@ -191,8 +191,8 @@ function render_block_core_search( $attributes ) {
 		 data-wp-interactive="core/search"'
 		. $form_context .
 		'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
-		 data-wp-on--keydown="actions.handleSearchKeydown"
-		 data-wp-on--focusout="actions.handleSearchFocusout"
+		 data-wp-on-async--keydown="actions.handleSearchKeydown"
+		 data-wp-on-async--focusout="actions.handleSearchFocusout"
 		';
 	}
 

phpunit/blocks/render-query-test.php

@@ -94,13 +94,13 @@ public function test_rendering_query_with_enhanced_pagination() {
 		$p->next_tag( array( 'class_name' => 'wp-block-query-pagination-previous' ) );
 		$this->assertSame( 'query-pagination-previous', $p->get_attribute( 'data-wp-key' ) );
 		$this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) );
-		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--mouseenter' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) );
 		$this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) );
 
 		$p->next_tag( array( 'class_name' => 'wp-block-query-pagination-next' ) );
 		$this->assertSame( 'query-pagination-next', $p->get_attribute( 'data-wp-key' ) );
 		$this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) );
-		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--mouseenter' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) );
 		$this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) );
 
 		$router_config = wp_interactivity_config( 'core/router' );