Site Editor: patterns and templates cannot be edited from sidebar mobile view (#63002)

* In mobile mode, check for canvas edit mode so the "Edit" callback redirect the browser to the block editor in edit mode

* I suspect that the transition is causing intermittent crashing in Chrome in mobile viewports. Turning it off as it appears more stable in local testing.

* Revert unintentional change

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: priethor <priethor@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: ironprogrammer <ironprogrammer@git.wordpress.org>
Co-authored-by: ivan-ottinger <ivanottinger@git.wordpress.org>
Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>

Author: 9 people

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

@@ -77,6 +77,7 @@ export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
@@ -93,15 +94,14 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PagePages />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : (
-						<PagePages />
-					),
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePages />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -119,10 +119,14 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: <PageTemplates />,
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PageTemplates />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -139,8 +143,12 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && (
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePatterns />
+				),
+				preview: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -156,7 +164,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -175,7 +183,7 @@ export default function useLayoutAreas() {
 						/>
 					),
 					preview: <Editor isLoading={ isSiteEditorLoading } />,
-					mobile: canvas === 'edit' && (
+					mobile: hasEditCanvasMode && (
 						<Editor isLoading={ isSiteEditorLoading } />
 					),
 				},
@@ -188,7 +196,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -201,7 +209,7 @@ export default function useLayoutAreas() {
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile: canvas === 'edit' && (
+			mobile: hasEditCanvasMode && (
 				<Editor isLoading={ isSiteEditorLoading } />
 			),
 		},

packages/edit-site/src/store/private-actions.js

@@ -13,10 +13,10 @@ import { store as editorStore } from '@wordpress/editor';
 export const setCanvasMode =
 	( mode ) =>
 	( { registry, dispatch } ) => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
 		const switchCanvasMode = () => {
 			registry.batch( () => {
-				const isMediumOrBigger =
-					window.matchMedia( '(min-width: 782px)' ).matches;
 				registry.dispatch( blockEditorStore ).clearSelectedBlock();
 				registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
 				registry
@@ -59,7 +59,11 @@ export const setCanvasMode =
 			} );
 		};
 
-		if ( ! document.startViewTransition ) {
+		/*
+		 * Skip transition in mobile, otherwise it crashes the browser.
+		 * See: https://github.com/WordPress/gutenberg/pull/63002.
+		 */
+		if ( ! isMediumOrBigger || ! document.startViewTransition ) {
 			switchCanvasMode();
 		} else {
 			document.documentElement.classList.add(