Interactivity API: Add wp-data-on-window and wp-data-on-document …

…directives (WordPress#57931)

* Add wp-data-on-window and wp-data-on-document directives

* Update changelog

* Rename directives tests files to unify them

* Use callbacks instead of actions, remove not needed counter

* Add event listener removal tests

* Add documentation

* Test that events are reattached

* Fix docs typos

* Fix docs typos

* Fix indentation in docs

* Fix e2e test

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

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

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

@@ -0,0 +1,18 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+gutenberg_enqueue_module( 'directive-on-document-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-on-document" }' data-wp-context='{"isVisible":true}'>
+	<button data-wp-on--click="actions.visibilityHandler" data-testid="visibility">Switch visibility</button>
+	<div data-wp-show-mock="context.isVisible">
+		<div data-wp-on-document--keydown="callbacks.keydownHandler">
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,34 @@
+/**
+ * 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;
+	}
+);
+
+const { state } = store( 'directive-on-document', {
+	state: {
+		counter: 0,
+	},
+	callbacks: {
+		keydownHandler: ( ) => {
+			state.counter += 1;
+		},
+	},
+	actions: {
+		visibilityHandler: () => {
+			const context = getContext();
+			context.isVisible = ! context.isVisible;
+		},
+	}
+} );

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

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

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

@@ -0,0 +1,18 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+gutenberg_enqueue_module( 'directive-on-window-view' );
+?>
+
+<div data-wp-interactive='{ "namespace": "directive-on-window" }' data-wp-context='{"isVisible":true}'>
+	<button data-wp-on--click="actions.visibilityHandler" data-testid="visibility">Switch visibility</button>
+	<div data-wp-show-mock="context.isVisible">
+		<div data-wp-on-window--resize="callbacks.resizeHandler">
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,34 @@
+/**
+ * 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;
+	}
+);
+
+const { state } = store( 'directive-on-window', {
+	state: {
+		counter: 0,
+	},
+	callbacks: {
+		resizeHandler: ( ) => {
+			state.counter += 1;
+		},
+	},
+	actions: {
+		visibilityHandler: () => {
+			const context = getContext();
+			context.isVisible = ! context.isVisible;
+		},
+	}
+} );

packages/interactivity/CHANGELOG.md

@@ -10,6 +10,7 @@
 ### New Features
 
 -   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))
+-   Add `wp-data-on-window` and `wp-data-on-document` directives. ([57931](https://github.com/WordPress/gutenberg/pull/57931))
 
 ### Breaking Changes