diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 22ebad383884e9..edf820a2f92643 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -21,6 +21,7 @@ import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -52,6 +53,7 @@ const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 	createSlotFill( SLOT_FILL_NAME );
+const { useLocation } = unlock( routerPrivateApis );
 
 function GlobalStylesActionMenu() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
@@ -329,6 +331,8 @@ function NavigationSync( { path: parentPath, onPathChange, children } ) {
 
 function GlobalStylesUI( { path, onPathChange } ) {
 	const blocks = getBlockTypes();
+	const { query } = useLocation();
+	const { canvas } = query;
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -440,7 +444,7 @@ function GlobalStylesUI( { path, onPathChange } ) {
 
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
-			<GlobalStylesEditorCanvasContainerLink />
+			{ 'edit' === canvas && <GlobalStylesEditorCanvasContainerLink /> }
 		</Navigator>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 980f20c49821b0..d1b356ab7193e1 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -19,6 +20,7 @@ import Page from '../page';
 import { unlock } from '../../lock-unlock';
 import StyleBook from '../style-book';
 import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+import { store as editSiteStore } from '../../store';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
@@ -26,6 +28,7 @@ const { Menu } = unlock( componentsPrivateApis );
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
+	setIsStyleBookClosed,
 } ) => {
 	return (
 		<Menu
@@ -68,6 +71,9 @@ export default function GlobalStylesUIWrapper() {
 	const { canvas = 'view' } = query;
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const [ section, onChangeSection ] = useMemo( () => {
 		return [
 			query.section ?? '/',
@@ -80,6 +86,26 @@ export default function GlobalStylesUIWrapper() {
 			},
 		];
 	}, [ path, query.section, history ] );
+console.log( { isStyleBookOpened, section, canvas } );
+
+/*
+  @TODO This needs refactoring. Or at least ScreenRevision needs to be refactored/abstracted
+  so that it doesn't know about the editorCanvasContainerView.
+
+ */
+/*	const turnOn = () => {
+		setEditorCanvasContainerView(
+			section === '/revisions'
+				? 'global-styles-revisions:style-book'
+				: 'style-book'
+		);
+		setIsStyleBookOpened( true );
+	};
+
+	const turnOff = () => {
+		setEditorCanvasContainerView( 'style-book' );
+		setIsStyleBookOpened( false );
+	};*/
 
 	return (
 		<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index 400b2f83785fa4..737d6122922974 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -30,20 +30,20 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 
 export default function SidebarNavigationScreenGlobalStyles() {
 	const history = useHistory();
-	const { path, query } = useLocation();
+	const { path } = useLocation();
 	const {
 		revisions,
 		isLoading: isLoadingRevisions,
 		revisionsCount,
 	} = useGlobalStylesRevisions();
 	const openRevisions = useCallback(
-		async () =>
+		() =>
 			history.navigate(
 				addQueryArgs( path, {
 					section: '/revisions',
 				} )
 			),
-		[ path, query.section, history ]
+		[ path, history ]
 	);
 
 	// If there are no revisions, do not render a footer.