Interactivity: Ensure ignore directives are stable

packages/e2e-tests/plugins/interactive-blocks/directive-ignore/block.json

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

packages/e2e-tests/plugins/interactive-blocks/directive-ignore/render.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-style`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+wp_interactivity_state( 'directive-ignore', array( 'clicks' => 0 ) );
+?>
+
+<div
+	data-testid="block"
+	data-wp-interactive="directive-ignore"
+	data-wp-run="actions.run"
+	<?php
+		echo wp_interactivity_data_wp_context(
+			array(
+				'a'   => 'the letter a',
+				'b'   => 'the letter b',
+				'one' => 'the number one',
+				'two' => 'the number two',
+			)
+		);
+	?>
+>
+	<div data-wp-text="state.clicks" data-testid="counter"></div>
+
+	<div data-wp-ignore data-wp-text="context.two" data-testid="ignored">
+		<div data-testid="ignored-child" data-wp-text="context.a">No processing should occur here.</div>
+	</div>
+
+	<button data-testid="click-me" data-wp-on--click="actions.click" type="button">Click me</button>
+</div>

packages/e2e-tests/plugins/interactive-blocks/directive-ignore/view.asset.php

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

packages/e2e-tests/plugins/interactive-blocks/directive-ignore/view.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-ignore', {
+	actions: {
+		run() {
+			getContext().one = '1';
+			getContext().two = '2';
+		},
+		click() {
+			state.clicks += 1;
+		},
+	},
+} );

packages/interactivity/src/directives.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { h as createElement } from 'preact';
+import { h as createElement, Component } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
 
@@ -221,6 +221,30 @@ const getGlobalEventDirective =
 			} );
 	};
 
+/**
+ * @augments {Component<import('./hooks').DirectiveArgs>}
+ */
+class IgnoredComponent extends Component {
+	shouldComponentUpdate() {
+		return false;
+	}
+
+	render( props ) {
+		const {
+			element: {
+				type: Type,
+				props: { innerHTML, ...rest },
+			},
+		} = props;
+		return (
+			<Type
+				dangerouslySetInnerHTML={ { __html: innerHTML } }
+				{ ...rest }
+			/>
+		);
+	}
+}
+
 export default () => {
 	// data-wp-context
 	directive(
@@ -440,24 +464,9 @@ export default () => {
 	} );
 
 	// data-wp-ignore
-	directive(
-		'ignore',
-		( {
-			element: {
-				type: Type,
-				props: { innerHTML, ...rest },
-			},
-		} ) => {
-			// Preserve the initial inner HTML.
-			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
-		}
-	);
+	directive( 'ignore', ( args ) => {
+		return <IgnoredComponent { ...args } />;
+	} );
 
 	// data-wp-text
 	directive( 'text', ( { directives: { text }, element, evaluate } ) => {

packages/interactivity/src/hooks.tsx

@@ -24,7 +24,7 @@ interface DirectiveEntry {
 
 type DirectiveEntries = Record< string, DirectiveEntry[] >;
 
-interface DirectiveArgs {
+export interface DirectiveArgs {
 	/**
 	 * Object map with the defined directives of the element being evaluated.
 	 */
@@ -347,7 +347,7 @@ const Directives = ( {
 		);
 
 	const props = { ...originalProps, children };
-	const directiveArgs = {
+	const directiveArgs: DirectiveArgs = {
 		directives,
 		props,
 		element,

test/e2e/specs/interactivity/directive-each.spec.ts

@@ -18,7 +18,7 @@ test.describe( 'data-wp-each', () => {
 		await utils.deleteAllPosts();
 	} );
 
-	test( 'should use `item` as the defaul item name in the context', async ( {
+	test( 'should use `item` as the default item name in the context', async ( {
 		page,
 	} ) => {
 		const elements = page.getByTestId( 'letters' ).getByTestId( 'item' );

test/e2e/specs/interactivity/directive-ignore.spec.ts

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-ignore', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-ignore' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-ignore' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'ignored directives should never update the DOM', async ( {
+		page,
+	} ) => {
+		const block = page.getByTestId( 'block' );
+
+		const ignoredElement = await block
+			.getByTestId( 'ignored' )
+			.evaluate( ( el ) => el );
+		const ignoredChildElement = await block
+			.getByTestId( 'ignored-child' )
+			.evaluate( ( el ) => el );
+
+		await expect( block.getByTestId( 'ignored-child' ) ).toHaveText(
+			'No processing should occur here.'
+		);
+
+		await expect( block.getByTestId( 'counter' ) ).toHaveText( '0' );
+		await block.getByTestId( 'click-me' ).click();
+		await expect( block.getByTestId( 'counter' ) ).toHaveText( '1' );
+		expect( ignoredElement ).toBe(
+			await block.getByTestId( 'ignored' ).evaluate( ( el ) => el )
+		);
+		expect( ignoredChildElement ).toBe(
+			await block.getByTestId( 'ignored-child' ).evaluate( ( el ) => el )
+		);
+	} );
+} );