From a1543d87adb06d98b001d1e3da2258cc3189f42b Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 9 Dec 2024 11:56:52 +1100
Subject: [PATCH] Ensuring default editor canvas props aren't set in canvas
 edit mode.

---
 .../global-styles/screen-revisions/index.js         | 12 +++++++-----
 .../src/components/global-styles/style-book.js      |  3 ++-
 .../edit-site/src/components/global-styles/ui.js    | 10 +++++-----
 .../edit-site/src/components/revisions/index.js     | 13 ++++++++++---
 .../index.js                                        | 12 ++++++------
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index 345b1f4d991b18..723a4f8e6180c4 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -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'
@@ -141,16 +141,18 @@ function ScreenRevisions() {
 					<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' ) }
 					/>
 				) ) }
diff --git a/packages/edit-site/src/components/global-styles/style-book.js b/packages/edit-site/src/components/global-styles/style-book.js
index b4f144ffdf2ccc..c52f179000cf8a 100644
--- a/packages/edit-site/src/components/global-styles/style-book.js
+++ b/packages/edit-site/src/components/global-styles/style-book.js
@@ -44,6 +44,7 @@ function useGetCanvasContext() {
 				enableResizing: false,
 				showCloseButton: false,
 				showTabs: false,
+				onClose: undefined,
 			},
 		];
 	}, [
@@ -61,8 +62,8 @@ export default function GlobalStylesStyleBook( props ) {
 
 	return (
 		<StyleBook
-			{ ...contextProps }
 			{ ...props }
+			{ ...contextProps }
 			isSelected={ ( blockName ) =>
 				// Match '/blocks/core%2Fbutton' and
 				// '/blocks/core%2Fbutton/typography', but not
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 062d5803af5193..3d7b8326ffa34d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -181,19 +181,19 @@ function ContextScreens( { name, parentMenu = '' } ) {
 
 /*
  * @TODO we can get revisions etc to work but view and edit modes
-have to send different props. E.g., 
+have to send different props. E.g.,
 					enableResizing={ false }
 					showCloseButton={ false }
 					showTabs={ false }
 					path={ section }
 
-			The second thing would be to use this in REvisions 
+			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 
+			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. 
+			So what we need probably is a component that handles that for us.
 			That knows the context. It should be in the style book.
  *
  */
@@ -433,7 +433,7 @@ function GlobalStylesUI( { path, onPathChange } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/revisions">
-				<ScreenRevisions />
+				<ScreenRevisions query={ query } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/background">
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
index 5ce95872e0c9ae..10079642ab5d34 100644
--- a/packages/edit-site/src/components/revisions/index.js
+++ b/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"
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 3cf7679ad562bc..f461e2fc425ccc 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
@@ -47,17 +47,17 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		useDispatch( editSiteStore )
 	);
 	const openRevisions = useCallback( () => {
-		// if ( 'style-book' === editorCanvasContainerView ) {
-		// 	setEditorCanvasContainerView(
-		// 		'global-styles-revisions:style-book'
-		// 	);
-		// }
+		if ( 'style-book' === editorCanvasContainerView ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		}
 		history.navigate(
 			addQueryArgs( path, {
 				section: '/revisions',
 			} )
 		);
-	}, [ path, history ] );
+	}, [ path, history, editorCanvasContainerView ] );
 
 	// If there are no revisions, do not render a footer.
 	const shouldShowGlobalStylesFooter =