Interactivity API: Add missing directives and move e2e tests

.gitignore

@@ -15,6 +15,7 @@ coverage
 *.log
 yarn.lock
 /artifacts
+/test/e2e/artifacts
 /perf-envs
 /composer.lock
 

packages/e2e-test-utils-playwright/src/request-utils/posts.ts

@@ -7,6 +7,7 @@ export interface Post {
 	id: number;
 	content: string;
 	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+	link: string;
 }
 
 export interface CreatePostPayload {

packages/e2e-tests/plugins/interactive-blocks.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Interactive Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+add_action(
+	'init',
+	function() {
+		// Register all blocks found in the `interactive-blocks` folder.
+		if ( file_exists( __DIR__ . '/interactive-blocks/' ) ) {
+			$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(
+					$name . '-view',
+					$view_file,
+					array( 'wp-interactivity' ),
+					filemtime( $view_file ),
+					true
+				);
+
+				register_block_type_from_metadata( $block_folder );
+			};
+		};
+
+		// Temporary fix to disable SSR of directives during E2E testing. This
+		// is required at this moment, as SSR for directives is not stabilized
+		// yet and we need to ensure hydration works, even when the rendered
+		// HTML is not correct or malformed.
+		if ( 'true' === $_GET['disable_directives_ssr'] ) {
+			remove_filter(
+				'render_block',
+				'gutenberg_interactivity_process_directives_in_root_blocks'
+			);
+		}
+
+	}
+);

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-bind",
+	"title": "E2E Interactivity tests - directive bind",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": ["directive-bind-view", "wp-interactivity"],
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,59 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<a
+		data-wp-bind--href="state.url"
+		data-testid="add missing href at hydration"
+	></a>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="change href at hydration"
+	></a>
+
+	<input
+		type="checkbox"
+		data-wp-bind--checked="state.checked"
+		data-testid="add missing checked at hydration"
+	/>
+
+	<input
+		type="checkbox"
+		checked
+		data-wp-bind--checked="!state.checked"
+		data-testid="remove existing checked at hydration"
+	/>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="nested binds - 1"
+	>
+		<img
+			width="1"
+			data-wp-bind--width="state.width"
+			data-testid="nested binds - 2"
+		/>
+	</a>
+
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Update
+	</button>
+
+	<p
+		data-wp-bind--hidden="!state.show"
+		data-wp-bind--aria-hidden="!state.show"
+		data-wp-bind--aria-expanded="state.show"
+		data-wp-bind--data-some-value="state.show"
+		data-testid="check enumerated attributes with true/false exist and have a string value"
+	>
+		Some Text
+	</p>
+</div>

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

@@ -0,0 +1,23 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			url: '/some-url',
+			checked: true,
+			show: false,
+			width: 1,
+		},
+		foo: {
+			bar: 1,
+		},
+		actions: {
+			toggle: ( { state, foo } ) => {
+				state.url = '/some-other-url';
+				state.checked = ! state.checked;
+				state.show = ! state.show;
+				state.width += foo.bar;
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-class",
+	"title": "E2E Interactivity tests - directive class",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": ["directive-class-view", "wp-interactivity"],
+	"render": "file:./render.php"
+}

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

@@ -0,0 +1,75 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-class`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+?>
+<div data-wp-interactive>
+	<button
+		data-wp-on--click="actions.toggleTrueValue"
+		data-testid="toggle trueValue"
+	>
+		Toggle trueValue
+	</button>
+
+	<button
+		data-wp-on--click="actions.toggleFalseValue"
+		data-testid="toggle falseValue"
+	>
+		Toggle falseValue
+	</button>
+
+	<div
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-testid="remove class if callback returns falsy value"
+	></div>
+
+	<div
+		class="foo"
+		data-wp-class--bar="state.trueValue"
+		data-testid="add class if callback returns truthy value"
+	></div>
+
+	<div
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--bar="state.trueValue"
+		data-wp-class--baz="state.trueValue"
+		data-testid="handles multiple classes and callbacks"
+	></div>
+
+	<div
+		class="foo foo-bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--foo-bar="state.trueValue"
+		data-testid="handles class names that are contained inside other class names"
+	></div>
+
+	<div
+		class="foo bar baz"
+		data-wp-class--bar="state.trueValue"
+		data-testid="can toggle class in the middle"
+	></div>
+
+	<div
+		data-wp-class--foo="state.falseValue"
+		data-testid="can toggle class when class attribute is missing"
+	></div>
+
+	<div data-wp-context='{ "falseValue": false }'>
+		<div
+			class="foo"
+			data-wp-class--foo="context.falseValue"
+			data-testid="can use context values"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContextFalseValue"
+			data-testid="toggle context false value"
+		>
+			Toggle context falseValue
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+( ( { wp } ) => {
+	const { store } = wp.interactivity;
+
+	store( {
+		state: {
+			trueValue: true,
+			falseValue: false,
+		},
+		actions: {
+			toggleTrueValue: ( { state } ) => {
+				state.trueValue = ! state.trueValue;
+			},
+			toggleFalseValue: ( { state } ) => {
+				state.falseValue = ! state.falseValue;
+			},
+			toggleContextFalseValue: ( { context } ) => {
+				context.falseValue = ! context.falseValue;
+			},
+		},
+	} );
+} )( window );

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

@@ -0,0 +1,14 @@
+{
+	"apiVersion": 2,
+	"name": "test/directive-context",
+	"title": "E2E Interactivity tests - directive context",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScript": ["directive-context-view", "wp-interactivity"],
+	"render": "file:./render.php"
+}