Site Editor: patterns and templates cannot be edited from sidebar mob…

…ile 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>

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

@@ -75,6 +75,7 @@ function useRedirectOldPaths() {
 export default function useLayoutAreas() {
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
@@ -91,13 +92,12 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PostsList postType={ postType } />,
-				preview: ( isListLayout || canvas === 'edit' ) && <Editor />,
-				mobile:
-					canvas === 'edit' ? (
-						<Editor />
-					) : (
-						<PostsList postType={ postType } />
-					),
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? (
+					<Editor />
+				) : (
+					<PostsList postType={ postType } />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -115,8 +115,8 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && <Editor />,
-				mobile: <PageTemplates />,
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -133,8 +133,8 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && <Editor />,
+				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
+				preview: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -148,7 +148,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
 				preview: <Editor />,
-				mobile: canvas === 'edit' && <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -165,7 +165,7 @@ export default function useLayoutAreas() {
 						/>
 					),
 					preview: <Editor />,
-					mobile: canvas === 'edit' && <Editor />,
+					mobile: hasEditCanvasMode && <Editor />,
 				},
 			};
 		}
@@ -176,7 +176,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
 				preview: <Editor />,
-				mobile: canvas === 'edit' && <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -187,7 +187,7 @@ export default function useLayoutAreas() {
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor />,
-			mobile: canvas === 'edit' && <Editor />,
+			mobile: hasEditCanvasMode && <Editor />,
 		},
 	};
 }

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(