Post Editor: Persistent list view (#31047)

* Move the Inserter sidebar in its own file * Add the new list view state * Add the list view sidebar * Bring changes to the e2e tests * Fix incorrect class name * Add missing dependencies array * Fix shortcuts * On select block, move caret to the end of its text * Fix e2e test * Fix incorrect action prop * update edit-post-layout references * fix e2e tests Co-authored-by: ntsekouras <ntsekouras@outlook.com>
WordPress · May 17, 2021 · e07c5d7 · e07c5d7
1 parent a939c4f
commit e07c5d7
Show file tree

Hide file tree

Showing 21 changed files with 446 additions and 131 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -4,11 +4,7 @@
 import { Button, Dropdown } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { useCallback, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { listView } from '@wordpress/icons';
 
 /**
@@ -24,22 +20,6 @@ function BlockNavigationDropdownToggle( {
 	innerRef,
 	...props
 } ) {
-	useShortcut(
-		'core/edit-post/toggle-block-navigation',
-		useCallback( onToggle, [ onToggle ] ),
-		{
-			bindGlobal: true,
-			isDisabled: ! isEnabled,
-		}
-	);
-	const shortcut = useSelect(
-		( select ) =>
-			select( keyboardShortcutsStore ).getShortcutRepresentation(
-				'core/edit-post/toggle-block-navigation'
-			),
-		[]
-	);
-
 	return (
 		<Button
 			{ ...props }
@@ -51,7 +31,6 @@ function BlockNavigationDropdownToggle( {
 			/* translators: button label text should, if possible, be under 16 characters. */
 			label={ __( 'List view' ) }
 			className="block-editor-block-navigation"
-			shortcut={ shortcut }
 			aria-disabled={ ! isEnabled }
 		/>
 	);

diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js
@@ -18,7 +18,7 @@ describe( 'Columns', () => {
 		await insertBlock( 'Columns' );
 		await closeGlobalBlockInserter();
 		await page.click( '[aria-label="Two columns; equal split"]' );
-		await page.click( '[aria-label="List view"]' );
+		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnBlockMenuItem = (
 			await page.$x(
 				'//button[contains(concat(" ", @class, " "), " block-editor-block-navigation-block-select-button ")][text()="Column"]'

diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
@@ -24,7 +24,7 @@ describe( 'Cover', () => {
 		);
 
 		// Select the cover block.By default the child paragraph gets selected.
-		await page.click( 'button[aria-label="List view"]' );
+		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		await page.click(
 			'.block-editor-block-navigation-block__contents-container button'
 		);

diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -50,7 +50,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.type( 'First column' );
 
 		// Navigate to the columns blocks.
-		await page.click( '[aria-label="List view"]' );
+		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Columns')]"
@@ -68,8 +68,13 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.up( 'Shift' );
 		await page.keyboard.type( '3' );
 
+		// Wait for the new column block to appear in the list view
+		// 5 = Columns, Column, Paragraph, Column, *Column*
+		await page.waitForSelector(
+			'tr.block-editor-block-navigation-leaf:nth-of-type(5)'
+		);
+
 		// Navigate to the last column block.
-		await page.click( '[aria-label="List view"]' );
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Column')]"
@@ -103,6 +108,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Navigate to the columns blocks using the keyboard.
 		await openBlockNavigator();
+		await pressKeyTimes( 'ArrowUp', 2 );
 		await page.keyboard.press( 'Enter' );
 
 		// Move focus to the sidebar area.
@@ -115,7 +121,9 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.press( 'ArrowRight' );
 
 		// Navigate to the last column in the columns block.
-		await openBlockNavigator();
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyTimes( 'Tab', 2 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.keyboard.press( 'Enter' );
 		await page.waitForSelector( '.is-selected[data-type="core/column"]' );
@@ -145,6 +153,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Return to first block.
 		await openBlockNavigator();
+		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'Space' );
 
 		// Replace its content.
@@ -175,7 +184,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.editor-post-title' );
 
 		// Try selecting the group block using the Outline
-		await page.click( '[aria-label="List view"]' );
+		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Group')]"

diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -299,7 +299,7 @@ describe( 'Inserting blocks', () => {
 		);
 		await browseAll.click();
 		const inserterMenuInputSelector =
-			'.edit-post-layout__inserter-panel .block-editor-inserter__search-input';
+			'.edit-post-editor__inserter-panel .block-editor-inserter__search-input';
 		const inserterMenuSearchInput = await page.waitForSelector(
 			inserterMenuInputSelector
 		);
@@ -374,7 +374,7 @@ describe( 'Inserting blocks', () => {
 
 		// The inserter panel should've closed.
 		const inserterPanels = await page.$$(
-			'.edit-post-layout__inserter-panel'
+			'.edit-post-editor__inserter-panel'
 		);
 		expect( inserterPanels.length ).toBe( 0 );
 

diff --git a/packages/e2e-tests/specs/experiments/document-settings.test.js b/packages/e2e-tests/specs/experiments/document-settings.test.js
@@ -55,7 +55,9 @@ describe( 'Document Settings', () => {
 		describe( 'and a template part is clicked in the template', () => {
 			it.skip( "should display the selected template part's name in the document header", async () => {
 				// Select the header template part via list view.
-				await page.click( 'button[aria-label="List View"]' );
+				await page.click(
+					'.edit-post-header-toolbar__list-view-toggle'
+				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
 					'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
 				);

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -232,7 +232,7 @@ describe( 'Multi-entity save flow', () => {
 			await navigationPanel.clickItemByText( 'Index' );
 
 			// Select the header template part via list view.
-			await page.click( 'button[aria-label="List View"]' );
+			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
 				'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
 			);

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -6,18 +6,19 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
 	NavigableToolbar,
-	BlockNavigationDropdown,
 	ToolSelector,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
+	store as editorStore,
 } from '@wordpress/editor';
 import { Button, ToolbarItem } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
+import { listView, plus } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -27,32 +28,42 @@ import { store as editPostStore } from '../../../store';
 
 function HeaderToolbar() {
 	const inserterButton = useRef();
-	const { setIsInserterOpened } = useDispatch( editPostStore );
+	const { setIsInserterOpened, setIsListViewOpened } = useDispatch(
+		editPostStore
+	);
 	const {
 		isInserterEnabled,
 		isInserterOpened,
 		isTextModeEnabled,
 		showIconLabels,
+		isListViewOpen,
+		listViewShortcut,
 	} = useSelect( ( select ) => {
 		const {
 			hasInserterItems,
 			getBlockRootClientId,
 			getBlockSelectionEnd,
 		} = select( blockEditorStore );
+		const { getEditorSettings } = select( editorStore );
+		const { getEditorMode, isFeatureActive, isListViewOpened } = select(
+			editPostStore
+		);
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
 		return {
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
-				select( editPostStore ).getEditorMode() === 'visual' &&
-				select( 'core/editor' ).getEditorSettings()
-					.richEditingEnabled &&
+				getEditorMode() === 'visual' &&
+				getEditorSettings().richEditingEnabled &&
 				hasInserterItems(
 					getBlockRootClientId( getBlockSelectionEnd() )
 				),
 			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isTextModeEnabled:
-				select( editPostStore ).getEditorMode() === 'text',
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
+			isTextModeEnabled: getEditorMode() === 'text',
+			showIconLabels: isFeatureActive( 'showIconLabels' ),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation(
+				'core/edit-post/toggle-block-navigation'
 			),
 		};
 	}, [] );
@@ -72,10 +83,16 @@ function HeaderToolbar() {
 				isTertiary={ showIconLabels }
 			/>
 			<ToolbarItem
-				as={ BlockNavigationDropdown }
-				isDisabled={ isTextModeEnabled }
+				as={ Button }
+				className="edit-post-header-toolbar__list-view-toggle"
+				icon={ listView }
+				disabled={ isTextModeEnabled }
+				isPressed={ isListViewOpen }
+				/* translators: button label text should, if possible, be under 16 characters. */
+				label={ __( 'List View' ) }
+				onClick={ () => setIsListViewOpened( ! isListViewOpen ) }
+				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }
-				isTertiary={ showIconLabels }
 			/>
 		</>
 	);

diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -8,18 +8,24 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getBlockSelectionStart } = useSelect( 'core/block-editor' );
-	const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
+	const {
+		getEditorMode,
+		isEditorSidebarOpened,
+		isListViewOpened,
+	} = useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
 		const { richEditingEnabled, codeEditingEnabled } = select(
-			'core/editor'
+			editorStore
 		).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
@@ -29,6 +35,7 @@ function KeyboardShortcuts() {
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		toggleFeature,
+		setIsListViewOpened,
 	} = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
@@ -158,6 +165,12 @@ function KeyboardShortcuts() {
 		{ bindGlobal: true }
 	);
 
+	useShortcut(
+		'core/edit-post/toggle-block-navigation',
+		() => setIsListViewOpened( ! isListViewOpened() ),
+		{ bindGlobal: true }
+	);
+
 	return null;
 }