@wordpress/e2e-tests 7.23.0 → 7.25.0

package/plugins/interactive-blocks/directive-text/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "directive-text-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/directive-text/render.php

@@ -4,8 +4,6 @@
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'directive-text-view' );
 ?>
 
 <div data-wp-interactive="directive-context">

package/plugins/interactive-blocks/directive-text/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/directive-watch/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "directive-watch-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/directive-watch/render.php

@@ -4,8 +4,6 @@
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'directive-watch-view' );
 ?>
 
 <div data-wp-interactive="directive-watch">

package/plugins/interactive-blocks/directive-watch/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/generator-scope/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/generator-scope",
+	"title": "E2E Interactivity tests - generator scope",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/generator-scope/render.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * HTML for testing scope restoration with generators.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="test/generator-scope"
+	<?php echo wp_interactivity_data_wp_context( array( 'result' => '' ) ); ?>
+>
+	<input readonly data-wp-bind--value="context.result" data-testid="result" />
+	<button type="button" data-wp-on--click="callbacks.resolve" data-testid="resolve">Async resolve</button>
+	<button type="button" data-wp-on--click="callbacks.reject" data-testid="reject">Async reject</button>
+</div>

package/plugins/interactive-blocks/generator-scope/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/generator-scope/view.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'test/generator-scope', {
+	callbacks: {
+		*resolve() {
+			try {
+				getContext().result = yield Promise.resolve( 'ok' );
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+		*reject() {
+			try {
+				getContext().result = yield Promise.reject( new Error( '😘' ) );
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+	},
+} );

package/plugins/interactive-blocks/negation-operator/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "negation-operator-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/negation-operator/render.php

@@ -4,8 +4,6 @@
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'negation-operator-view' );
 ?>
 
 <div data-wp-interactive="negation-operator">

package/plugins/interactive-blocks/negation-operator/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/router-navigate/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "router-navigate-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/router-navigate/render.php

@@ -7,14 +7,19 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-wp_enqueue_script_module( 'router-navigate-view' );
-
 if ( $attributes['disableNavigation'] ) {
 	wp_interactivity_config(
 		'core/router',
 		array( 'clientNavigationDisabled' => true )
 	);
 }
+
+if ( isset( $attributes['data'] ) ) {
+	wp_interactivity_state(
+		'router',
+		array( 'data' => $attributes['data'] )
+	);
+}
 ?>
 
 <div
@@ -24,8 +29,12 @@ if ( $attributes['disableNavigation'] ) {
 	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
 
 	<output
-		data-testid="router navigations"
-		data-wp-text="state.navigations"
+		data-testid="router navigations pending"
+		data-wp-text="state.navigations.pending"
+	>NaN</output>
+	<output
+		data-testid="router navigations count"
+		data-wp-text="state.navigations.count"
 	>NaN</output>
 	<output
 		data-testid="router status"
@@ -39,24 +48,30 @@ if ( $attributes['disableNavigation'] ) {
 		Timeout <span data-wp-text="state.timeout">NaN</span>
 	</button>
 
-	<?php
-	if ( isset( $attributes['links'] ) ) {
-		foreach ( $attributes['links'] as $key => $link ) {
-			$i = $key += 1;
-			echo <<<HTML
-			<a
-				data-testid="link $i"
-				data-wp-on--click="actions.navigate"
-				href="$link"
-			>link $i</a>
-			<a
-				data-testid="link $i with hash"
-				data-wp-on--click="actions.navigate"
-				data-force-navigation="true"
-				href="$link#link-$i-with-hash"
-			>link $i with hash</a>
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+				<a
+					data-testid="link $i with hash"
+					data-wp-on--click="actions.navigate"
+					data-force-navigation="true"
+					href="$link#link-$i-with-hash"
+				>link $i with hash</a>
 HTML;
+			}
 		}
-	}
-	?>
+		?>
+	</nav>
+	<div data-testid="getterProp" data-wp-text="state.data.getterProp"></div>
+	<div data-testid="prop1" data-wp-text="state.data.prop1"></div>
+	<div data-testid="prop2" data-wp-text="state.data.prop2"></div>
+	<div data-testid="prop3" data-wp-text="state.data.prop3"></div>
 </div>

package/plugins/interactive-blocks/router-navigate/view.asset.php

@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/router-navigate/view.js

@@ -6,14 +6,23 @@ import { store } from '@wordpress/interactivity';
 const { state } = store( 'router', {
 	state: {
 		status: 'idle',
-		navigations: 0,
+		navigations: {
+			pending: 0,
+			count: 0,
+		},
 		timeout: 10000,
+		data: {
+			get getterProp() {
+				return `value from getter (${ state.data.prop1 })`;
+			}
+		}
 	},
 	actions: {
 		*navigate( e ) {
 			e.preventDefault();
 
-			state.navigations += 1;
+			state.navigations.count += 1;
+			state.navigations.pending += 1;
 			state.status = 'busy';
 
 			const force = e.target.dataset.forceNavigation === 'true';
@@ -24,9 +33,9 @@ const { state } = store( 'router', {
 			);
 			yield actions.navigate( e.target.href, { force, timeout } );
 
-			state.navigations -= 1;
+			state.navigations.pending -= 1;
 
-			if ( state.navigations === 0 ) {
+			if ( state.navigations.pending === 0 ) {
 				state.status = 'idle';
 			}
 		},

package/plugins/interactive-blocks/router-regions/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "router-regions-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/router-regions/render.php

@@ -6,8 +6,6 @@
  *
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
-
-wp_enqueue_script_module( 'router-regions-view' );
 ?>
 
 <section>

package/plugins/interactive-blocks/router-regions/view.asset.php

@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);

package/plugins/interactive-blocks/store/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "store-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/store/render.php

@@ -1,14 +1,13 @@
 <?php
 /**
- * HTML for testing the directive `data-wp-bind`.
+ * HTML for testing the `store` function.
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'store-view' );
 ?>
 
 <div data-wp-interactive="test/store">
+	<div data-wp-text="state.0" data-testid="state-0"></div>
 	<div
 		data-testid="non-plain object"
 		data-wp-text="state.isNotProxified"

package/plugins/interactive-blocks/store/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/store/view.js

@@ -3,18 +3,21 @@
  */
 import { store, getElement } from '@wordpress/interactivity';
 
+// A non-object state should never be allowed.
+store( 'test/store', { state: [ 'wrong' ] } );
 
 const { state } = store( 'test/store', {
 	state: {
+		0: 'right',
 		get isNotProxified() {
 			const { ref } = getElement();
 			return state.elementRef === ref;
-		}
+		},
 	},
 	callbacks: {
 		init() {
 			const { ref } = getElement();
 			state.elementRef = ref; // HTMLElement
-		}
-	}
-} )
+		},
+	},
+} );

package/plugins/interactive-blocks/store-tag/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "store-tag-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/store-tag/render.php

@@ -7,8 +7,6 @@
  * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
  */
 
-wp_enqueue_script_module( 'store-tag-view' );
-
 // These variables simulates SSR.
 $test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
 $test_store_tag_double  = $test_store_tag_counter * 2;

package/plugins/interactive-blocks/store-tag/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/tovdom/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "tovdom-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/tovdom/render.php

@@ -8,8 +8,6 @@
 $plugin_url   = plugin_dir_url( __DIR__ );
 $src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
 $src_cdata    = $plugin_url . 'tovdom/cdata.js';
-
-wp_enqueue_script_module( 'tovdom-view' );
 ?>
 
 <div data-wp-interactive="tovdom">

package/plugins/interactive-blocks/tovdom/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/tovdom-islands/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "tovdom-islands-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/tovdom-islands/render.php

@@ -4,8 +4,6 @@
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'tovdom-islands-view' );
 ?>
 
 <div>

package/plugins/interactive-blocks/tovdom-islands/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks/with-scope/block.json

@@ -10,6 +10,6 @@
 		"interactivity": true
 	},
 	"textdomain": "e2e-interactivity",
-	"viewScript": "with-scope-view",
+	"viewScriptModule": "file:./view.js",
 	"render": "file:./render.php"
 }

package/plugins/interactive-blocks/with-scope/render.php

@@ -4,8 +4,6 @@
  *
  * @package gutenberg-test-interactive-blocks
  */
-
-wp_enqueue_script_module( 'with-scope-view' );
 ?>
 
 <div data-wp-interactive="with-scope" data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>

package/plugins/interactive-blocks/with-scope/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

package/plugins/interactive-blocks.php

@@ -15,26 +15,8 @@ add_action(
 			$block_json_files = glob( __DIR__ . '/interactive-blocks/**/block.json' );
 
 			// Auto register all blocks that were found.
-			foreach ( $block_json_files as $filename ) {
-				$block_folder = dirname( $filename );
-				$name         = basename( $block_folder );
-
-				$view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js';
-
-				wp_register_script_module(
-					$name . '-view',
-					$view_file,
-					array(
-						'@wordpress/interactivity',
-						array(
-							'id'     => '@wordpress/interactivity-router',
-							'import' => 'dynamic',
-						),
-					),
-					filemtime( $view_file )
-				);
-
-				register_block_type_from_metadata( $block_folder );
+			foreach ( $block_json_files as $block_json_file ) {
+				register_block_type( $block_json_file );
 			}
 		}
 
@@ -49,7 +31,8 @@ add_action(
 			// But remove the server directive processing.
 			remove_filter(
 				'render_block_data',
-				'wp_interactivity_process_directives_of_interactive_blocks'
+				'wp_interactivity_process_directives_of_interactive_blocks',
+				100
 			);
 		}
 	}