@wordpress/e2e-tests 7.6.8 → 7.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.6.8",
+	"version": "7.6.10",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,7 +23,7 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^10.6.3",
+		"@wordpress/e2e-test-utils": "^10.6.4",
 		"@wordpress/jest-console": "^7.6.1",
 		"@wordpress/jest-puppeteer-axe": "^6.6.1",
 		"@wordpress/scripts": "^26.6.3",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "57ab3bd2f1dd0e82d94d6d0a722a650c9b12aaae"
+	"gitHead": "ec0ed708e46a598ab2cf8e18bf2591b0102b5bb3"
 }

package/plugins/iframed-enqueue-block-editor-settings.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue block editor settings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings
+ */
+
+add_action(
+	'block_editor_settings_all',
+	function( $settings ) {
+		$settings['styles'][] = array(
+			'css'            => 'p { border: 1px solid red }',
+			'__unstableType' => 'plugin',
+		);
+		return $settings;
+	}
+);

package/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	canvas,
+	activateTheme,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, selector, property ) {
+	return await context.evaluate(
+		( sel, prop ) =>
+			window.getComputedStyle( document.querySelector( sel ) )[ prop ],
+		selector,
+		property
+	);
+}
+
+describe( 'iframed block editor settings styles', () => {
+	beforeEach( async () => {
+		// Activate the empty theme (block based theme), which is iframed.
+		await activateTheme( 'emptytheme' );
+		await activatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+		await createNewPost();
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	it( 'should load styles added through block editor settings', async () => {
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		// Expect a red border (added in PHP).
+		expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe(
+			'rgb(255, 0, 0)'
+		);
+
+		await page.evaluate( () => {
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'plugin',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 2px border (added in JS).
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'2px'
+		);
+	} );
+
+	it( 'should load theme styles added through block editor settings', async () => {
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+
+		await page.evaluate( () => {
+			// Make sure that theme styles are added even if the theme styles
+			// preference is off.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'theme',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 1px border because theme styles are disabled.
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'1px'
+		);
+
+		await page.evaluate( () => {
+			// Now enable theme styles.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+		} );
+
+		// Expect a 2px border because theme styles are enabled.
+		expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
+			'2px'
+		);
+	} );
+} );

package/specs/editor/various/reusable-blocks.test.js

@@ -23,8 +23,6 @@ const reusableBlockNameInputSelector =
 	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
-const syncToggleSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
 const syncToggleSelectorChecked =
 	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
 
@@ -205,8 +203,6 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Multi-selection reusable block' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 
@@ -389,8 +385,6 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
-		const syncToggle = await page.waitForSelector( syncToggleSelector );
-		syncToggle.click();
 		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 		const reusableBlock = await canvas().waitForSelector(