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

…efault (#40757)

* initial commit

* Added option to site editor

* Change key to `showListViewByDefault`
Add basic e2e test
Update snapshots
Add example single test run to playwright readme

* Use `name` in locator selector

* Move dispatch to initialize editor methods to avoid unnecessary re-renders using useEffect

* Set default value of showListViewByDefault to `false` in the post editor.

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

@@ -181,6 +181,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-post/src/index.js

@@ -117,12 +117,19 @@ export function initializeEditor(
 		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
+		showListViewByDefault: false,
 		themeStyles: true,
 		welcomeGuide: true,
 		welcomeGuideTemplate: true,
 	} );
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+
+	// Check if the block list view should be open by default.
+	if ( select( editPostStore ).isFeatureActive( 'showListViewByDefault' ) ) {
+		dispatch( editPostStore ).setIsListViewOpened( true );
+	}
+
 	registerCoreBlocks();
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {

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>
 			),
 		},

packages/edit-site/src/index.js

@@ -64,8 +64,19 @@ export function reinitializeEditor( target, settings ) {
 			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
+			shouldListViewOpenByDefault: false,
 		} );
 
+		// Check if the block list view should be open by default.
+		if (
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showListViewByDefault'
+			)
+		) {
+			dispatch( editSiteStore ).setIsListViewOpened( true );
+		}
+
 		dispatch( editSiteStore ).updateSettings( settings );
 
 		// Keep the defaultTemplateTypes in the core/editor settings too,

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( 'role=region[name="List View"i]' )
+		).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( 'role=region[name="List View"i]' )
+		).toBeVisible();
+	} );
+} );