@wordpress/e2e-tests 7.7.0 → 7.9.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 7.9.0 (2023-07-20)
+
+## 7.8.0 (2023-07-05)
+
 ## 7.7.0 (2023-06-23)
 
 ## 7.6.0 (2023-06-07)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.7.0",
+	"version": "7.9.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.7.0",
-		"@wordpress/jest-console": "^7.7.0",
-		"@wordpress/jest-puppeteer-axe": "^6.7.0",
-		"@wordpress/scripts": "^26.7.0",
-		"@wordpress/url": "^3.37.0",
+		"@wordpress/e2e-test-utils": "^10.9.0",
+		"@wordpress/jest-console": "^7.9.0",
+		"@wordpress/jest-puppeteer-axe": "^6.9.0",
+		"@wordpress/scripts": "^26.9.0",
+		"@wordpress/url": "^3.39.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d47d8069e1aae05d4a16dc287902eb90edcbff50"
+	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
 }

package/plugins/block-api/index.js

@@ -1,13 +1,16 @@
 ( function () {
 	const { registerBlockType } = wp.blocks;
+	const { useBlockProps } = wp.blockEditor;
+	const { createElement: el } = wp.element;
 	const { addFilter } = wp.hooks;
 
 	registerBlockType( 'e2e-tests/hello-world', {
+		apiVersion: 3,
 		title: 'Hello World',
 		description: 'Hello World test block.',
 		category: 'widgets',
-		edit() {
-			return 'Hello Editor!';
+		edit: function Edit() {
+			return el( 'p', useBlockProps(), 'Hello Editor!' );
 		},
 		save() {
 			return 'Hello Frontend!';

package/plugins/block-api.php

@@ -16,6 +16,8 @@ function enqueue_block_api_plugin_script() {
 		plugins_url( 'block-api/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
 			'wp-hooks',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-api/index.js' ),

package/plugins/block-context.php

@@ -8,10 +8,10 @@
  */
 
 /**
- * Enqueues a custom script for the plugin.
+ * Registers plugin test context blocks.
  */
-function gutenberg_test_enqueue_block_context_script() {
-	wp_enqueue_script(
+function gutenberg_test_register_context_blocks() {
+	wp_register_script(
 		'gutenberg-test-block-context',
 		plugins_url( 'block-context/index.js', __FILE__ ),
 		array(
@@ -22,37 +22,32 @@ function gutenberg_test_enqueue_block_context_script() {
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-context/index.js' ),
 		true
 	);
-}
-add_action( 'init', 'gutenberg_test_enqueue_block_context_script' );
 
-/**
- * Registers plugin test context blocks.
- */
-function gutenberg_test_register_context_blocks() {
 	register_block_type(
 		'gutenberg/test-context-provider',
 		array(
-			'attributes'       => array(
+			'attributes'            => array(
 				'recordId' => array(
 					'type'    => 'number',
 					'default' => 0,
 				),
 			),
-			'provides_context' => array(
+			'provides_context'      => array(
 				'gutenberg/recordId' => 'recordId',
 			),
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 
 	register_block_type(
 		'gutenberg/test-context-consumer',
 		array(
-			'uses_context'    => array(
+			'uses_context'          => array(
 				'gutenberg/recordId',
 				'postId',
 				'postType',
 			),
-			'render_callback' => static function( $attributes, $content, $block ) {
+			'render_callback'       => static function( $attributes, $content, $block ) {
 				$ordered_context = array(
 					$block->context['gutenberg/recordId'],
 					$block->context['postId'],
@@ -61,6 +56,7 @@ function gutenberg_test_register_context_blocks() {
 
 				return implode( ',', $ordered_context );
 			},
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 }

package/plugins/deprecated-node-matcher/index.js

@@ -1,9 +1,10 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
-	const RichText = wp.blockEditor.RichText;
+	const { useBlockProps, RichText } = wp.blockEditor;
 	const el = wp.element.createElement;
 
 	registerBlockType( 'core/deprecated-children-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Children Matcher',
 		attributes: {
 			value: {
@@ -13,40 +14,35 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditChildrenMatcher( { attributes, setAttributes } ) {
 			return el( RichText, {
 				tagName: 'p',
 				value: attributes.value,
 				onChange( nextValue ) {
 					setAttributes( { value: nextValue } );
 				},
+				...useBlockProps(),
 			} );
 		},
 		save( { attributes } ) {
 			return el( RichText.Content, {
 				tagName: 'p',
 				value: attributes.value,
+				...useBlockProps.save(),
 			} );
 		},
 	} );
 
 	function toRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return subValue.children;
-		} );
+		return value?.map( ( { children } ) => children ) ?? [];
 	}
 
 	function fromRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return {
-				children: subValue,
-			};
-		} );
+		return value.map( ( subValue ) => ( { children: subValue } ) );
 	}
 
 	registerBlockType( 'core/deprecated-node-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Node Matcher',
 		attributes: {
 			value: {
@@ -61,10 +57,10 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditNodeMatcher( { attributes, setAttributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps(),
 				el( RichText, {
 					multiline: 'p',
 					value: toRichTextValue( attributes.value ),
@@ -74,12 +70,12 @@
 						} );
 					},
 				} )
-			);
+			)
 		},
 		save( { attributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps.save(),
 				el( RichText.Content, {
 					value: toRichTextValue( attributes.value ),
 				} )

package/plugins/deprecated-node-matcher.php

@@ -15,7 +15,6 @@ function enqueue_deprecated_node_matcher_plugin_script() {
 		'gutenberg-test-deprecated-node-matcher',
 		plugins_url( 'deprecated-node-matcher/index.js', __FILE__ ),
 		array(
-			'lodash',
 			'wp-blocks',
 			'wp-element',
 			'wp-block-editor',

package/plugins/iframed-enqueue-block-assets/script.js

@@ -0,0 +1,3 @@
+window.addEventListener( 'load', () => {
+    document.body.dataset.iframedEnqueueBlockAssetsL10n = window.iframedEnqueueBlockAssetsL10n.test;
+} );

package/plugins/iframed-enqueue-block-assets.php

@@ -17,5 +17,18 @@ add_action(
 			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/style.css' )
 		);
 		wp_add_inline_style( 'iframed-enqueue-block-assets', 'body{padding:20px!important}' );
+		wp_enqueue_script(
+			'iframed-enqueue-block-assets-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/script.js',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/script.js' )
+		);
+		wp_localize_script(
+			'iframed-enqueue-block-assets-script',
+			'iframedEnqueueBlockAssetsL10n',
+			array(
+				'test' => 'Iframed Enqueue Block Assets!',
+			)
+		);
 	}
 );

package/plugins/inner-blocks-allowed-blocks/index.js

@@ -12,6 +12,7 @@
 	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
 
 	registerBlockType( 'test/allowed-blocks-dynamic', {
+		apiVersion: 3,
 		title: 'Allowed Blocks Dynamic',
 		icon: 'carrot',
 		category: 'text',

package/plugins/inner-blocks-templates/index.js

@@ -2,7 +2,7 @@
 	const registerBlockType = wp.blocks.registerBlockType;
 	const createBlock = wp.blocks.createBlock;
 	const el = wp.element.createElement;
-	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const { InnerBlocks, useBlockProps } = wp.blockEditor;
 	const useState = window.wp.element.useState;
 
 	const TEMPLATE = [
@@ -47,35 +47,38 @@
 	};
 
 	registerBlockType( 'test/test-inner-blocks-no-locking', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks no locking',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksNoLockingEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-locking-all', {
+		apiVersion: 3,
 		title: 'Test InnerBlocks locking all',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksBlocksLockingAllEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
 				templateLock: 'all',
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-update-locked-template', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks update locked template',
 		icon: 'cart',
 		category: 'text',
@@ -87,7 +90,7 @@
 			},
 		},
 
-		edit( props ) {
+		edit: function InnerBlocksUpdateLockedTemplateEdit( props ) {
 			const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
 			return el( 'div', null, [
 				el(
@@ -99,12 +102,12 @@
 					},
 					'Update template'
 				),
-				el( InnerBlocks, {
+				el( 'div', useBlockProps(), el( InnerBlocks, {
 					template: hasUpdatedTemplated
 						? TEMPLATE_TWO_PARAGRAPHS
 						: TEMPLATE,
 					templateLock: 'all',
-				} ),
+				} ) ),
 			] );
 		},
 
@@ -112,21 +115,23 @@
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-paragraph-placeholder', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks Paragraph Placeholder',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksParagraphPlaceholderEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
 				templateInsertUpdatesSelection: true,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-transformer-target', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks transformer target',
 		icon: 'cart',
 		category: 'text',
@@ -165,36 +170,34 @@
 			],
 		},
 
-		edit() {
-			return el( InnerBlocks, {
+		edit: function InnerBlocksTransformerTargetEdit() {
+			return el( 'div', useBlockProps(), el( InnerBlocks, {
 				template: TEMPLATE,
-			} );
+			} ) );
 		},
 
 		save,
 	} );
 
-
-	function InnerBlocksAsyncTemplateEdit() {
-		const [ template, setTemplate ] = useState( [] );
-
-		setInterval( () => {
-			setTemplate( TEMPLATE_TWO_PARAGRAPHS );
-		}, 1000 );
-
-		return el( InnerBlocks, {
-			template,
-		} );
-	}
-
 	registerBlockType(
 		'test/test-inner-blocks-async-template',
 		{
+			apiVersion: 3,
 			title: 'Test Inner Blocks Async Template',
 			icon: 'cart',
 			category: 'text',
 
-			edit: InnerBlocksAsyncTemplateEdit,
+			edit: function InnerBlocksAsyncTemplateEdit() {
+				const [ template, setTemplate ] = useState( [] );
+
+				setInterval( () => {
+					setTemplate( TEMPLATE_TWO_PARAGRAPHS );
+				}, 1000 );
+
+				return el('div', useBlockProps(), el( InnerBlocks, {
+					template,
+				} ) );
+			},
 
 			// Purposely do not save inner blocks so that it's possible to test template resolution.
 			save() {},

package/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",
+	"render": "file:./render.php"
+}

package/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>

package/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 );

package/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",
+	"render": "file:./render.php"
+}

package/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>

package/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 );

package/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",
+	"render": "file:./render.php"
+}