Ensuring default editor canvas props aren't set in canvas edit mode.

WordPress · Dec 9, 2024 · a1543d8 · a1543d8
1 parent 3a01d40
commit a1543d8
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 =