Site Editor > Styles: open styles inspector when clicking preview can…

…vas (#66996) Co-authored-by: ellatrix <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Nov 14, 2024 · 2e5ba3b · 2e5ba3b
1 parent cd5ead1
commit 2e5ba3b
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	store as editorStore,
@@ -29,7 +29,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
 	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view', path } = params;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -128,6 +128,20 @@ export default function GlobalStylesSidebar() {
 		);
 	};
 
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const previousActiveAreaRef = useRef( null );
+
+	useEffect( () => {
+		if ( path === '/wp_global_styles' && canvas === 'edit' ) {
+			previousActiveAreaRef.current =
+				getActiveComplementaryArea( 'core' );
+			enableComplementaryArea( 'core', 'edit-site/global-styles' );
+		} else if ( previousActiveAreaRef.current ) {
+			enableComplementaryArea( 'core', previousActiveAreaRef.current );
+		}
+	}, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"