Synchronize the canvas mode with the site editor url

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

@@ -37,6 +37,7 @@ import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizeHandle from '../block-editor/resize-handle';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -54,6 +55,8 @@ const emptyResizeHandleStyles = {
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
+	useSyncCanvasModeWithURL();
+
 	const hubRef = useRef();
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
@@ -117,6 +120,13 @@ export default function Layout( { onError } ) {
 		}
 	}, [ canvasMode, isMobileViewport ] );
 
+	// Synchronizing the URL with the store value of canvasMode happens in an effect
+	// This condition ensures the component is only rendered after the synchronization happens
+	// which prevents any animations due to potential canvasMode value change.
+	if ( canvasMode === 'init' ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ fullResizer }

packages/edit-site/src/components/layout/style.scss

@@ -147,7 +147,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 		bottom: 0;
 		width: 100%;
-		border-radius: 0;
+
+		& > div {
+			border-radius: 0;
+		}
 	}
 }
 

packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncCanvasModeWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const canvasMode = useSelect(
+		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const currentCanvasMode = useRef( canvasMode );
+	const { canvas: canvasInUrl = 'view' } = params;
+	const currentCanvasInUrl = useRef( canvasInUrl );
+	useEffect( () => {
+		currentCanvasMode.current = canvasMode;
+		if ( currentCanvasMode !== currentCanvasInUrl ) {
+			history.push( {
+				...params,
+				canvas: canvasMode,
+			} );
+		}
+	}, [ canvasMode ] );
+
+	useEffect( () => {
+		currentCanvasInUrl.current = canvasInUrl;
+		if ( canvasInUrl !== currentCanvasMode.current ) {
+			__unstableSetCanvasMode( canvasInUrl );
+		}
+	}, [ canvasInUrl ] );
+}

packages/edit-site/src/store/reducer.js

@@ -131,7 +131,7 @@ export function saveViewPanel( state = false, action ) {
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  */
-function canvasMode( state = 'view', action ) {
+function canvasMode( state = 'init', action ) {
 	switch ( action.type ) {
 		case 'SET_CANVAS_MODE':
 			return action.mode;

test/e2e/specs/site-editor/block-list-panel-preference.spec.js

@@ -34,8 +34,6 @@ test.describe( 'Block list view', () => {
 
 		await page.reload();
 
-		await siteEditor.enterEditMode();
-
 		// Should display the Preview button.
 		await expect(
 			page.locator( 'role=region[name="List View"i]' )