@wordpress/e2e-tests 8.14.0 → 8.15.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.15.0 (2025-01-02)
+
 ## 8.14.0 (2024-12-11)
 
 ## 8.13.0 (2024-11-27)

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2024 by the contributors
+    Copyright 2016-2025 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.14.0",
+	"version": "8.15.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,13 +24,13 @@
 		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "*",
-		"@wordpress/interactivity": "*",
-		"@wordpress/interactivity-router": "*",
-		"@wordpress/jest-console": "*",
-		"@wordpress/jest-puppeteer-axe": "*",
-		"@wordpress/scripts": "*",
-		"@wordpress/url": "*",
+		"@wordpress/e2e-test-utils": "^11.15.0",
+		"@wordpress/interactivity": "^6.15.0",
+		"@wordpress/interactivity-router": "^2.15.0",
+		"@wordpress/jest-console": "^8.15.0",
+		"@wordpress/jest-puppeteer-axe": "^7.15.0",
+		"@wordpress/scripts": "^30.8.0",
+		"@wordpress/url": "^4.15.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
+	"gitHead": "75a65eb8ffc168a92042544052f46d080a71ea45"
 }

package/plugins/block-bindings/index.js

@@ -1,4 +1,9 @@
 const { registerBlockBindingsSource } = wp.blocks;
+const { InspectorControls } = wp.blockEditor;
+const { PanelBody, TextControl } = wp.components;
+const { createHigherOrderComponent } = wp.compose;
+const { createElement: el, Fragment } = wp.element;
+const { addFilter } = wp.hooks;
 const { fieldsList } = window.testingBindings || {};
 
 const getValues = ( { bindings } ) => {
@@ -46,3 +51,43 @@ registerBlockBindingsSource( {
 	getValues,
 	canUserEditValue: () => true,
 } );
+
+const withBlockBindingsInspectorControl = createHigherOrderComponent(
+	( BlockEdit ) => {
+		return ( props ) => {
+			if ( ! props.attributes?.metadata?.bindings?.content ) {
+				return el( BlockEdit, props );
+			}
+
+			return el(
+				Fragment,
+				{},
+				el( BlockEdit, props ),
+				el(
+					InspectorControls,
+					{},
+					el(
+						PanelBody,
+						{ title: 'Bindings' },
+						el( TextControl, {
+							__next40pxDefaultSize: true,
+							__nextHasNoMarginBottom: true,
+							label: 'Content',
+							value: props.attributes.content,
+							onChange: ( content ) =>
+								props.setAttributes( {
+									content,
+								} ),
+						} )
+					)
+				)
+			);
+		};
+	}
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'testing/bindings-inspector-control',
+	withBlockBindingsInspectorControl
+);

package/plugins/block-bindings.php

@@ -41,7 +41,11 @@ function gutenberg_test_block_bindings_registration() {
 		plugins_url( 'block-bindings/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
-			'wp-private-apis',
+			'wp-block-editor',
+			'wp-components',
+			'wp-compose',
+			'wp-element',
+			'wp-hooks',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings/index.js' ),
 		true

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

@@ -260,3 +260,54 @@
 		data-wp-text="context.callbackRunCount"
 	></data>
 </div>
+
+<hr>
+
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-unset"
+>
+	<template data-wp-each="state.eachUnset"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-null"
+>
+	<template data-wp-each="state.eachNull"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-undefined"
+>
+	<template data-wp-each="state.eachUndefined"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-array"
+>
+	<template data-wp-each="state.eachArray"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-set"
+>
+	<template data-wp-each="state.eachSet"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-string"
+>
+	<template data-wp-each="state.eachString"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-generator"
+>
+	<template data-wp-each="state.eachGenerator"><p data-wp-text="context.item"></p></template>
+</div>
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-iterator"
+>
+	<template data-wp-each="state.eachIterator"><p data-wp-text="context.item"></p></template>
+</div>

package/plugins/interactive-blocks/directive-each/view.js

@@ -13,6 +13,28 @@ const { state } = store( 'directive-each' );
 store( 'directive-each', {
 	state: {
 		letters: [ 'A', 'B', 'C' ],
+		eachUndefined: undefined,
+		eachNull: null,
+		eachArray: [ 'an', 'array' ],
+		eachSet: new Set( [ 'a', 'set' ] ),
+		eachString: 'str',
+		*eachGenerator() {
+			yield 'a';
+			yield 'generator';
+		},
+		eachIterator: {
+			[ Symbol.iterator ]() {
+				const vals = [ 'implements', 'iterator' ];
+				let i = 0;
+				return {
+					next() {
+						return i < vals.length
+							? { value: vals[ i++ ], done: false }
+							: { done: true };
+					},
+				};
+			},
+		},
 	},
 } );
 

package/plugins/interactive-blocks/router-styles-blue/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-blue",
+	"title": "E2E Interactivity tests - router styles - Blue",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/router-styles-blue/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'blue-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.blue-from-inline {
+				color: rgb(0, 0, 255);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'blue-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Blue</p>

package/plugins/interactive-blocks/router-styles-blue/style-from-link.css

@@ -0,0 +1,7 @@
+.blue-from-link {
+    color: rgb(0, 0, 255);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_blue.png');
+}

package/plugins/interactive-blocks/router-styles-blue/style.css

@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-blue,
+.blue  {
+    color: rgb(0, 0, 255);
+}

package/plugins/interactive-blocks/router-styles-green/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-green",
+	"title": "E2E Interactivity tests - router styles - Green",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/router-styles-green/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'green-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.green-from-inline {
+				color: rgb(0, 255, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'green-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Green</p>

package/plugins/interactive-blocks/router-styles-green/style-from-link.css

@@ -0,0 +1,7 @@
+.green-from-link {
+    color: rgb(0, 255, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_green.png');
+}

package/plugins/interactive-blocks/router-styles-green/style.css

@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-green,
+.green {
+    color: rgb(0, 255, 0);
+}

package/plugins/interactive-blocks/router-styles-red/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-red",
+	"title": "E2E Interactivity tests - router styles - Red",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}

package/plugins/interactive-blocks/router-styles-red/render.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'red-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.red-from-inline {
+				color: rgb(255, 0, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'red-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Red</p>

package/plugins/interactive-blocks/router-styles-red/style-from-link.css

@@ -0,0 +1,7 @@
+.red-from-link {
+    color: rgb(255, 0, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_red.png');
+}

package/plugins/interactive-blocks/router-styles-red/style.css

@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-red,
+.red {
+    color: rgb(255, 0, 0);
+}

package/plugins/interactive-blocks/router-styles-wrapper/block.json

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

package/plugins/interactive-blocks/router-styles-wrapper/render.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- These get colored when the corresponding block is present. -->
+	<fieldset>
+		<legend>Styles from block styles</legend>
+		<p data-testid="red" class="red">Red</p>
+		<p data-testid="green" class="green">Green</p>
+		<p data-testid="blue" class="blue">Blue</p>
+		<p data-testid="all" class="red green blue">All</p>
+	</fieldset>
+
+	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
+	<fieldset>
+		<legend>Styles from referenced style sheets</legend>
+		<p data-testid="red-from-link" class="red-from-link">Red from link</p>
+		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
+		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
+		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
+		<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
+	</fieldset>
+
+	<!-- These get colored when the corresponding block adds inline style. -->
+	<fieldset>
+		<legend>Styles from inline styles</legend>
+		<p data-testid="red-from-inline" class="red-from-inline">Red</p>
+		<p data-testid="green-from-inline" class="green-from-inline">Green</p>
+		<p data-testid="blue-from-inline" class="blue-from-inline">Blue</p>
+		<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
+	</fieldset>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-styles">
+		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+			<a
+				data-testid="link <?php echo $label; ?>"
+				data-wp-on--click="actions.navigate"
+				href="<?php echo $link; ?>"
+			>
+				<?php echo $label; ?>
+			</a>
+		<?php endforeach; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-styles"
+		data-wp-router-region="router-styles"
+	>
+		<?php echo $content; ?>
+	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+	>
+		Client-side navigation
+	</div>
+</div>

package/plugins/interactive-blocks/router-styles-wrapper/style.css

@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-wrapper {
+    color: rgb(160, 12, 60);
+}

package/plugins/interactive-blocks/router-styles-wrapper/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-styles-wrapper/view.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-styles', {
+	state: {
+		clientSideNavigation: false,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		},
+	},
+} );