Site Editor: Remove synchronization of canvas mode into store (#66213)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Oct 22, 2024 · 58362df · 58362df
1 parent 0b76a25
commit 58362df
Show file tree

Hide file tree

Showing 18 changed files with 387 additions and 424 deletions.
diff --git a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js
@@ -6,37 +6,37 @@ 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 { canvas = 'view' } = params;
+	const currentPostIsTrashed = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+			'trash'
+		);
 	}, [] );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
-		if ( canvasMode === 'edit' ) {
+		if ( canvas === 'edit' ) {
 			setIsFocused( false );
 		}
-	}, [ canvasMode ] );
+	}, [ canvas ] );
 
 	// In view mode, make the canvas iframe be perceived and behave as a button
 	// to switch to edit mode, with a meaningful label and no title attribute.
@@ -55,11 +55,15 @@ export default function useEditorIframeProps() {
 				! currentPostIsTrashed
 			) {
 				event.preventDefault();
-				setCanvasMode( 'edit' );
+				history.push( { ...params, canvas: 'edit' }, undefined, {
+					transition: 'canvas-mode-edit-transition',
+				} );
 			}
 		},
 		onClick: () => {
-			setCanvasMode( 'edit' );
+			history.push( { ...params, canvas: 'edit' }, undefined, {
+				transition: 'canvas-mode-edit-transition',
+			} );
 		},
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {
@@ -72,8 +76,8 @@ export default function useEditorIframeProps() {
 
 	return {
 		className: clsx( 'edit-site-visual-editor__editor-canvas', {
-			'is-focused': isFocused && canvasMode === 'view',
+			'is-focused': isFocused && canvas === 'view',
 		} ),
-		...( canvasMode === 'view' ? viewModeIframeProps : {} ),
+		...( canvas === 'view' ? viewModeIframeProps : {} ),
 	};
 }
diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/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 { canvas = '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';
@@ -65,15 +68,15 @@ export function useSpecificEditorSettings() {
 
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
-			focusMode: canvasMode !== 'view',
+			focusMode: canvas !== 'view',
 			defaultRenderingMode,
 			onNavigateToEntityRecord,
 			onNavigateToPreviousEntityRecord,
-			__unstableIsPreviewMode: canvasMode === 'view',
+			__unstableIsPreviewMode: canvas === 'view',
 		};
 	}, [
 		settings,
-		canvasMode,
+		canvas,
 		defaultRenderingMode,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -48,6 +48,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 );
@@ -80,13 +81,14 @@ const siteIconVariants = {
 export default function EditSiteEditor( { isPostsList = false } ) {
 	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const isLoading = useIsSiteEditorLoading();
+	useAdaptEditorToCanvas( canvas );
 	const {
 		editedPostType,
 		editedPostId,
 		contextPostType,
 		contextPostId,
-		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
 		showIconLabels,
@@ -97,7 +99,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const {
 			getEditorCanvasContainerView,
 			getEditedPostContext,
-			getCanvasMode,
 			isPage,
 			getEditedPostType,
 			getEditedPostId,
@@ -114,7 +115,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' ),
@@ -129,7 +129,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-	const isEditMode = canvasMode === 'edit';
+	const isEditMode = canvas === 'edit';
 	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
@@ -144,16 +144,15 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 				css:
-					canvasMode === 'view'
+					canvas === 'view'
 						? `body{min-height: 100vh; ${
 								currentPostIsTrashed ? '' : 'cursor: pointer;'
 						  }}`
 						: undefined,
 			},
 		],
-		[ settings.styles, canvasMode, currentPostIsTrashed ]
+		[ settings.styles, canvas, currentPostIsTrashed ]
 	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -264,7 +263,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 											showTooltip
 											tooltipPosition="middle right"
 											onClick={ () => {
-												setCanvasMode( 'view' );
 												__unstableSetEditorMode(
 													'edit'
 												);
@@ -276,10 +274,29 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 													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,
+															canvas: undefined,
+														},
+														undefined,
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
 												}
 											} }
 										>

diff --git a/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js b/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( canvas ) {
+	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 &&
+				canvas === 'edit' &&
+				getPreference( 'core', 'showListViewByDefault' ) &&
+				! getPreference( 'core', 'distractionFree' )
+			) {
+				setIsListViewOpened( true );
+			} else {
+				setIsListViewOpened( false );
+			}
+		} );
+	}, [
+		canvas,
+		registry,
+		clearSelectedBlock,
+		setDeviceType,
+		closePublishSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		getPreference,
+	] );
+}