Site Editor: Remove synchronization of canvas mode into store

packages/edit-site/src/components/block-editor/use-editor-iframe-props.js

@@ -6,30 +6,30 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 
-export default function useEditorIframeProps() {
-	const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-		return {
-			canvasMode: getCanvasMode(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
-		};
+export default function useEditorIframeProps() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const { canvasMode = 'view' } = params;
+	const currentPostIsTrashed = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+			'trash'
+		);
 	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -55,11 +55,15 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				setCanvasMode( 'edit' );
+				history.push( { ...params, canvasMode: 'edit' }, undefined, {
+					transition: 'canvas-mode-edit-transition',
+				} );
 			}
 		},
 		onClick: () => {
-			setCanvasMode( 'edit' );
+			history.push( { ...params, canvasMode: 'edit' }, undefined, {
+				transition: 'canvas-mode-edit-transition',
+			} );
 		},
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -38,22 +38,25 @@ function useNavigateToPreviousEntityRecord() {
 }
 
 export function useSpecificEditorSettings() {
+	const { params } = useLocation();
+	const { canvasMode = 'view' } = params;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { canvasMode, settings, shouldUseTemplateAsDefaultRenderingMode } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext, getCanvasMode, getSettings } = unlock(
+	const { settings, shouldUseTemplateAsDefaultRenderingMode } = useSelect(
+		( select ) => {
+			const { getEditedPostContext, getSettings } = unlock(
 				select( editSiteStore )
 			);
 			const _context = getEditedPostContext();
 			return {
-				canvasMode: getCanvasMode(),
 				settings: getSettings(),
 				// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
 				// @see https://github.com/WordPress/gutenberg/pull/62304/
 				shouldUseTemplateAsDefaultRenderingMode:
 					_context?.postId && _context?.postType !== 'post',
 			};
-		}, [] );
+		},
+		[]
+	);
 	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';

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

@@ -47,6 +47,7 @@ import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
+import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -79,13 +80,14 @@ const siteIconVariants = {
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
+	const { canvasMode = 'view' } = params;
 	const isLoading = useIsSiteEditorLoading();
+	useAdaptEditorToCanvas( canvasMode );
 	const {
 		editedPostType,
 		editedPostId,
 		contextPostType,
 		contextPostId,
-		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
 		showIconLabels,
@@ -96,7 +98,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const {
 			getEditorCanvasContainerView,
 			getEditedPostContext,
-			getCanvasMode,
 			isPage,
 			getEditedPostType,
 			getEditedPostId,
@@ -113,7 +114,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			editedPostId: getEditedPostId(),
 			contextPostType: _context?.postId ? _context.postType : undefined,
 			contextPostId: _context?.postId ? _context.postId : undefined,
-			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
@@ -152,7 +152,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -260,17 +259,36 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 											showTooltip
 											tooltipPosition="middle right"
 											onClick={ () => {
-												setCanvasMode( 'view' );
 												// TODO: this is a temporary solution to navigate to the posts list if we are
 												// come here through `posts list` and are in focus mode editing a template, template part etc..
 												if (
 													isPostsList &&
 													params?.focusMode
 												) {
-													history.push( {
-														page: 'gutenberg-posts-dashboard',
-														postType: 'post',
-													} );
+													history.push(
+														{
+															page: 'gutenberg-posts-dashboard',
+															postType: 'post',
+														},
+														undefined,
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
+												} else {
+													history.push(
+														{
+															...params,
+															canvasMode:
+																undefined,
+														},
+														undefined,
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
 												}
 											} }
 										>

packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
+import { useLayoutEffect } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export function useAdaptEditorToCanvas( canvasMode ) {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const {
+		setDeviceType,
+		closePublishSidebar,
+		setIsListViewOpened,
+		setIsInserterOpened,
+	} = useDispatch( editorStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const registry = useRegistry();
+	useLayoutEffect( () => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
+		registry.batch( () => {
+			clearSelectedBlock();
+			setDeviceType( 'Desktop' );
+			closePublishSidebar();
+			setIsInserterOpened( false );
+
+			// Check if the block list view should be open by default.
+			// If `distractionFree` mode is enabled, the block list view should not be open.
+			// This behavior is disabled for small viewports.
+			if (
+				isMediumOrBigger &&
+				canvasMode === 'edit' &&
+				getPreference( 'core', 'showListViewByDefault' ) &&
+				! getPreference( 'core', 'distractionFree' )
+			) {
+				setIsListViewOpened( true );
+			} else {
+				setIsListViewOpened( false );
+			}
+		} );
+	}, [
+		canvasMode,
+		registry,
+		clearSelectedBlock,
+		setDeviceType,
+		closePublishSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		getPreference,
+	] );
+}

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

@@ -11,6 +11,7 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,52 +24,60 @@ import { store as coreStore } from '@wordpress/core-data';
 import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
+	const { params } = useLocation();
+	const { canvasMode = 'view' } = params;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
 		showListViewByDefault,
 		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
-	} = useSelect( ( select ) => {
-		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const canvasContainerView = getEditorCanvasContainerView();
-		const _isVisualEditorMode =
-			'visual' === select( editorStore ).getEditorMode();
-		const _isEditCanvasMode = 'edit' === getCanvasMode();
-		const _showListViewByDefault = select( preferencesStore ).get(
-			'core',
-			'showListViewByDefault'
-		);
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
+	} = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const canvasContainerView = getEditorCanvasContainerView();
+			const _isVisualEditorMode =
+				'visual' === select( editorStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === canvasMode;
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core',
+				'showListViewByDefault'
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
 
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
 
-		return {
-			isStyleBookOpened: 'style-book' === canvasContainerView,
-			shouldClearCanvasContainerView:
-				'edit-site/global-styles' !==
-					getActiveComplementaryArea( 'core' ) ||
-				! _isVisualEditorMode ||
-				! _isEditCanvasMode,
-			showListViewByDefault: _showListViewByDefault,
-			hasRevisions:
-				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
-			isRevisionsStyleBookOpened:
-				'global-styles-revisions:style-book' === canvasContainerView,
-			isRevisionsOpened:
-				'global-styles-revisions' === canvasContainerView,
-		};
-	}, [] );
+			return {
+				isStyleBookOpened: 'style-book' === canvasContainerView,
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+				showListViewByDefault: _showListViewByDefault,
+				hasRevisions:
+					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
+						?.count,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvasMode ]
+	);
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -77,7 +86,7 @@ export default function GlobalStylesSidebar() {
 		if ( shouldClearCanvasContainerView ) {
 			setEditorCanvasContainerView( undefined );
 		}
-	}, [ shouldClearCanvasContainerView ] );
+	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
 

packages/edit-site/src/components/keyboard-shortcuts/global.js

@@ -5,19 +5,23 @@ import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 function KeyboardShortcutsGlobal() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
 	const { hasNonPostEntityChanges } = useSelect( editorStore );
-	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { params } = useLocation();
+	const { canvasMode = 'view' } = params;
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
@@ -28,7 +32,7 @@ function KeyboardShortcutsGlobal() {
 			isSavingEntityRecord( record.kind, record.name, record.key )
 		);
 		const _hasNonPostEntityChanges = hasNonPostEntityChanges();
-		const isViewMode = getCanvasMode() === 'view';
+		const isViewMode = canvasMode === 'view';
 		if (
 			( ! hasDirtyEntities || ! _hasNonPostEntityChanges || isSaving ) &&
 			! isViewMode