Try to navigate to section: /revisions from the revisions button

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

@@ -22,7 +22,7 @@ import Revisions from '../../revisions';
 import { store as editSiteStore } from '../../../store';
 import useGlobalStylesRevisions from './use-global-styles-revisions';
 import RevisionsButtons from './revisions-buttons';
-import StyleBook from '../../style-book';
+import GlobalStylesStyleBook from '../style-book';
 import Pagination from '../../pagination';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -31,7 +31,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 
 const PAGE_SIZE = 10;
 
-function ScreenRevisions() {
+function ScreenRevisions( { query } ) {
 	const { user: currentEditorGlobalStyles, setUserConfig } =
 		useContext( GlobalStylesContext );
 	const { blocks, editorCanvasContainerView } = useSelect(
@@ -70,7 +70,7 @@ function ScreenRevisions() {
 	);
 
 	// The actual code that triggers the revisions screen to navigate back
-	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
+	// to the home screen in `packages/edit-site/src/components/global-styles/ui.js`.
 	const onCloseRevisions = () => {
 		const canvasContainerView =
 			editorCanvasContainerView === 'global-styles-revisions:style-book'
@@ -138,19 +138,21 @@ function ScreenRevisions() {
 			{ hasRevisions &&
 				( editorCanvasContainerView ===
 				'global-styles-revisions:style-book' ? (
-					<StyleBook
+					<GlobalStylesStyleBook
 						userConfig={ currentlySelectedRevision }
 						isSelected={ () => {} }
-						onClose={ () => {
+						onClose={ () =>
 							setEditorCanvasContainerView(
 								'global-styles-revisions'
-							);
-						} }
+							)
+						}
 					/>
 				) : (
 					<Revisions
 						blocks={ blocks }
 						userConfig={ currentlySelectedRevision }
+						enableResizing={ 'edit' === query?.canvas }
+						showCloseButton={ 'edit' === query?.canvas }
 						closeButtonLabel={ __( 'Close revisions' ) }
 					/>
 				) ) }

packages/edit-site/src/components/global-styles/style-book.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useNavigator } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import StyleBook from '../style-book';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+function useGetCanvasContext() {
+	// View mode browser query params and location.
+	const { path: locationPath, query } = useLocation();
+	const history = useHistory();
+
+	// Edit mode (editor) Global styles menu router.
+	const { location, goTo } = useNavigator();
+
+	return useMemo( () => {
+		if ( 'edit' === query?.canvas && location?.path ) {
+			return [
+				location.path ?? '/',
+				( updatedSection ) => goTo( updatedSection ),
+				{},
+			];
+		}
+
+		return [
+			query?.section ?? '/',
+			( updatedSection ) =>
+				history.navigate(
+					addQueryArgs( locationPath, {
+						section: updatedSection,
+					} )
+				),
+			{
+				enableResizing: false,
+				showCloseButton: false,
+				showTabs: false,
+				onClose: undefined,
+			},
+		];
+	}, [
+		locationPath,
+		location?.path,
+		query?.section,
+		query?.canvas,
+		history,
+		goTo,
+	] );
+}
+
+export default function GlobalStylesStyleBook( props ) {
+	const [ path, onChangeSection, contextProps ] = useGetCanvasContext();
+
+	return (
+		<StyleBook
+			{ ...props }
+			{ ...contextProps }
+			isSelected={ ( blockName ) =>
+				// Match '/blocks/core%2Fbutton' and
+				// '/blocks/core%2Fbutton/typography', but not
+				// '/blocks/core%2Fbuttons'.
+				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+				path.startsWith(
+					`/blocks/${ encodeURIComponent( blockName ) }/`
+				)
+			}
+			onSelect={ ( blockName ) => {
+				if (
+					STYLE_BOOK_COLOR_GROUPS.find(
+						( group ) => group.slug === blockName
+					)
+				) {
+					// Go to color palettes Global Styles.
+					onChangeSection( '/colors/palette' );
+					return;
+				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					onChangeSection( '/typography' );
+					return;
+				}
+
+				// Now go to the selected block.
+				onChangeSection(
+					`/blocks/${ encodeURIComponent( blockName ) }`
+				);
+			} }
+		/>
+	);
+}

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
@@ -41,17 +42,17 @@ import ScreenBackground from './screen-background';
 import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+import GlobalStylesStyleBook from './style-book';
 
 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();
@@ -178,42 +179,64 @@ function ContextScreens( { name, parentMenu = '' } ) {
 	);
 }
 
-function GlobalStylesStyleBook() {
-	const navigator = useNavigator();
-	const { path } = navigator.location;
-	return (
-		<StyleBook
-			isSelected={ ( blockName ) =>
-				// Match '/blocks/core%2Fbutton' and
-				// '/blocks/core%2Fbutton/typography', but not
-				// '/blocks/core%2Fbuttons'.
-				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
-				path.startsWith(
-					`/blocks/${ encodeURIComponent( blockName ) }/`
-				)
-			}
-			onSelect={ ( blockName ) => {
-				if (
-					STYLE_BOOK_COLOR_GROUPS.find(
-						( group ) => group.slug === blockName
-					)
-				) {
-					// Go to color palettes Global Styles.
-					navigator.goTo( '/colors/palette' );
-					return;
-				}
-				if ( blockName === 'typography' ) {
-					// Go to typography Global Styles.
-					navigator.goTo( '/typography' );
-					return;
-				}
+/*
+ * @TODO we can get revisions etc to work but view and edit modes
+have to send different props. E.g.,
+					enableResizing={ false }
+					showCloseButton={ false }
+					showTabs={ false }
+					path={ section }
 
-				// Now go to the selected block.
-				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
-			} }
-		/>
-	);
-}
+			The second thing would be to use this in REvisions
+			so it can send the selected global config to the style book.
+
+			Also the way routes work: in view mode, we change the browser history
+			using history.navigate. Here, in the editor, we use internal global styles router.
+
+			So what we need probably is a component that handles that for us.
+			That knows the context. It should be in the style book.
+ *
+ */
+
+// function GlobalStylesStyleBook() {
+// 	const navigator = useNavigator();
+// 	const { path } = navigator.location;
+// 	return (
+// 		<StyleBook
+// 			enableResizing={ false }
+// 			showCloseButton={ false }
+// 			showTabs={ false }
+// 			isSelected={ ( blockName ) =>
+// 				// Match '/blocks/core%2Fbutton' and
+// 				// '/blocks/core%2Fbutton/typography', but not
+// 				// '/blocks/core%2Fbuttons'.
+// 				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+// 				path.startsWith(
+// 					`/blocks/${ encodeURIComponent( blockName ) }/`
+// 				)
+// 			}
+// 			onSelect={ ( blockName ) => {
+// 				if (
+// 					STYLE_BOOK_COLOR_GROUPS.find(
+// 						( group ) => group.slug === blockName
+// 					)
+// 				) {
+// 					// Go to color palettes Global Styles.
+// 					navigator.goTo( '/colors/palette' );
+// 					return;
+// 				}
+// 				if ( blockName === 'typography' ) {
+// 					// Go to typography Global Styles.
+// 					navigator.goTo( '/typography' );
+// 					return;
+// 				}
+
+// 				// Now go to the selected block.
+// 				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
+// 			} }
+// 		/>
+// 	);
+// }
 
 function GlobalStylesBlockLink() {
 	const navigator = useNavigator();
@@ -329,6 +352,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(),
@@ -408,7 +433,7 @@ function GlobalStylesUI( { path, onPathChange } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/revisions">
-				<ScreenRevisions />
+				<ScreenRevisions query={ query } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/background">
@@ -440,7 +465,7 @@ function GlobalStylesUI( { path, onPathChange } ) {
 
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
-			<GlobalStylesEditorCanvasContainerLink />
+			{ 'edit' === canvas && <GlobalStylesEditorCanvasContainerLink /> }
 		</Navigator>
 	);
 }

packages/edit-site/src/components/revisions/index.js

@@ -33,7 +33,12 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function Revisions( { userConfig, blocks } ) {
+function Revisions( {
+	userConfig,
+	blocks,
+	showCloseButton = true,
+	enableResizing = true,
+} ) {
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {
@@ -70,8 +75,10 @@ function Revisions( { userConfig, blocks } ) {
 	return (
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
-			closeButtonLabel={ __( 'Close revisions' ) }
-			enableResizing
+			closeButtonLabel={
+				showCloseButton ? __( 'Close revisions' ) : null
+			}
+			enableResizing={ enableResizing }
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"