@wordpress/e2e-tests 8.32.0 → 8.32.1-next.ff1cebbba.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.32.0",
+	"version": "8.32.1-next.ff1cebbba.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": "^11.32.0",
-		"@wordpress/interactivity": "^6.32.0",
-		"@wordpress/interactivity-router": "^2.32.0",
-		"@wordpress/jest-console": "^8.32.0",
-		"@wordpress/jest-puppeteer-axe": "^7.32.0",
-		"@wordpress/scripts": "^30.25.0",
-		"@wordpress/url": "^4.32.0",
+		"@wordpress/e2e-test-utils": "^11.32.1-next.ff1cebbba.0",
+		"@wordpress/interactivity": "^6.33.1-next.ff1cebbba.0",
+		"@wordpress/interactivity-router": "^2.32.1-next.ff1cebbba.0",
+		"@wordpress/jest-console": "^8.32.1-next.ff1cebbba.0",
+		"@wordpress/jest-puppeteer-axe": "^7.32.1-next.ff1cebbba.0",
+		"@wordpress/scripts": "^30.25.1-next.ff1cebbba.0",
+		"@wordpress/url": "^4.32.1-next.ff1cebbba.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
 }

package/plugins/block-bindings/index.js

@@ -13,13 +13,20 @@ const getValues = ( { bindings } ) => {
 	}
 	return newValues;
 };
-const setValues = ( { dispatch, bindings } ) => {
+const setValues = ( { dispatch, context, bindings } ) => {
+	const newMeta = {};
 	Object.values( bindings ).forEach( ( { args, newValue } ) => {
-		// Example of what could be done.
-		dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, {
-			meta: { [ args?.key ]: newValue },
-		} );
+		newMeta[ args.key ] = newValue;
 	} );
+
+	dispatch( 'core' ).editEntityRecord(
+		'postType',
+		context?.postType,
+		context?.postId,
+		{
+			meta: newMeta,
+		}
+	);
 };
 
 registerBlockBindingsSource( {
@@ -27,7 +34,90 @@ registerBlockBindingsSource( {
 	getValues,
 	setValues,
 	canUserEditValue: () => true,
-	getFieldsList: () => fieldsList,
+	editorUI() {
+		return {
+			mode: 'dropdown',
+			data: Object.entries( fieldsList || {} ).map(
+				( [ key, field ] ) => ( {
+					label: field?.label || key,
+					type: field?.type || 'string',
+					args: {
+						key,
+					},
+				} )
+			),
+		};
+	},
+} );
+
+const ModalButton = ( { fieldKey, fieldLabel, attribute, closeModal } ) => {
+	const { updateBlockBindings } = wp.blockEditor.useBlockBindingsUtils();
+
+	return el(
+		'button',
+		{
+			onClick: () => {
+				updateBlockBindings( {
+					[ attribute ]: {
+						source: 'testing/modal-source',
+						args: { key: fieldKey },
+					},
+				} );
+				closeModal();
+			},
+			style: {
+				display: 'block',
+				margin: '5px 0',
+				padding: '10px',
+				width: '100%',
+			},
+		},
+		fieldLabel
+	);
+};
+
+registerBlockBindingsSource( {
+	name: 'testing/modal-source',
+	label: 'Modal Source',
+	getValues,
+	setValues,
+	canUserEditValue: () => true,
+	editorUI() {
+		return {
+			mode: 'modal',
+			data: Object.entries( fieldsList || {} ).map(
+				( [ key, field ] ) => ( {
+					label: field?.label || key,
+					type: field?.type || 'string',
+					args: {
+						key,
+					},
+				} )
+			),
+			renderModalContent( { attribute, closeModal } ) {
+				return el(
+					'div',
+					{ style: { padding: '20px' } },
+					el( 'h3', null, 'Select a field from the modal' ),
+					el(
+						'p',
+						null,
+						'This is a modal interface for selecting fields.'
+					),
+					Object.entries( fieldsList || {} ).map(
+						( [ key, field ] ) =>
+							el( ModalButton, {
+								key,
+								fieldKey: key,
+								fieldLabel: field?.label || key,
+								attribute,
+								closeModal,
+							} )
+					)
+				);
+			},
+		};
+	},
 } );
 
 registerBlockBindingsSource( {

package/plugins/block-bindings.php

@@ -18,21 +18,26 @@ function gutenberg_test_block_bindings_registration() {
 	$upload_dir  = wp_upload_dir();
 	$testing_url = $upload_dir['url'] . '/1024x768_e2e_test_image_size.jpeg';
 	$fields_list = array(
-		'text_field'  => array(
+		'text_field'          => array(
 			'label' => 'Text Field Label',
 			'value' => 'Text Field Value',
 			'type'  => 'string',
 		),
-		'url_field'   => array(
+		'url_field'           => array(
 			'label' => 'URL Field Label',
 			'value' => $testing_url,
 			'type'  => 'string',
 		),
-		'empty_field' => array(
+		'empty_field'         => array(
 			'label' => 'Empty Field Label',
 			'value' => '',
 			'type'  => 'string',
 		),
+		'number_custom_field' => array(
+			'label' => 'Number Custom Field Label',
+			'value' => 10.5,
+			'type'  => 'number',
+		),
 	);
 
 	// Enqueue a custom script for the plugin.
@@ -69,7 +74,9 @@ function gutenberg_test_block_bindings_registration() {
 				if ( ! isset( $source_args['key'] ) || ! isset( $fields_list[ $source_args['key'] ] ) ) {
 					return null;
 				}
-				return $fields_list[ $source_args['key'] ]['value']; },
+				return $fields_list[ $source_args['key'] ]['value'];
+			},
+			'uses_context'       => array( 'postType', 'postId' ),
 		)
 	);
 	register_block_bindings_source(
@@ -164,7 +171,7 @@ function gutenberg_test_block_bindings_registration() {
 	);
 	register_meta(
 		'post',
-		'number',
+		'number_custom_field',
 		array(
 			'label'        => 'Number custom field',
 			'type'         => 'number',

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

@@ -97,4 +97,15 @@
 		>Toggle</button>
 	</div>
 	<?php endforeach; ?>
+
+	<div data-wp-context='{"test": true}'>
+		<div
+			data-testid="without-unique-id"
+			data-wp-bind--data-test="context.test"
+		></div>
+		<div
+			data-testid="with-unique-id"
+			data-wp-bind--data-test---unique-id="context.test"
+		></div>
+	</div>
 </div>

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

@@ -79,8 +79,10 @@
 	></div>
 
 	<div
-		data-wp-class--main-bg----color="state.trueValue"
 		data-testid="can use classes with several dashes"
+		data-wp-class--main-bg--color="state.trueValue"
+		data-wp-class--main-bg---color="state.trueValue"
+		data-wp-class--main-bg----color="state.trueValue"
 	></div>
 
 	<div data-wp-context='{ "value": false }'>

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

@@ -241,3 +241,23 @@
 		></span>
 	</div>
 </div>
+
+<div
+	data-wp-interactive="directive-context/multiple"
+	data-wp-context='{ "prop": "parent", "parent": true }'
+>
+	<div
+		data-wp-context='{ "prop": "default", "default": true }'
+		data-wp-context---id1='{ "prop": "id1", "id1": true }'
+		data-wp-context---id2='other-namespace::{ "prop": true }'
+	>
+		<span
+			data-testid="multiple context in the same element"
+			data-wp-bind--data-test-prop="context.prop"
+			data-wp-bind--data-test-parent="context.parent"
+			data-wp-bind--data-test-default="context.default"
+			data-wp-bind--data-test-id1="context.id1"
+			data-wp-bind--data-test-other="other-namespace::context.prop"
+		></span>
+	</div>
+</div>

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

@@ -312,6 +312,23 @@
 	<template data-wp-each="state.eachIterator"><p data-wp-text="context.item"></p></template>
 </div>
 
+<div
+	data-wp-interactive="directive-each"
+	data-testid="each-with-multiple-directives"
+>
+	<template
+		data-wp-each="state.eachArray"
+		data-wp-each--item="state.eachArray"
+	>
+		<p data-wp-text="context.item"></p>
+	</template>
+	<template
+		data-wp-each---unique-id="state.eachArray"
+	>
+		<p data-wp-text="context.item"></p>
+	</template>
+</div>
+
 <ul 
 	data-wp-interactive="directive-each"
 	data-testid="nested-with-same-item-key"

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

@@ -20,7 +20,7 @@
 		data-testid="multiple inits"
 		data-wp-context='{"isReady":[false,false],"calls":[0,0]}'
 		data-wp-init--one="actions.initOne"
-		data-wp-init--two="actions.initTwo"
+		data-wp-init---two="actions.initTwo"
 	>
 		<p data-wp-text="state.isReady" data-testid="isReady">false,false</p>
 		<p data-wp-text="state.calls" data-testid="calls">0,0</p>

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

@@ -67,7 +67,7 @@
 			data-testid="multiple handlers button"
 			data-wp-on--click="actions.setClicked"
 			data-wp-on--click--counter="actions.countClick"
-			data-wp-on--click--toggle="actions.toggle"
+			data-wp-on--click---toggle="actions.toggle"
 		>Click me!</button>
 	</div>
 </div>

package/plugins/interactive-blocks/directive-on-document/render.php

@@ -24,8 +24,13 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
-	<div data-wp-on-document--keydown="actions.keydownHandler" data-wp-on-document--keydown--second="actions.keydownSecondHandler">
+	<div
+		data-wp-on-document--keydown="actions.keydownHandler"
+		data-wp-on-document--keydown--second="actions.keydownSecondHandler"
+		data-wp-on-document--keydown---third="actions.keydownThirdHandler"
+	>
 		<p data-wp-text="state.keydownHandler" data-testid="keydownHandler">no</p>
 		<p data-wp-text="state.keydownSecondHandler" data-testid="keydownSecondHandler">no</p>
+		<p data-wp-text="state.keydownThirdHandler" data-testid="keydownThirdHandler">no</p>
 	</div>
 </div>

package/plugins/interactive-blocks/directive-on-document/view.js

@@ -31,6 +31,7 @@ const { state } = store( 'directive-on-document', {
 		isEventAttached: 'no',
 		keydownHandler: 'no',
 		keydownSecondHandler: 'no',
+		keydownThirdHandler: 'no',
 	},
 	callbacks: {
 		keydownHandler() {
@@ -51,5 +52,8 @@ const { state } = store( 'directive-on-document', {
 		keydownSecondHandler: () => {
 			state.keydownSecondHandler = 'yes';
 		},
+		keydownThirdHandler: () => {
+			state.keydownThirdHandler = 'yes';
+		},
 	},
 } );

package/plugins/interactive-blocks/directive-on-window/render.php

@@ -21,8 +21,13 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
-	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+	<div
+		data-wp-on-window--resize="actions.resizeHandler"
+		data-wp-on-window--resize--second="actions.resizeSecondHandler"
+		data-wp-on-window--resize---third="actions.resizeThirdHandler"
+	>
 		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
 		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</p>
+		<p data-wp-text="state.resizeThirdHandler" data-testid="resizeThirdHandler">no</p>
 	</div>
 </div>

package/plugins/interactive-blocks/directive-on-window/view.js

@@ -31,6 +31,7 @@ const { state } = store( 'directive-on-window', {
 		isEventAttached: 'no',
 		resizeHandler: 'no',
 		resizeSecondHandler: 'no',
+		resizeThirdHandler: 'no',
 	},
 	callbacks: {
 		resizeHandler() {
@@ -51,5 +52,8 @@ const { state } = store( 'directive-on-window', {
 		resizeSecondHandler: () => {
 			state.resizeSecondHandler = 'yes';
 		},
+		resizeThirdHandler: () => {
+			state.resizeThirdHandler = 'yes';
+		},
 	},
 } );

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

@@ -16,8 +16,8 @@
 	<div data-testid="navigated">no</div>
 
 	<div
-		data-wp-run--hydrated="callbacks.updateIsHydrated"
-		data-wp-run--renderCount="callbacks.updateRenderCount"
+		data-wp-run---hydrated="callbacks.updateIsHydrated"
+		data-wp-run---renderCount="callbacks.updateRenderCount"
 		data-wp-text="state.clickCount"
 	></div>
 </div>
@@ -44,7 +44,7 @@
 	>
 		<div
 			data-wp-run--mounted="callbacks.updateIsMounted"
-			data-wp-run--hooks="callbacks.useHooks"
+			data-wp-run---hooks="callbacks.useHooks"
 		>
 			Element with wp-run using hooks
 		</div>

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

@@ -89,4 +89,14 @@
 			Toggle context
 		</button>
 	</div>
+
+	<div data-wp-style----var="state.color">
+		<span style="color: var(--var);" data-testid="can use CSS variables">
+			Uses CSS variables
+		</span>
+	</div>
+
+	<div data-wp-style--color---unique-id="state.color" data-testid="ignores unique-ids">
+		Ignores unique-ids
+	</div>
 </div>

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

@@ -45,5 +45,14 @@
 			data-wp-text="state.boolean"
 			data-testid="show state boolean"
 		></span>
+
+		<span
+			data-wp-text--suffix="state.text"
+			data-testid="ignores suffixes"
+		></span>
+		<span
+			data-wp-text---unique-id="state.text"
+			data-testid="ignores unique-ids"
+		></span>
 	</div>
 </div>

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

@@ -29,6 +29,14 @@
 		0
 	</div>
 
+	<div
+		data-testid="multiple watches"
+		data-wp-watch--one="callbacks.watch1"
+		data-wp-watch---two="callbacks.watch2"
+		data-wp-bind--data-watch-one="state.watch1"
+		data-wp-bind--data-watch-two="state.watch2"
+	></div>
+
 	<button data-testid="toggle" data-wp-on--click="actions.toggle">
 		Update
 	</button>

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

@@ -34,6 +34,8 @@ const { state } = store( 'directive-watch', {
 				? 'element is in the DOM'
 				: 'element is not in the DOM';
 		},
+		watch1: false,
+		watch2: false,
 	},
 	actions: {
 		toggle() {
@@ -59,5 +61,11 @@ const { state } = store( 'directive-watch', {
 		infiniteLoop: () => {
 			state.counter = state.counter + 1;
 		},
+		watch1: () => {
+			state.watch1 = true;
+		},
+		watch2: () => {
+			state.watch2 = true;
+		},
 	},
 } );

package/plugins/server-side-rendered-block.php

@@ -48,12 +48,25 @@ add_action(
 		register_block_type(
 			'test/auto-register-block',
 			array(
-				'api_version'     => 3,
-				'render_callback' => static function () {
-					return '<div>Auto-register block content</div>';
+				'render_callback' => static function ( $attributes ) {
+					$wrapper_attributes = get_block_wrapper_attributes(
+						array(
+							'class' => 'auto-register-example',
+						)
+					);
+
+					return sprintf(
+						'<div %1$s><p>Auto-register block content</p><p>Background: %2$s</p></div>',
+						$wrapper_attributes,
+						isset( $attributes['backgroundColor'] ) ? esc_html( $attributes['backgroundColor'] ) : 'default'
+					);
 				},
 				'supports'        => array(
 					'auto_register' => true,
+					'color'         => array(
+						'background' => true,
+						'text'       => false,
+					),
 				),
 			)
 		);