From f60ca37718337f64b9a446b684c81d3ab4f07d4d Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 10 May 2022 16:59:50 +1000
Subject: [PATCH] Block list: Add option in editor settings to show open list
 view as default (#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.
---
 .../edit-post/src/components/layout/index.js  |  1 +
 .../src/components/preferences-modal/index.js |  7 ++++
 .../test/__snapshots__/index.js.snap          | 10 +++++
 packages/edit-post/src/index.js               |  7 ++++
 .../src/components/preferences-modal/index.js |  7 ++++
 packages/edit-site/src/index.js               | 11 +++++
 test/e2e/README.md                            |  2 +-
 .../block-list-panel-preference.spec.js       | 40 +++++++++++++++++++
 8 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/specs/site-editor/block-list-panel-preference.spec.js

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index d2452fe0fae6cd..5848da7b5b9b9d 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -181,6 +181,7 @@ function Layout( { styles } ) {
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
 		}
+
 		return null;
 	};
 
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 392099aae3300f..1ce688576b6576 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/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.' ) }
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 8648e9c4ced319..3079f973185999 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/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."
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 6ff6a7603d89f0..68e3d4ba76bbd8 100644
--- a/packages/edit-post/src/index.js
+++ b/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( {
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
index f0d1db034f2a44..67efb40363e098 100644
--- a/packages/edit-site/src/components/preferences-modal/index.js
+++ b/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>
 			),
 		},
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 51045481291df4..2451f4cff3592e 100644
--- a/packages/edit-site/src/index.js
+++ b/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,
diff --git a/test/e2e/README.md b/test/e2e/README.md
index 0a6ecdc3121915..f1fb3d42c7898a 100644
--- a/test/e2e/README.md
+++ b/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
diff --git a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
new file mode 100644
index 00000000000000..16a958eddbcc44
--- /dev/null
+++ b/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();
+	} );
+} );