Update e2e selector for global styles button

packages/block-editor/src/components/list-view/style.scss

@@ -371,8 +371,8 @@ $block-navigation-max-indent: 8;
 	.block-editor-list-view-block-contents {
 		color: $gray-100;
 	}
-	.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
-		color: var(--wp-admin-theme-color-darker-20);
+	.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
+		background: var(--wp-admin-theme-color-darker-20);
 	}
 	.block-editor-block-mover-button,
 	.block-editor-list-view-block__menu {

packages/e2e-test-utils/src/site-editor.js

@@ -231,7 +231,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
  */
 export async function toggleGlobalStyles() {
 	await page.click(
-		'.edit-site-header__actions button[aria-label="Styles"]'
+		'.interface-interface-skeleton__drawer button[aria-label="Styles"]'
 	);
 }
 
@@ -241,7 +241,7 @@ export async function toggleGlobalStyles() {
  * @param {string} panelName Name of the panel that is going to be opened.
  */
 export async function openGlobalStylesPanel( panelName ) {
-	const selector = `//div[@aria-label="Settings"]//button[.//*[text()="${ panelName }"]]`;
+	const selector = `//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ panelName }"]]`;
 	await ( await page.waitForXPath( selector ) ).click();
 }
 
@@ -250,6 +250,6 @@ export async function openGlobalStylesPanel( panelName ) {
  */
 export async function openPreviousGlobalStylesPanel() {
 	await page.click(
-		'div[aria-label="Settings"] button[aria-label="Navigate to the previous view"]'
+		'.edit-site-global-styles-sidebar__panel button[aria-label="Navigate to the previous view"]'
 	);
 }

packages/e2e-tests/specs/site-editor/style-variations.test.js

@@ -71,7 +71,7 @@ async function getCustomFontSizeValue() {
 async function getColorValue( colorType ) {
 	return page.evaluate( ( _colorType ) => {
 		return document.evaluate(
-			`substring-before(substring-after(//div[@aria-label="Settings"]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
+			`substring-before(substring-after(//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
 			document,
 			null,
 			XPathResult.ANY_TYPE,

packages/edit-site/src/components/navigation-sidebar/navigation-menu-sidebar/style.scss

@@ -29,7 +29,7 @@
 .edit-site-navigation-menu-sidebar,
 .edit-site-navigation-menu-sidebar .components-panel__header,
 .edit-site-navigation-inspector,
-.edit-site-navigation-menu-sidebar .components-button {
+.edit-site-navigation-menu-sidebar .interface-complementary-area-header .components-button {
 	background: $gray-900;
 	color: $gray-100;
 }

packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import {
 	Button,
 	Icon,
@@ -49,14 +49,6 @@ function NavigationToggle( { icon } ) {
 
 	const navigationToggleRef = useRef();
 
-	useEffect( () => {
-		// TODO: Remove this effect when alternative solution is merged.
-		// See: https://github.com/WordPress/gutenberg/pull/37314
-		if ( ! isNavigationOpen ) {
-			navigationToggleRef.current.focus();
-		}
-	}, [ isNavigationOpen ] );
-
 	const toggleNavigationPanel = () =>
 		setIsNavigationPanelOpened( ! isNavigationOpen );
 

packages/edit-site/src/components/navigation-sidebar/style.scss

@@ -0,0 +1,82 @@
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	&__panel,
+	&__navigator-provider {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
+
+	&__navigator-screen {
+		flex: 1;
+	}
+}
+
+.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
+	margin-left: 0;
+}
+
+.edit-site-global-styles-sidebar__reset-button.components-button {
+	margin-left: auto;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
+	font-size: $default-font-size * 1.2;
+	font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: 500;
+}
+
+.edit-site-typography-panel,
+.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+	border: 0;
+}
+
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+	grid-column: span 1;
+}
+
+.edit-site-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.edit-site-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}
+
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
+	padding: $grid-unit-20;
+}
+
+.edit-site-global-styles-sidebar__beta {
+	display: inline-flex;
+	margin-left: $grid-unit-10;
+	padding: 0 $grid-unit-10;
+	height: $grid-unit-30;
+	border-radius: $radius-block-ui;
+	background-color: $black;
+	color: $white;
+	align-items: center;
+	font-size: $helptext-font-size;
+	line-height: 1;
+}
+
+//TODO: add dark mode support to base components instead using emotion
+.interface-complementary-area.edit-site-global-styles-sidebar,
+.edit-site-global-styles-sidebar .interface-complementary-area-header,
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__navigator-provider,
+.edit-site-global-styles-sidebar .components-card__body,
+.edit-site-global-styles-sidebar .components-card,
+.edit-site-global-styles-sidebar .components-flex-item,
+.edit-site-global-styles-sidebar .components-heading {
+	background: $gray-900;
+	color: $gray-100;
+	fill: $gray-100;
+}

packages/edit-site/src/components/sidebar/style.scss

@@ -16,73 +16,3 @@
 		margin: 0;
 	}
 }
-
-.edit-site-global-styles-sidebar {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-
-	&__panel,
-	&__navigator-provider {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-	}
-
-	&__navigator-screen {
-		flex: 1;
-	}
-}
-
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
-	font-size: $default-font-size * 1.2;
-	font-weight: 500;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__item > button span {
-	font-weight: 500;
-}
-
-.edit-site-typography-panel,
-.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
-	border: 0;
-}
-
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
-	grid-column: span 1;
-}
-
-.edit-site-global-styles-sidebar__blocks-group {
-	padding-top: $grid-unit-30;
-	border-top: $border-width solid $gray-200;
-}
-
-.edit-site-global-styles-sidebar__blocks-group-help {
-	padding: 0 $grid-unit-20;
-}
-
-.edit-site-global-styles-color-palette-panel,
-.edit-site-global-styles-gradient-palette-panel {
-	padding: $grid-unit-20;
-}
-
-.edit-site-global-styles-sidebar__beta {
-	display: inline-flex;
-	margin-left: $grid-unit-10;
-	padding: 0 $grid-unit-10;
-	height: $grid-unit-30;
-	border-radius: $radius-block-ui;
-	background-color: $black;
-	color: $white;
-	align-items: center;
-	font-size: $helptext-font-size;
-	line-height: 1;
-}

packages/edit-site/src/style.scss

@@ -12,6 +12,7 @@
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/navigation-sidebar/navigation-menu-sidebar/style.scss";
+@import "./components/navigation-sidebar/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";