iAPI: Update deprecated usage of data-wp-on-async

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

@@ -250,12 +250,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// Image.
 	$processor->next_tag( 'img' );
 	$processor->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
-	$processor->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
-	$processor->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
+	$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
+	$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
-	$processor->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
+	$processor->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
 	$processor->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
 	$processor->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );
 
@@ -273,7 +273,7 @@ class="lightbox-trigger"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
-			data-wp-on-async--click="actions.showLightbox"
+			data-wp-on--click="actions.showLightbox"
 			data-wp-style--right="state.imageButtonRight"
 			data-wp-style--top="state.imageButtonTop"
 		>
@@ -324,12 +324,12 @@ class="wp-lightbox-overlay zoom"
 			data-wp-class--show-closing-animation="state.overlayOpened"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
-			data-wp-on-async--touchstart="actions.handleTouchStart"
+			data-wp-on--touchstart="actions.handleTouchStart"
 			data-wp-on--touchmove="actions.handleTouchMove"
-			data-wp-on-async--touchend="actions.handleTouchEnd"
-			data-wp-on-async--click="actions.hideLightbox"
-			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
-			data-wp-on-async-window--scroll="actions.handleScroll"
+			data-wp-on--touchend="actions.handleTouchEnd"
+			data-wp-on--click="actions.hideLightbox"
+			data-wp-on-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-window--scroll="actions.handleScroll"
 			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>

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

@@ -497,15 +497,15 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$close_button_directives         = '';
 		if ( $is_interactive ) {
 			$open_button_directives                  = '
-				data-wp-on-async--click="actions.openMenuOnClick"
+				data-wp-on--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-async--focusout="actions.handleMenuFocusout"
+				data-wp-on--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives            = '
@@ -514,7 +514,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 				data-wp-bind--role="state.roleAttribute"
 			';
 			$close_button_directives                 = '
-				data-wp-on-async--click="actions.closeMenuOnClick"
+				data-wp-on--click="actions.closeMenuOnClick"
 			';
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
@@ -830,8 +830,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-async--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -841,7 +841,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-async--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-on--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.
 		}
@@ -852,7 +852,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-async--focus', 'actions.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.

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

@@ -144,7 +144,7 @@ const { state, actions } = store(
 					}
 				}
 			} ),
-			handleMenuFocusout( event ) {
+			handleMenuFocusout: withSyncEvent( ( event ) => {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu
 				// event.target === The element losing focus
@@ -162,7 +162,7 @@ const { state, actions } = store(
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
 				}
-			},
+			} ),
 
 			openMenu( menuOpenedOn = 'click' ) {
 				const { type } = getContext();

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-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on--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

@@ -70,7 +70,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-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on--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

@@ -183,8 +183,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-async--keydown="actions.handleSearchKeydown"
-		 data-wp-on-async--focusout="actions.handleSearchFocusout"
+		 data-wp-on--keydown="actions.handleSearchKeydown"
+		 data-wp-on--focusout="actions.handleSearchFocusout"
 		';
 	}
 

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

@@ -49,15 +49,15 @@ const { actions } = store(
 				const ctx = getContext();
 				ctx.isSearchInputVisible = false;
 			},
-			handleSearchKeydown( event ) {
+			handleSearchKeydown: withSyncEvent( ( event ) => {
 				const { ref } = getElement();
 				// If Escape close the menu.
 				if ( event?.key === 'Escape' ) {
 					actions.closeSearchInput();
 					ref.querySelector( 'button' ).focus();
 				}
-			},
-			handleSearchFocusout( event ) {
+			} ),
+			handleSearchFocusout: withSyncEvent( ( event ) => {
 				const { ref } = getElement();
 				// If focus is outside search form, and in the document, close menu
 				// event.target === The element losing focus
@@ -70,7 +70,7 @@ const { actions } = store(
 				) {
 					actions.closeSearchInput();
 				}
-			},
+			} ),
 		},
 	},
 	{ lock: true }

packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/render.php

@@ -31,7 +31,7 @@
 				<a
 					data-testid="link <?php echo $label; ?>"
 					data-wp-on--click="actions.navigate"
-					data-wp-on-async--mouseenter="actions.prefetch"
+					data-wp-on--mouseenter="actions.prefetch"
 					href="<?php echo $link; ?>"
 				>
 					<?php echo $label; ?>

packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php

@@ -68,7 +68,7 @@ function () {
 			<a
 				data-testid="link <?php echo $label; ?>"
 				data-wp-on--click="actions.navigate"
-				data-wp-on-async--mouseenter="actions.prefetch"
+				data-wp-on--mouseenter="actions.prefetch"
 				href="<?php echo $link; ?>"
 			>
 				<?php echo $label; ?>
@@ -111,10 +111,10 @@ function () {
 
 	<!-- Text hidden when media=print applies. -->
 	<div class="hide-on-print" data-testid="hide-on-print">This should be visible when media is not "print".</div>
-	
+
 	<!-- Element for testing noscript styles being ignored -->
 	<div data-testid="noscript-style-test" class="noscript-style-test">This should not be affected by styles in noscript tags</div>
-	
+
 	<!-- Noscript styles that should be ignored -->
 	<noscript>
 		<style>

phpunit/blocks/render-query-test.php

@@ -124,13 +124,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-async--mouseenter' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--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-async--mouseenter' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on--mouseenter' ) );
 		$this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) );
 
 		$router_config = wp_interactivity_config( 'core/router' );