Fix more e2e tests

packages/edit-site/src/components/global-styles-sidebar/index.js

@@ -11,7 +11,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, usePrevious } from '@wordpress/compose';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -37,6 +37,7 @@ export default function GlobalStylesSidebar() {
 		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
+		activeComplementaryArea,
 	} = useSelect(
 		( select ) => {
 			const { getActiveComplementaryArea } = select( interfaceStore );
@@ -75,6 +76,10 @@ export default function GlobalStylesSidebar() {
 					canvasContainerView,
 				isRevisionsOpened:
 					'global-styles-revisions' === canvasContainerView,
+				activeComplementaryArea:
+					select( interfaceStore ).getActiveComplementaryArea(
+						'core'
+					),
 			};
 		},
 		[ canvas ]
@@ -84,6 +89,17 @@ export default function GlobalStylesSidebar() {
 	);
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ globalStylesPath, setGlobalStylesPath ] = useState( '/' );
+	const previousActiveArea = usePrevious( activeComplementaryArea );
+
+	// Reset path when sidebar opens
+	useEffect( () => {
+		if (
+			activeComplementaryArea === 'edit-site/global-styles' &&
+			previousActiveArea !== 'edit-site/global-styles'
+		) {
+			setGlobalStylesPath( '/' );
+		}
+	}, [ activeComplementaryArea, previousActiveArea, setGlobalStylesPath ] );
 
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {

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

@@ -72,29 +72,22 @@
 	}
 }
 
-.edit-site-global-styles-variation-title {
-	color: $gray-300;
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: $font-weight-medium;
-}
-
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item {
 
 	// Use a white outline to provide contrast with the dark background.
-	.edit-site-global-styles-variations_item-preview {
+	.global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.05);
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+	&:not(.is-active):hover .global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.15);
 	}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
+	&.is-active .global-styles-ui-variations_item-preview {
 		outline-color: $white;
 	}
 
-	&:focus-visible .edit-site-global-styles-variations_item-preview {
+	&:focus-visible .global-styles-ui-variations_item-preview {
 		outline-color: var(--wp-admin-theme-color);
 	}
 }