Fix e2es

packages/e2e-test-utils/README.md

@@ -581,6 +581,10 @@ Navigates the site editor back
 
 Goes back until it gets to the root
 
+### openColorToolsPanelMenu
+
+Opens the Color tools panel menu provided via block supports.
+
 ### openDocumentSettingsSidebar
 
 Clicks on the button in the header which opens Document Settings sidebar when it is closed.

packages/e2e-test-utils/src/index.js

@@ -64,6 +64,7 @@ export {
 } from './observe-focus-loss';
 export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 export { openPublishPanel } from './open-publish-panel';
+export { openColorToolsPanelMenu } from './open-color-tools-panel-menu';
 export { openTypographyToolsPanelMenu } from './open-typography-tools-panel-menu';
 export { trashAllPosts } from './posts';
 export { pressKeyTimes } from './press-key-times';

packages/e2e-test-utils/src/open-color-tools-panel-menu.js

@@ -0,0 +1,9 @@
+/**
+ * Opens the Color tools panel menu provided via block supports.
+ */
+export async function openColorToolsPanelMenu() {
+	const toggleSelector =
+		"//div[contains(@class, 'color-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
+	const toggle = await page.waitForXPath( toggleSelector );
+	return toggle.click();
+}

packages/e2e-tests/specs/editor/blocks/heading.test.js

@@ -5,19 +5,13 @@ import {
 	clickBlockAppender,
 	createNewPost,
 	getEditedPostContent,
+	openColorToolsPanelMenu,
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
-const openColorToolsPanelMenu = async () => {
-	const toggleSelector =
-		"//div[contains(@class, 'color-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
-	const toggle = await page.waitForXPath( toggleSelector );
-	return toggle.click();
-};
-
 describe( 'Heading', () => {
 	const COLOR_ITEM_SELECTOR =
-		'.block-editor-panel-color-gradient-settings__item';
+		'.block-editor-panel-color-gradient-settings__dropdown';
 	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
 	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
 		'.components-color-picker button[aria-label="Show detailed inputs"]';

packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js

@@ -4,9 +4,10 @@
 import {
 	clickBlockAppender,
 	createNewPost,
+	getEditedPostContent,
+	openColorToolsPanelMenu,
 	pressKeyWithModifier,
 	transformBlockTo,
-	getEditedPostContent,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Keep styles on block transforms', () => {
@@ -17,13 +18,11 @@ describe( 'Keep styles on block transforms', () => {
 	it( 'Should keep colors during a transform', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '## Heading' );
-		const [ colorPanelToggle ] = await page.$x(
-			"//button[./span[contains(text(),'Color')]]"
-		);
-		await colorPanelToggle.click();
+		await openColorToolsPanelMenu();
+		await page.click( 'button[aria-label="Show Text"]' );
 
 		const textColorButton = await page.waitForSelector(
-			'.block-editor-panel-color-gradient-settings__item'
+			'.block-editor-panel-color-gradient-settings__dropdown'
 		);
 		await textColorButton.click();