Block list: Add option in editor settings to show open list view as default

packages/edit-post/src/components/layout/index.js

@@ -72,6 +72,7 @@ function Layout( { styles } ) {
 		setIsInserterOpened,
 	} = useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { setIsListViewOpened } = useDispatch( editPostStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -89,6 +90,7 @@ function Layout( { styles } ) {
 		showBlockBreadcrumbs,
 		isTemplateMode,
 		documentLabel,
+		isListViewOpenByDefault,
 	} = useSelect( ( select ) => {
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
@@ -129,6 +131,9 @@ function Layout( { styles } ) {
 			),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			isListViewOpenByDefault: select( editPostStore ).isFeatureActive(
+				'showListViewByDefault'
+			),
 		};
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
@@ -142,6 +147,13 @@ function Layout( { styles } ) {
 			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
 		);
 
+	// Check if the block list view should be open by default.
+	useEffect( () => {
+		if ( isListViewOpenByDefault ) {
+			setIsListViewOpened( true );
+		}
+	}, [] );
+
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
@@ -181,6 +193,7 @@ function Layout( { styles } ) {
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
 		}
+
 		return null;
 	};
 

packages/edit-post/src/components/preferences-modal/index.js

@@ -115,6 +115,13 @@ export default function EditPostPreferencesModal() {
 								) }
 								label={ __( 'Spotlight mode' ) }
 							/>
+							<EnableFeature
+								featureName="showListViewByDefault"
+								help={ __(
+									'Opens the block list view sidebar by default.'
+								) }
+								label={ __( 'Always open list view' ) }
+							/>
 							<EnableFeature
 								featureName="showIconLabels"
 								help={ __( 'Shows text instead of icons.' ) }

packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -32,6 +32,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 help="Highlights the current block and fades other content."
                 label="Spotlight mode"
               />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="showListViewByDefault"
+                help="Opens the block list view sidebar by default."
+                label="Always open list view"
+              />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="showIconLabels"
                 help="Shows text instead of icons."
@@ -158,6 +163,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                 help="Highlights the current block and fades other content."
                 label="Spotlight mode"
               />
+              <WithSelect(WithDispatch(BaseOption))
+                featureName="showListViewByDefault"
+                help="Opens the block list view sidebar by default."
+                label="Always open list view"
+              />
               <WithSelect(WithDispatch(BaseOption))
                 featureName="showIconLabels"
                 help="Shows text instead of icons."

packages/edit-site/src/components/editor/index.js

@@ -66,6 +66,7 @@ function Editor( { onError } ) {
 		nextShortcut,
 		editorMode,
 		showIconLabels,
+		isListViewOpenByDefault,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -114,9 +115,15 @@ function Editor( { onError } ) {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			isListViewOpenByDefault: select( preferencesStore ).get(
+				'core/edit-site',
+				'showListViewByDefault'
+			),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setPage, setIsInserterOpened, setIsListViewOpened } = useDispatch(
+		editSiteStore
+	);
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	const [
@@ -152,6 +159,13 @@ function Editor( { onError } ) {
 		[ page?.context ]
 	);
 
+	// Check if the block list view should be open by default.
+	useEffect( () => {
+		if ( isListViewOpenByDefault ) {
+			setIsListViewOpened( true );
+		}
+	}, [] );
+
 	useEffect( () => {
 		if ( isNavigationOpen ) {
 			document.body.classList.add( 'is-navigation-sidebar-open' );

packages/edit-site/src/components/preferences-modal/index.js

@@ -41,6 +41,13 @@ export default function EditSitePreferencesModal( {
 						label={ __( 'Show button text labels' ) }
 						help={ __( 'Show text instead of icons on buttons' ) }
 					/>
+					<EnableFeature
+						featureName="showListViewByDefault"
+						help={ __(
+							'Opens the block list view sidebar by default.'
+						) }
+						label={ __( 'Always open list view' ) }
+					/>
 				</PreferencesModalSection>
 			),
 		},

test/e2e/README.md

@@ -68,7 +68,7 @@ npm run test-e2e:playwright
 npm run test-e2e:playwright -- --headed
 
 # Run a single test file.
-npm run test-e2e:playwright -- <path_to_test_file>
+npm run test-e2e:playwright -- <path_to_test_file> # E.g., npm run test-e2e:playwright -- site-editor/title.spec.js
 
 # Debugging
 npm run test-e2e:playwright -- --debug

test/e2e/specs/site-editor/block-list-panel-preference.spec.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block list view', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should open by default', async ( { page, pageUtils } ) => {
+		await pageUtils.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+		} );
+
+		// Should display the Preview button.
+		await expect(
+			page.locator( '.edit-site-editor__list-view-panel' )
+		).not.toBeVisible();
+
+		// Turn on block list view by default.
+		await page.evaluate( () => {
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'showListViewByDefault', true );
+		} );
+
+		await page.reload();
+
+		// Should display the Preview button.
+		await expect(
+			page.locator( '.edit-site-editor__list-view-panel' )
+		).toBeVisible();
+	} );
+} );