From e0b3aa1a911f90cef6efbc3552a19d21f45680b6 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 6 Jun 2024 07:55:32 -0700 Subject: [PATCH] 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 Co-authored-by: cbravobernal --- packages/block-library/src/navigation/index.php | 16 ++++++++-------- packages/block-library/src/navigation/view.js | 2 +- .../src/query-pagination-next/index.php | 2 +- .../src/query-pagination-previous/index.php | 2 +- packages/block-library/src/search/index.php | 4 ++-- phpunit/blocks/render-query-test.php | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 940277d47a2af..f814e19a13cd3 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -495,7 +495,7 @@ 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 = ' @@ -503,7 +503,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo 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. diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 14d09e061848e..9da7ab70d84f3 100644 --- a/packages/block-library/src/navigation/view.js +++ b/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. diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php index d574f94093846..3b5be47fbed37 100644 --- a/packages/block-library/src/query-pagination-next/index.php +++ b/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(); } diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php index 95ed54075a7c5..1592f0a10cbff 100644 --- a/packages/block-library/src/query-pagination-previous/index.php +++ b/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(); } diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 9d4c61f416312..39b8591c86600 100644 --- a/packages/block-library/src/search/index.php +++ b/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" '; } diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php index a68bd2c7adcba..7fe39f390b2e6 100644 --- a/phpunit/blocks/render-query-test.php +++ b/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' );