Interactivity API: migration to the new store() API

lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php

@@ -429,25 +429,25 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$close_button_directives         = '';
 		if ( $should_load_view_script ) {
 			$open_button_directives          = '
-				data-wp-on--click="actions.core.navigation.openMenuOnClick"
-				data-wp-on--keydown="actions.core.navigation.handleMenuKeydown"
+				data-wp-on--click="actions.openMenuOnClick"
+				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
 			$responsive_container_directives = '
-				data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen"
-				data-wp-class--is-menu-open="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"
+				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"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives    = '
-				data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
-				data-wp-bind--aria-label="selectors.core.navigation.ariaLabel"
-				data-wp-bind--role="selectors.core.navigation.roleAttribute"
-				data-wp-effect="effects.core.navigation.focusFirstElement"
+				data-wp-bind--aria-modal="state.ariaModal"
+				data-wp-bind--aria-label="state.ariaLabel"
+				data-wp-bind--role="state.roleAttribute"
+				data-wp-watch="callbacks.focusFirstElement"
 			';
 			$close_button_directives         = '
-				data-wp-on--click="actions.core.navigation.closeMenuOnClick"
+				data-wp-on--click="actions.closeMenuOnClick"
 			';
 		}
 
@@ -521,19 +521,15 @@ private static function get_nav_element_directives( $should_load_view_script ) {
 		// When adding to this array be mindful of security concerns.
 		$nav_element_context = wp_json_encode(
 			array(
-				'core' => array(
-					'navigation' => array(
-						'overlayOpenedBy' => array(),
-						'type'            => 'overlay',
-						'roleAttribute'   => '',
-						'ariaLabel'       => __( 'Menu' ),
-					),
-				),
+				'overlayOpenedBy' => array(),
+				'type'            => 'overlay',
+				'roleAttribute'   => '',
+				'ariaLabel'       => __( 'Menu' ),
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 		);
 		return '
-			data-wp-interactive
+			data-wp-interactive=\'{"namespace":"core/navigation"}\'
 			data-wp-context=\'' . $nav_element_context . '\'
 		';
 	}

lib/experimental/interactivity-api/class-wp-interactivity-store.php

@@ -62,7 +62,7 @@ public static function render() {
 			return;
 		}
 		echo sprintf(
-			'<script id="wp-interactivity-store-data" type="application/json">%s</script>',
+			'<script id="wp-interactivity-initial-state" type="application/json">%s</script>',
 			wp_json_encode( self::$store, JSON_HEX_TAG | JSON_HEX_AMP )
 		);
 	}

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

@@ -57,9 +57,9 @@ static function ( $matches ) {
 	if ( $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'data-wp-interactive', '' );
+		$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
 		$processor->set_attribute( 'hidden', true );
 		return $processor->get_updated_html();
 	}

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

@@ -5,14 +5,12 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs as hasPdfPreview } from './utils';
+import { browserSupportsPdfs } from './utils';
 
-store( {
-	selectors: {
-		core: {
-			file: {
-				hasPdfPreview,
-			},
+store( 'core/file', {
+	state: {
+		get hasPdfPreview() {
+			return browserSupportsPdfs();
 		},
 	},
 } );

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

@@ -187,27 +187,23 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$w = new WP_HTML_Tag_Processor( $block_content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
-	$w->set_attribute( 'data-wp-interactive', true );
+	$w->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
 
 	$w->set_attribute(
 		'data-wp-context',
 		sprintf(
-			'{ "core":
-				{ "image":
-					{   "imageLoaded": false,
-						"initialized": false,
-						"lightboxEnabled": false,
-						"hideAnimationEnabled": false,
-						"preloadInitialized": false,
-						"lightboxAnimation": "%s",
-						"imageUploadedSrc": "%s",
-						"imageCurrentSrc": "",
-						"targetWidth": "%s",
-						"targetHeight": "%s",
-						"scaleAttr": "%s",
-						"dialogLabel": "%s"
-					}
-				}
+			'{  "imageLoaded": false,
+				"initialized": false,
+				"lightboxEnabled": false,
+				"hideAnimationEnabled": false,
+				"preloadInitialized": false,
+				"lightboxAnimation": "%s",
+				"imageUploadedSrc": "%s",
+				"imageCurrentSrc": "",
+				"targetWidth": "%s",
+				"targetHeight": "%s",
+				"scaleAttr": "%s",
+				"dialogLabel": "%s"
 			}',
 			$lightbox_animation,
 			$img_uploaded_src,
@@ -218,14 +214,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		)
 	);
 	$w->next_tag( 'img' );
-	$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
-	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
-	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	$w->set_attribute( 'data-wp-init', 'callbacks.initOriginImage' );
+	$w->set_attribute( 'data-wp-on--load', 'actions.handleLoad' );
+	$w->set_attribute( 'data-wp-watch', 'callbacks.setButtonStyles' );
 	// We need to set an event callback on the `img` specifically
 	// because the `figure` element can also contain a caption, and
 	// we don't want to trigger the lightbox when the caption is clicked.
-	$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
-	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
+	$w->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+	$w->set_attribute( 'data-wp-watch--setStylesOnResize', 'callbacks.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
 	// Add a button alongside image in the body content.
@@ -239,9 +235,9 @@ class="lightbox-trigger"
 			type="button"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
-			data-wp-on--click="actions.core.image.showLightbox"
-			data-wp-style--right="context.core.image.imageButtonRight"
-			data-wp-style--top="context.core.image.imageButtonTop"
+			data-wp-on--click="actions.showLightbox"
+			data-wp-style--right="context.imageButtonRight"
+			data-wp-style--top="context.imageButtonTop"
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
 				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
@@ -267,8 +263,8 @@ class="lightbox-trigger"
 	// use the exact same image as in the content when the lightbox is first opened while
 	// we wait for the larger image to load.
 	$m->set_attribute( 'src', '' );
-	$m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
-	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+	$m->set_attribute( 'data-wp-bind--src', 'context.imageCurrentSrc' );
+	$m->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
 	$q = new WP_HTML_Tag_Processor( $block_content );
@@ -283,8 +279,8 @@ class="lightbox-trigger"
 	// and Chrome (see https://github.com/WordPress/gutenberg/pull/52765#issuecomment-1674008151). Until that
 	// is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
 	$q->set_attribute( 'src', '' );
-	$q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
-	$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+	$q->set_attribute( 'data-wp-bind--src', 'state.enlargedImgSrc' );
+	$q->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
 	$enlarged_image_content = $q->get_updated_html();
 
 	// If the current theme does NOT have a `theme.json`, or the colors are not defined,
@@ -307,21 +303,21 @@ class="lightbox-trigger"
 
 	$lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
-            data-wp-bind--role="selectors.core.image.roleAttribute"
-            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
-            data-wp-class--initialized="context.core.image.initialized"
-            data-wp-class--active="context.core.image.lightboxEnabled"
-            data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
-            data-wp-bind--aria-modal="selectors.core.image.ariaModal"
-            data-wp-effect="effects.core.image.initLightbox"
-            data-wp-on--keydown="actions.core.image.handleKeydown"
-            data-wp-on--touchstart="actions.core.image.handleTouchStart"
-            data-wp-on--touchmove="actions.core.image.handleTouchMove"
-            data-wp-on--touchend="actions.core.image.handleTouchEnd"
-            data-wp-on--click="actions.core.image.hideLightbox"
+            data-wp-bind--role="state.roleAttribute"
+            data-wp-bind--aria-label="state.dialogLabel"
+            data-wp-class--initialized="context.initialized"
+            data-wp-class--active="context.lightboxEnabled"
+            data-wp-class--hideAnimationEnabled="context.hideAnimationEnabled"
+            data-wp-bind--aria-modal="state.ariaModal"
+            data-wp-watch="callbacks.initLightbox"
+            data-wp-on--keydown="actions.handleKeydown"
+            data-wp-on--touchstart="actions.handleTouchStart"
+            data-wp-on--touchmove="actions.handleTouchMove"
+            data-wp-on--touchend="actions.handleTouchEnd"
+            data-wp-on--click="actions.hideLightbox"
             tabindex="-1"
             >
-                <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
+                <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.hideLightbox">
                     $close_button_icon
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>