diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json index f3cabf4d6a2c9..70fc4f26f654e 100644 --- a/packages/e2e-tests/package.json +++ b/packages/e2e-tests/package.json @@ -24,6 +24,7 @@ }, "dependencies": { "@wordpress/e2e-test-utils": "file:../e2e-test-utils", + "@wordpress/interactivity": "file:../interactivity", "@wordpress/jest-console": "file:../jest-console", "@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe", "@wordpress/scripts": "file:../scripts", diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php index c551127548e80..1236ecd7d277f 100644 --- a/packages/e2e-tests/plugins/interactive-blocks.php +++ b/packages/e2e-tests/plugins/interactive-blocks.php @@ -21,10 +21,10 @@ function () { $view_file = plugin_dir_url( $block_folder ) . $name . '/' . 'view.js'; - wp_register_script( + gutenberg_register_module( $name . '-view', $view_file, - array( 'wp-interactivity' ), + array( '@wordpress/interactivity' ), filemtime( $view_file ), true ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php index f313262b7c058..efa62c3a18b7e 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-bind-view' ); ?> +
{ - const { store, getContext } = wp.interactivity; +/** + * WordPress dependencies + */ +import { store, getContext } from '@wordpress/interactivity'; - const { state, foo } = store( 'directive-bind', { - state: { - url: '/some-url', - checked: true, - show: false, - width: 1, +const { state, foo } = store( 'directive-bind', { + state: { + url: '/some-url', + checked: true, + show: false, + width: 1, + }, + foo: { + bar: 1, + }, + actions: { + toggle: () => { + state.url = '/some-other-url'; + state.checked = ! state.checked; + state.show = ! state.show; + state.width += foo.bar; }, - foo: { - bar: 1, - }, - actions: { - toggle: () => { - state.url = '/some-other-url'; - state.checked = ! state.checked; - state.show = ! state.show; - state.width += foo.bar; - }, - toggleValue: () => { - const context = getContext(); - const previousValue = ( 'previousValue' in context ) + toggleValue: () => { + const context = getContext(); + const previousValue = + 'previousValue' in context ? context.previousValue - // Any string works here; we just want to toggle the value - // to ensure Preact renders the same we are hydrating in the - // first place. - : 'tacocat'; + : // Any string works here; we just want to toggle the value + // to ensure Preact renders the same we are hydrating in the + // first place. + 'tacocat'; - context.previousValue = context.value; - context.value = previousValue; - } + context.previousValue = context.value; + context.value = previousValue; }, - } ); -} )( window ); + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php index efca342b1babc..16178815c2486 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-body/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-body-view' ); ?> +
{ - const { store, getContext } = wp.interactivity; +/** + * WordPress dependencies + */ +import { store, getContext } from '@wordpress/interactivity'; - store( 'directive-body', { - actions: { - toggleText: () => { - const context = getContext(); - context.text = context.text === 'text-1' ? 'text-2' : 'text-1'; - }, +store( 'directive-body', { + actions: { + toggleText: () => { + const context = getContext(); + context.text = context.text === 'text-1' ? 'text-2' : 'text-1'; }, - } ); -} )( window ); + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php index 92e0c7c78a082..96b3b086abdbf 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-class-view' ); ?> +
`; - const { actions } = store( 'directive-context-navigate', { - actions: { - toggleText() { - const ctx = getContext(); - ctx.text = "changed dynamically"; - }, - addNewText() { - const ctx = getContext(); - ctx.newText = 'some new text'; - }, - navigate() { - return navigate( window.location, { - force: true, - html, - } ); - }, - * asyncNavigate() { - yield actions.navigate(); - const ctx = getContext(); - ctx.newText = 'changed from async action'; - } +const { actions } = store( 'directive-context-navigate', { + actions: { + toggleText() { + const ctx = getContext(); + ctx.text = 'changed dynamically'; + }, + addNewText() { + const ctx = getContext(); + ctx.newText = 'some new text'; + }, + navigate() { + return navigate( window.location, { + force: true, + html, + } ); + }, + *asyncNavigate() { + yield actions.navigate(); + const ctx = getContext(); + ctx.newText = 'changed from async action'; }, - } ); -} )( window ); + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php index 1d6774335442a..6ee0115ff05ba 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-init-view' ); ?> +
{ - const { store, directive, getContext } = wp.interactivity; +/** + * WordPress dependencies + */ +import { store, directive, getContext } from '@wordpress/interactivity'; - // Mock `data-wp-show` directive to test when things are removed from the - // DOM. Replace with `data-wp-show` when it's ready. - directive( - 'show-mock', - ( { - directives: { 'show-mock': showMock }, - element, - evaluate, - } ) => { - const entry = showMock.find( ( { suffix} ) => suffix === 'default'); - if ( ! evaluate( entry ) ) { - return null; - } - return element; +// Mock `data-wp-show` directive to test when things are removed from the +// DOM. Replace with `data-wp-show` when it's ready. +directive( + 'show-mock', + ( { directives: { 'show-mock': showMock }, element, evaluate } ) => { + const entry = showMock.find( ( { suffix } ) => suffix === 'default' ); + if ( ! evaluate( entry ) ) { + return null; } - ); + return element; + } +); - - store( 'directive-init', { - state: { - get isReady() { - const { isReady } = getContext(); - return isReady - .map(v => v ? 'true': 'false') - .join(','); - }, - get calls() { - const { calls } = getContext(); - return calls.join(','); - }, - get isMounted() { - const { isMounted } = getContext(); - return isMounted ? 'true' : 'false'; - }, +store( 'directive-init', { + state: { + get isReady() { + const { isReady } = getContext(); + return isReady.map( ( v ) => ( v ? 'true' : 'false' ) ).join( ',' ); + }, + get calls() { + const { calls } = getContext(); + return calls.join( ',' ); + }, + get isMounted() { + const { isMounted } = getContext(); + return isMounted ? 'true' : 'false'; + }, + }, + actions: { + initOne() { + const { isReady, calls } = getContext(); + isReady[ 0 ] = true; + // Subscribe to changes in that prop. + calls[ 0 ]++; + }, + initTwo() { + const { isReady, calls } = getContext(); + isReady[ 1 ] = true; + calls[ 1 ]++; + }, + initMount() { + const ctx = getContext(); + ctx.isMounted = true; + return () => { + ctx.isMounted = false; + }; + }, + reset() { + const { isReady } = getContext(); + isReady.fill( false ); }, - actions: { - initOne() { - const { isReady, calls } = getContext(); - isReady[0] = true; - // Subscribe to changes in that prop. - calls[0]++; - }, - initTwo() { - const { isReady, calls } = getContext(); - isReady[1] = true; - calls[1]++; - }, - initMount() { - const ctx = getContext(); - ctx.isMounted = true; - return () => { - ctx.isMounted = false; - } - }, - reset() { - const { isReady } = getContext(); - isReady.fill(false); - }, - toggle() { - const ctx = getContext(); - ctx.isVisible = ! ctx.isVisible; - }, + toggle() { + const ctx = getContext(); + ctx.isVisible = ! ctx.isVisible; }, - } ); -} )( window ); + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php index c163a0523420f..1a5f57b526fbf 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php @@ -5,6 +5,7 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-key-view' ); ?>
{ - const { store, navigate } = wp.interactivity; +/** + * WordPress dependencies + */ +import { store, navigate } from '@wordpress/interactivity'; - const html = ` +const html = `
`; - store( 'directive-key', { - actions: { - navigate() { - navigate( window.location, { - force: true, - html, - } ); - }, +store( 'directive-key', { + actions: { + navigate() { + navigate( window.location, { + force: true, + html, + } ); }, - } ); -} )( window ); + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php index 3df028b9907d1..ebf144660fd2a 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-on-view' ); ?> +

0

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js index 3fc1e63784fbc..69378b53e14c0 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js @@ -1,29 +1,30 @@ -( ( { wp } ) => { - const { store, getContext } = wp.interactivity; +/** + * WordPress dependencies + */ +import { store, getContext } from '@wordpress/interactivity'; - const { state } = store( 'directive-on', { - state: { - counter: 0, - text: '' +const { state } = store( 'directive-on', { + state: { + counter: 0, + text: '', + }, + actions: { + clickHandler: ( event ) => { + state.counter += 1; + event.target.dispatchEvent( + new CustomEvent( 'customevent', { bubbles: true } ) + ); }, - actions: { - clickHandler: ( event ) => { - state.counter += 1; - event.target.dispatchEvent( - new CustomEvent( 'customevent', { bubbles: true } ) - ); - }, - inputHandler: ( event ) => { - state.text = event.target.value; - }, - selectHandler: ( event ) => { - const context = getContext(); - context.option = event.target.value; - }, - customEventHandler: () => { - const context = getContext(); - context.customEvents += 1; - }, + inputHandler: ( event ) => { + state.text = event.target.value; }, - } ); -} )( window ); + selectHandler: ( event ) => { + const context = getContext(); + context.option = event.target.value; + }, + customEventHandler: () => { + const context = getContext(); + context.customEvents += 1; + }, + }, +} ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php index 0502189e86679..f082d44dd8fdf 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php @@ -5,7 +5,9 @@ * @package gutenberg-test-interactive-blocks */ +gutenberg_enqueue_module( 'directive-priorities-view' ); ?> + 

 
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index e3c14741e1bb5..4d47084e34362 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -1,126 +1,117 @@
-( ( { wp } ) => {
-	/**
-	 * WordPress dependencies
-	 */
-	const {
-		store,
-		getContext,
-		directive,
-		deepSignal,
-		useEffect,
-		createElement: h
-	} = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	getContext,
+	directive,
+	deepSignal,
+	useEffect,
+	createElement as h,
+} from '@wordpress/interactivity';
 
-	/**
-	 * Namespace used in custom directives and store.
-	 */
-	const namespace = 'directive-priorities';
+/**
+ * Namespace used in custom directives and store.
+ */
+const namespace = 'directive-priorities';
 
-	/**
-	 * Util to check that render calls happen in order.
-	 *
-	 * @param {string} n Name passed from the directive being executed.
-	 */
-	const executionProof = ( n ) => {
-		const el = document.querySelector( '[data-testid="execution order"]' );
-		if ( ! el.textContent ) el.textContent = n;
-		else el.textContent += `, ${ n }`;
-	};
+/**
+ * Util to check that render calls happen in order.
+ *
+ * @param {string} n Name passed from the directive being executed.
+ */
+const executionProof = ( n ) => {
+	const el = document.querySelector( '[data-testid="execution order"]' );
+	if ( ! el.textContent ) el.textContent = n;
+	else el.textContent += `, ${ n }`;
+};
 
-	/**
-	 * Simple context directive, just for testing purposes. It provides a deep
-	 * signal with these two properties:
-	 * - attribute: 'from context'
-	 * - text: 'from context'
-	 */
-	directive(
-		'test-context',
-		( { context: { Provider }, props: { children } } ) => {
-			executionProof( 'context' );
-			const value = deepSignal(
-				{
-					[namespace]: {
-						attribute: 'from context',
-						text: 'from context',
-					}
-				}
-			);
-			return h( Provider, { value }, children );
-		},
-		{ priority: 8 }
-	);
+/**
+ * Simple context directive, just for testing purposes. It provides a deep
+ * signal with these two properties:
+ * - attribute: 'from context'
+ * - text: 'from context'
+ */
+directive(
+	'test-context',
+	( { context: { Provider }, props: { children } } ) => {
+		executionProof( 'context' );
+		const value = deepSignal( {
+			[ namespace ]: {
+				attribute: 'from context',
+				text: 'from context',
+			},
+		} );
+		return h( Provider, { value }, children );
+	},
+	{ priority: 8 }
+);
 
-	/**
-	 * Simple attribute directive, for testing purposes. It reads the value of
-	 * `attribute` from context and populates `data-attribute` with it.
-	 */
-	directive( 'test-attribute', ( { evaluate, element } ) => {
-		executionProof( 'attribute' );
-		const attributeValue = evaluate(
-			{ namespace, value: 'context.attribute' }
-		);
-		useEffect( () => {
-			element.ref.current.setAttribute(
-				'data-attribute',
-				attributeValue,
-			);
-		}, [] );
-		element.props[ 'data-attribute' ] = attributeValue;
+/**
+ * Simple attribute directive, for testing purposes. It reads the value of
+ * `attribute` from context and populates `data-attribute` with it.
+ */
+directive( 'test-attribute', ( { evaluate, element } ) => {
+	executionProof( 'attribute' );
+	const attributeValue = evaluate( {
+		namespace,
+		value: 'context.attribute',
 	} );
+	useEffect( () => {
+		element.ref.current.setAttribute( 'data-attribute', attributeValue );
+	}, [] );
+	element.props[ 'data-attribute' ] = attributeValue;
+} );
 
-	/**
-	 * Simple text directive, for testing purposes. It reads the value of
-	 * `text` from context and populates `children` with it.
-	 */
-	directive(
-		'test-text',
-		( { evaluate, element } ) => {
-			executionProof( 'text' );
-			const textValue = evaluate(
-				{ namespace, value: 'context.text' }
-			);
-			element.props.children =
-				h( 'p', { 'data-testid': 'text' }, textValue );
-		},
-		{ priority: 12 }
-	);
+/**
+ * Simple text directive, for testing purposes. It reads the value of
+ * `text` from context and populates `children` with it.
+ */
+directive(
+	'test-text',
+	( { evaluate, element } ) => {
+		executionProof( 'text' );
+		const textValue = evaluate( { namespace, value: 'context.text' } );
+		element.props.children = h( 'p', { 'data-testid': 'text' }, textValue );
+	},
+	{ priority: 12 }
+);
 
-	/**
-	 * Children directive, for testing purposes. It adds a wrapper around
-	 * `children`, including two buttons to modify `text` and `attribute` values
-	 * from the received context.
-	 */
-	directive(
-		'test-children',
-		( { evaluate, element } ) => {
-			executionProof( 'children' );
-			const updateAttribute = () => {
-				evaluate( { namespace, value: 'actions.updateAttribute' } );
-			};
-			const updateText = () => {
-				evaluate( { namespace, value: 'actions.updateText' } );
-			};
-			element.props.children = h(
-				'div',
-				{},
-				element.props.children,
-				h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
-				h( 'button', { onClick: updateText }, 'Update text' )
-			);
-		},
-		{ priority: 14 }
-	);
+/**
+ * Children directive, for testing purposes. It adds a wrapper around
+ * `children`, including two buttons to modify `text` and `attribute` values
+ * from the received context.
+ */
+directive(
+	'test-children',
+	( { evaluate, element } ) => {
+		executionProof( 'children' );
+		const updateAttribute = () => {
+			evaluate( { namespace, value: 'actions.updateAttribute' } );
+		};
+		const updateText = () => {
+			evaluate( { namespace, value: 'actions.updateText' } );
+		};
+		element.props.children = h(
+			'div',
+			{},
+			element.props.children,
+			h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
+			h( 'button', { onClick: updateText }, 'Update text' )
+		);
+	},
+	{ priority: 14 }
+);
 
-	store( 'directive-priorities', {
-		actions: {
-			updateText() {
-				const context = getContext();
-				context.text = 'updated';
-			},
-			updateAttribute() {
-				const context = getContext();
-				context.attribute = 'updated';
-			},
+store( 'directive-priorities', {
+	actions: {
+		updateText() {
+			const context = getContext();
+			context.text = 'updated';
 		},
-	} );
-} )( window );
+		updateAttribute() {
+			const context = getContext();
+			context.attribute = 'updated';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
index 8419069baa640..c9a989ccaf027 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-slots/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-slots-view' );
 ?>
+
 
 {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-slots', {
-		state: {
-			slot: ''
+const { state } = store( 'directive-slots', {
+	state: {
+		slot: '',
+	},
+	actions: {
+		changeSlot( event ) {
+			state.slot = event.target.dataset.slot;
 		},
-		actions: {
-			changeSlot( event ) {
-				state.slot = event.target.dataset.slot;
-			},
-			updateSlotText() {
-				const context = getContext();
-				const n = context.text[1];
-				context.text = `[${n} updated]`;
-			},
+		updateSlotText() {
+			const context = getContext();
+			const n = context.text[ 1 ];
+			context.text = `[${ n } updated]`;
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
index a62f055617a32..b31f13cf1335c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
@@ -5,6 +5,7 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-style-view' );
 ?>
 
 

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
index 4a3024302dc77..ccf366844276c 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
@@ -1,23 +1,24 @@
-( ( { wp } ) => {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-style', {
-		state: {
-			falseValue: false,
-			color: "red",
-			border: "2px solid yellow"
+const { state } = store( 'directive-style', {
+	state: {
+		falseValue: false,
+		color: 'red',
+		border: '2px solid yellow',
+	},
+	actions: {
+		toggleColor() {
+			state.color = state.color === 'red' ? 'blue' : 'red';
 		},
-		actions: {
-			toggleColor() {
-				state.color = state.color === "red" ? "blue" : "red";
-			},
-			switchColorToFalse() {
-				state.color = false;
-			},
-			toggleContext() {
-				const context = getContext();
-				context.color = context.color === "red" ? "blue" : "red";
-			},
+		switchColorToFalse() {
+			state.color = false;
 		},
-	} );
-} )( window );
+		toggleContext() {
+			const context = getContext();
+			context.color = context.color === 'red' ? 'blue' : 'red';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
index 1746cbe940a7e..98803669c6b0b 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-text-view' );
 ?>
+
 

 	

 		 {
-	const { store, getContext } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
 
-	const { state } = store( 'directive-context', {
-		state: {
-			text: 'Text 1',
+const { state } = store( 'directive-context', {
+	state: {
+		text: 'Text 1',
+	},
+	actions: {
+		toggleStateText() {
+			state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-		actions: {
-			toggleStateText() {
-				state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
-			toggleContextText() {
-				const context = getContext();
-				context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
-			},
+		toggleContextText() {
+			const context = getContext();
+			context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
 		},
-	} );
-} )( window );
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
index 9434bd777fd24..4fc7dd96ee883 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'directive-watch-view' );
 ?>
+
 

 	

 		 {
-	const { store, directive } = wp.interactivity;
+/**
+ * WordPress dependencies
+ */
+import { store, directive } from '@wordpress/interactivity';
 
-	// Fake `data-wp-show-mock` directive to test when things are removed from the
-	// DOM.  Replace with `data-wp-show` when it's ready.
-	directive(
-		'show-mock',
-		( {
-			directives: {
-				"show-mock": showMock,
-			},
-			element,
-			evaluate,
-		} ) => {
-			const entry = showMock.find(
-				( { suffix } ) => suffix === 'default'
-			);
-			if ( ! evaluate( entry ) ) return null;
-			return element;
-		}
-	);
+// Fake `data-wp-show-mock` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		if ( ! evaluate( entry ) ) return null;
+		return element;
+	}
+);
 
-	const { state } = store( 'directive-watch', {
-		state: {
-			isOpen: true,
-			isElementInTheDOM: false,
-			counter: 0,
-			get elementInTheDOM() {
-				return state.isElementInTheDOM
-					? 'element is in the DOM'
-					: 'element is not in the DOM';
-			}
+const { state } = store( 'directive-watch', {
+	state: {
+		isOpen: true,
+		isElementInTheDOM: false,
+		counter: 0,
+		get elementInTheDOM() {
+			return state.isElementInTheDOM
+				? 'element is in the DOM'
+				: 'element is not in the DOM';
+		},
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
 		},
-		actions: {
-			toggle() {
-				state.isOpen = ! state.isOpen;
-			},
-			increment() {
-				state.counter = state.counter + 1;
-			},
+		increment() {
+			state.counter = state.counter + 1;
 		},
-		callbacks: {
-			elementAddedToTheDOM: () => {
-				state.isElementInTheDOM = true;
+	},
+	callbacks: {
+		elementAddedToTheDOM: () => {
+			state.isElementInTheDOM = true;
 
-				return () => {
-					state.isElementInTheDOM = false;
-				};
-			},
-			changeFocus: () => {
-				if ( state.isOpen ) {
-					document.querySelector( "[data-testid='input']" ).focus();
-				}
-			},
-			infiniteLoop: () => {
-				state.counter = state.counter + 1;
+			return () => {
+				state.isElementInTheDOM = false;
+			};
+		},
+		changeFocus: () => {
+			if ( state.isOpen ) {
+				document.querySelector( "[data-testid='input']" ).focus();
 			}
 		},
-	} );
-
-} )( window );
+		infiniteLoop: () => {
+			state.counter = state.counter + 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
index 29b7dcbd32dfd..8d686e6c3ff46 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
@@ -5,7 +5,9 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+gutenberg_enqueue_module( 'negation-operator-view' );
 ?>
+