From f247618df7b91d5443bafa0cfc0635910c4ea57f Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 1 Jul 2024 14:04:22 +1000
Subject: [PATCH 1/3] In mobile mode, check for canvas edit mode so the "Edit"
 callback redirect the browser to the block editor in edit mode

---
 .../edit-site/src/components/layout/router.js | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 36ca52088f6a8f..4637b9e1f61100 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/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 />,
 		},
 	};
 }

From 1a8c9485ca364ed9c7b9a35b544332613be18254 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 2 Jul 2024 12:05:53 +1000
Subject: [PATCH 2/3] 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.

---
 packages/edit-site/src/store/private-actions.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
index bd56e30f10d11d..b47de8f46e89e0 100644
--- a/packages/edit-site/src/store/private-actions.js
+++ b/packages/edit-site/src/store/private-actions.js
@@ -13,15 +13,15 @@ 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
 					.dispatch( blockEditorStore )
-					.__unstableSetEditorMode( 'edit' );
+					.__unstableSetEditorMode( mode );
 				const isPublishSidebarOpened = registry
 					.select( editorStore )
 					.isPublishSidebarOpened();
@@ -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(

From 245ca5315ffde65679ff9e454718005d2a37ba0b Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 2 Jul 2024 20:20:16 +1000
Subject: [PATCH 3/3] Revert unintentional change

---
 packages/edit-site/src/store/private-actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
index b47de8f46e89e0..37164690ed7fca 100644
--- a/packages/edit-site/src/store/private-actions.js
+++ b/packages/edit-site/src/store/private-actions.js
@@ -21,7 +21,7 @@ export const setCanvasMode =
 				registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
 				registry
 					.dispatch( blockEditorStore )
-					.__unstableSetEditorMode( mode );
+					.__unstableSetEditorMode( 'edit' );
 				const isPublishSidebarOpened = registry
 					.select( editorStore )
 					.isPublishSidebarOpened();