Editor: Do not open list view by default on mobile (#59016)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 15, 2024 · 3242ca9 · 3242ca9 · github-actions · Feb 15, 2024
1 parent e3f3c3d
commit 3242ca9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -49,6 +49,7 @@ export function initializeEditor(
 	settings,
 	initialEdits
 ) {
+	const isMediumOrBigger = window.matchMedia( '(min-width: 782px)' ).matches;
 	const target = document.getElementById( id );
 	const root = createRoot( target );
 
@@ -76,7 +77,9 @@ export function initializeEditor(
 
 	// 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 &&
 		select( preferencesStore ).get( 'core', 'showListViewByDefault' ) &&
 		! select( preferencesStore ).get( 'core', 'distractionFree' )
 	) {

diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
@@ -22,14 +22,18 @@ import { TEMPLATE_POST_TYPE } from '../utils/constants';
 export const setCanvasMode =
 	( mode ) =>
 	( { registry, dispatch } ) => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
 			mode,
 		} );
 		// 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 &&
 			mode === 'edit' &&
 			registry
 				.select( preferencesStore )