From 5a98254888414520153c56f891a16b03e16a7da6 Mon Sep 17 00:00:00 2001
From: Jacopo Tomasone <Copons@users.noreply.github.com>
Date: Tue, 2 Mar 2021 11:08:06 +0000
Subject: [PATCH] Site Editor: Persistent List View (#28637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert the List View dropdown into a persistent sidebar occupying the same interface skeleton slot as the Inserter (`secondarySidebar`).

This change is currently experimental, and is only enabled in the Site Editor.

Props @Addison-Stavlo ✨

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 .../src/components/block-navigation/block.js  | 45 ++++++++--
 .../components/block-navigation/context.js    |  1 +
 .../components/block-navigation/dropdown.js   | 18 +---
 .../src/components/block-navigation/tree.js   | 13 ++-
 .../src/navigation/use-block-navigator.js     | 16 +---
 .../specs/editor/blocks/columns.test.js       |  2 +-
 .../specs/editor/blocks/cover.test.js         |  2 +-
 .../block-hierarchy-navigation.test.js        |  6 +-
 .../edit-site/src/components/editor/index.js  | 63 ++++----------
 .../src/components/editor/style.scss          | 26 ------
 .../edit-site/src/components/header/index.js  | 27 +++++-
 .../components/keyboard-shortcuts/index.js    | 38 +++++++-
 .../secondary-sidebar/inserter-sidebar.js     | 43 +++++++++
 .../secondary-sidebar/list-view-sidebar.js    | 84 ++++++++++++++++++
 .../components/secondary-sidebar/style.scss   | 51 +++++++++++
 packages/edit-site/src/store/actions.js       | 13 +++
 packages/edit-site/src/store/reducer.js       | 33 ++++++-
 packages/edit-site/src/store/selectors.js     | 11 +++
 packages/edit-site/src/store/test/actions.js  | 14 +++
 packages/edit-site/src/store/test/reducer.js  | 87 +++++++++++++++++++
 .../edit-site/src/store/test/selectors.js     | 12 +++
 packages/edit-site/src/style.scss             |  1 +
 packages/icons/src/index.js                   |  1 +
 packages/icons/src/library/list-view.js       | 12 +++
 24 files changed, 492 insertions(+), 127 deletions(-)
 create mode 100644 packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
 create mode 100644 packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
 create mode 100644 packages/edit-site/src/components/secondary-sidebar/style.scss
 create mode 100644 packages/icons/src/library/list-view.js

diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
index 8d8b1a9d0db812..d191f692b77343 100644
--- a/packages/block-editor/src/components/block-navigation/block.js
+++ b/packages/block-editor/src/components/block-navigation/block.js
@@ -43,7 +43,6 @@ export default function BlockNavigationBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const [ isFocused, setIsFocused ] = useState( false );
 	const { clientId } = block;
 	const { isDragging, blockParents } = useSelect(
 		( select ) => {
@@ -63,38 +62,66 @@ export default function BlockNavigationBlock( {
 		[ clientId ]
 	);
 
-	const { selectBlock: selectEditorBlock } = useDispatch( blockEditorStore );
+	const {
+		selectBlock: selectEditorBlock,
+		toggleBlockHighlight,
+	} = useDispatch( blockEditorStore );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const hasVisibleMovers = isHovered || isFocused;
 	const moverCellClassName = classnames(
 		'block-editor-block-navigation-block__mover-cell',
-		{ 'is-visible': hasVisibleMovers }
+		{ 'is-visible': isHovered }
 	);
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
+		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
 	} = useBlockNavigationContext();
 	const blockNavigationBlockSettingsClassName = classnames(
 		'block-editor-block-navigation-block__menu-cell',
-		{ 'is-visible': hasVisibleMovers }
+		{ 'is-visible': isHovered }
 	);
+
+	// If BlockNavigation has experimental features related to the Persistent List View,
+	// only focus the selected list item on mount; otherwise the list would always
+	// try to steal the focus from the editor canvas.
+	useEffect( () => {
+		if ( withExperimentalPersistentListViewFeatures && isSelected ) {
+			cellRef.current.focus();
+		}
+	}, [] );
+
+	// If BlockNavigation has experimental features (such as drag and drop) enabled,
+	// leave the focus handling as it was before, to avoid accidental regressions.
 	useEffect( () => {
 		if ( withExperimentalFeatures && isSelected ) {
 			cellRef.current.focus();
 		}
 	}, [ withExperimentalFeatures, isSelected ] );
 
+	const highlightBlock = withExperimentalPersistentListViewFeatures
+		? toggleBlockHighlight
+		: () => {};
+
+	const onMouseEnter = () => {
+		setIsHovered( true );
+		highlightBlock( clientId, true );
+	};
+	const onMouseLeave = () => {
+		setIsHovered( false );
+		highlightBlock( clientId, false );
+	};
+
 	return (
 		<BlockNavigationLeaf
 			className={ classnames( {
 				'is-selected': isSelected,
 				'is-dragging': isDragging,
 			} ) }
-			onMouseEnter={ () => setIsHovered( true ) }
-			onMouseLeave={ () => setIsHovered( false ) }
-			onFocus={ () => setIsFocused( true ) }
-			onBlur={ () => setIsFocused( false ) }
+			onMouseEnter={ onMouseEnter }
+			onMouseLeave={ onMouseLeave }
+			onFocus={ onMouseEnter }
+			onBlur={ onMouseLeave }
 			level={ level }
 			position={ position }
 			rowCount={ rowCount }
diff --git a/packages/block-editor/src/components/block-navigation/context.js b/packages/block-editor/src/components/block-navigation/context.js
index 1ed2527d1916fc..85cde846a826a5 100644
--- a/packages/block-editor/src/components/block-navigation/context.js
+++ b/packages/block-editor/src/components/block-navigation/context.js
@@ -5,6 +5,7 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const BlockNavigationContext = createContext( {
 	__experimentalFeatures: false,
+	__experimentalPersistentListViewFeatures: false,
 } );
 
 export const useBlockNavigationContext = () =>
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index c639078f776ebb..b72d879d6762e4 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button, Dropdown, SVG, Path } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import {
@@ -9,6 +9,7 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { useCallback, forwardRef } from '@wordpress/element';
+import { listView } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,17 +17,6 @@ import { useCallback, forwardRef } from '@wordpress/element';
 import BlockNavigation from './';
 import { store as blockEditorStore } from '../../store';
 
-const MenuIcon = (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		width="24"
-		height="24"
-	>
-		<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
-	</SVG>
-);
-
 function BlockNavigationDropdownToggle( {
 	isEnabled,
 	onToggle,
@@ -54,12 +44,12 @@ function BlockNavigationDropdownToggle( {
 		<Button
 			{ ...props }
 			ref={ innerRef }
-			icon={ MenuIcon }
+			icon={ listView }
 			aria-expanded={ isOpen }
 			aria-haspopup="true"
 			onClick={ isEnabled ? onToggle : undefined }
 			/* translators: button label text should, if possible, be under 16 characters. */
-			label={ __( 'Outline' ) }
+			label={ __( 'List view' ) }
 			className="block-editor-block-navigation"
 			shortcut={ shortcut }
 			aria-disabled={ ! isEnabled }
diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/block-navigation/tree.js
index 184ec4921b1187..9fc9e42ab93a65 100644
--- a/packages/block-editor/src/components/block-navigation/tree.js
+++ b/packages/block-editor/src/components/block-navigation/tree.js
@@ -18,11 +18,13 @@ import useBlockNavigationDropZone from './use-block-navigation-drop-zone';
  * recursive component (it renders itself), so this ensures TreeGrid is only
  * present at the very top of the navigation grid.
  *
- * @param {Object} props                        Components props.
- * @param {Object} props.__experimentalFeatures Object used in context provider.
+ * @param {Object}  props                                          Components props.
+ * @param {boolean} props.__experimentalFeatures                   Flag to enable experimental features.
+ * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
  */
 export default function BlockNavigationTree( {
 	__experimentalFeatures,
+	__experimentalPersistentListViewFeatures,
 	...props
 } ) {
 	const treeGridRef = useRef();
@@ -35,9 +37,14 @@ export default function BlockNavigationTree( {
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
+			__experimentalPersistentListViewFeatures,
 			blockDropTarget,
 		} ),
-		[ __experimentalFeatures, blockDropTarget ]
+		[
+			__experimentalFeatures,
+			__experimentalPersistentListViewFeatures,
+			blockDropTarget,
+		]
 	);
 
 	return (
diff --git a/packages/block-library/src/navigation/use-block-navigator.js b/packages/block-library/src/navigation/use-block-navigator.js
index 1ebf9118d0fdb4..688fb304af3783 100644
--- a/packages/block-library/src/navigation/use-block-navigator.js
+++ b/packages/block-library/src/navigation/use-block-navigator.js
@@ -2,25 +2,15 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { ToolbarButton, SVG, Path, Modal } from '@wordpress/components';
+import { ToolbarButton, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockNavigationList from './block-navigation-list';
 
-const NavigatorIcon = (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		width="24"
-		height="24"
-	>
-		<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
-	</SVG>
-);
-
 export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 	const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false );
 
@@ -29,7 +19,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 			className="components-toolbar__control"
 			label={ __( 'Open block navigator' ) }
 			onClick={ () => setIsNavigationListOpen( true ) }
-			icon={ NavigatorIcon }
+			icon={ listView }
 		/>
 	);
 
diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js
index a8d8ed25762698..5af26b0f59d3b5 100644
--- 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="Outline"]' );
+		await page.click( '[aria-label="List view"]' );
 		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
index a5be8cbe5b98ab..8850a1bfecfdde 100644
--- 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="Outline"]' );
+		await page.click( 'button[aria-label="List view"]' );
 		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
index 7295b412907e2f..df09b44f4b23e2 100644
--- 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="Outline"]' );
+		await page.click( '[aria-label="List view"]' );
 		const columnsBlockMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Columns')]"
@@ -69,7 +69,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.keyboard.type( '3' );
 
 		// Navigate to the last column block.
-		await page.click( '[aria-label="Outline"]' );
+		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')]"
@@ -175,7 +175,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="Outline"]' );
+		await page.click( '[aria-label="List view"]' );
 		const groupMenuItem = (
 			await page.$x(
 				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Group')]"
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 1c056ab93be4bc..9b5d8a0962d4c2 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -10,11 +10,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { EntityProvider } from '@wordpress/core-data';
-import {
-	BlockContextProvider,
-	BlockBreadcrumb,
-	__experimentalLibrary as Library,
-} from '@wordpress/block-editor';
+import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
 	FullscreenMode,
 	InterfaceSkeleton,
@@ -24,11 +20,6 @@ import {
 import { EntitiesSavedStates, UnsavedChangesWarning } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
-import { close } from '@wordpress/icons';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -41,6 +32,8 @@ import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import NavigationSidebar from '../navigation-sidebar';
 import URLQueryController from '../url-query-controller';
+import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
+import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import { store as editSiteStore } from '../../store';
 
 const interfaceLabels = {
@@ -52,6 +45,7 @@ function Editor( { initialSettings } ) {
 	const {
 		isFullscreenActive,
 		isInserterOpen,
+		isListViewOpen,
 		sidebarIsOpened,
 		settings,
 		entityId,
@@ -63,6 +57,7 @@ function Editor( { initialSettings } ) {
 		const {
 			isFeatureActive,
 			isInserterOpened,
+			isListViewOpened,
 			getSettings,
 			getEditedPostType,
 			getEditedPostId,
@@ -79,6 +74,7 @@ function Editor( { initialSettings } ) {
 		// The currently selected entity to display. Typically template or template part.
 		return {
 			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			sidebarIsOpened: !! select(
 				interfaceStore
@@ -155,17 +151,21 @@ function Editor( { initialSettings } ) {
 		}
 	}, [ isNavigationOpen ] );
 
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-	} );
-
 	// Don't render the Editor until the settings are set and loaded
 	if ( ! settings?.siteUrl ) {
 		return null;
 	}
 
+	const secondarySidebar = () => {
+		if ( isInserterOpen ) {
+			return <InserterSidebar />;
+		}
+		if ( isListViewOpen ) {
+			return <ListViewSidebar />;
+		}
+		return null;
+	};
+
 	return (
 		<>
 			<URLQueryController />
@@ -197,36 +197,7 @@ function Editor( { initialSettings } ) {
 										<InterfaceSkeleton
 											labels={ interfaceLabels }
 											drawer={ <NavigationSidebar /> }
-											secondarySidebar={
-												isInserterOpen ? (
-													<div
-														ref={
-															inserterDialogRef
-														}
-														{ ...inserterDialogProps }
-														className="edit-site-editor__inserter-panel"
-													>
-														<div className="edit-site-editor__inserter-panel-header">
-															<Button
-																icon={ close }
-																onClick={ () =>
-																	setIsInserterOpened(
-																		false
-																	)
-																}
-															/>
-														</div>
-														<div className="edit-site-editor__inserter-panel-content">
-															<Library
-																showInserterHelpPanel
-																shouldFocusBlock={
-																	isMobile
-																}
-															/>
-														</div>
-													</div>
-												) : null
-											}
+											secondarySidebar={ secondarySidebar() }
 											sidebar={
 												sidebarIsOpened && (
 													<ComplementaryArea.Slot scope="core/edit-site" />
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index b400e93cce2a98..65f41f0b82cacb 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -31,29 +31,3 @@
 		background-color: $white;
 	}
 }
-
-.edit-site-editor__inserter-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.edit-site-editor__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
-.edit-site-editor__inserter-panel-content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-
-	@include break-medium() {
-		height: 100%;
-	}
-}
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 4bf2886f020e04..eff62335460e43 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -4,16 +4,16 @@
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	BlockNavigationDropdown,
 	ToolSelector,
 	BlockToolbar,
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
-import { _x } from '@wordpress/i18n';
-import { plus } from '@wordpress/icons';
+import { _x, __ } from '@wordpress/i18n';
+import { listView, plus } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -35,6 +35,8 @@ export default function Header( { openEntitiesSavedStates } ) {
 		template,
 		templateType,
 		isInserterOpen,
+		isListViewOpen,
+		listViewShortcut,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -42,11 +44,13 @@ export default function Header( { openEntitiesSavedStates } ) {
 			getEditedPostType,
 			getEditedPostId,
 			isInserterOpened,
+			isListViewOpened,
 		} = select( editSiteStore );
 		const { getEntityRecord } = select( 'core' );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
 			'core/editor'
 		);
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
@@ -63,12 +67,17 @@ export default function Header( { openEntitiesSavedStates } ) {
 			template: record,
 			templateType: postType,
 			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation(
+				'core/edit-site/toggle-list-view'
+			),
 		};
 	}, [] );
 
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
+		setIsListViewOpened,
 	} = useDispatch( editSiteStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -106,7 +115,17 @@ export default function Header( { openEntitiesSavedStates } ) {
 							<ToolSelector />
 							<UndoButton />
 							<RedoButton />
-							<BlockNavigationDropdown />
+							<Button
+								className="edit-site-header-toolbar__list-view-toggle"
+								icon={ listView }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'List View' ) }
+								onClick={ () =>
+									setIsListViewOpened( ! isListViewOpen )
+								}
+								shortcut={ listViewShortcut }
+							/>
 						</>
 					) }
 					{ displayBlockToolbar && (
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js
index 75fe5b085c31d6..ec184887691a54 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js
@@ -1,16 +1,26 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { redo, undo } = useDispatch( 'core' );
+	const isListViewOpen = useSelect( ( select ) =>
+		select( editSiteStore ).isListViewOpened()
+	);
+	const { redo, undo } = useDispatch( coreStore );
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut(
 		'core/edit-site/undo',
@@ -30,6 +40,18 @@ function KeyboardShortcuts() {
 		{ bindGlobal: true }
 	);
 
+	useShortcut(
+		'core/edit-site/toggle-list-view',
+		useCallback( () => {
+			if ( isListViewOpen ) {
+				setIsListViewOpened( false );
+			} else {
+				setIsListViewOpened( true );
+			}
+		}, [ isListViewOpen, isListViewOpen ] ),
+		{ bindGlobal: true }
+	);
+
 	return null;
 }
 function KeyboardShortcutsRegister() {
@@ -55,6 +77,16 @@ function KeyboardShortcutsRegister() {
 				character: 'z',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/toggle-list-view',
+			category: 'global',
+			description: __( 'Open the block list view.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'o',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;
diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
new file mode 100644
index 00000000000000..92381ff805983c
--- /dev/null
+++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { close } from '@wordpress/icons';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function InserterSidebar() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
+
+	const isMobile = useViewportMatch( 'medium', '<' );
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+	} );
+
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="edit-site-editor__inserter-panel"
+		>
+			<div className="edit-site-editor__inserter-panel-header">
+				<Button
+					icon={ close }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</div>
+			<div className="edit-site-editor__inserter-panel-content">
+				<Library showInserterHelpPanel shouldFocusBlock={ isMobile } />
+			</div>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
new file mode 100644
index 00000000000000..0deaffc1f64b4d
--- /dev/null
+++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalBlockNavigationTree as BlockNavigationTree,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import {
+	useFocusOnMount,
+	useFocusReturn,
+	useInstanceId,
+	useMergeRefs,
+} from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function ListViewSidebar() {
+	const { rootBlocks, selectedBlockClientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, __unstableGetBlockTree } = select(
+			blockEditorStore
+		);
+		return {
+			rootBlocks: __unstableGetBlockTree(),
+			selectedBlockClientId: getSelectedBlockClientId(),
+		};
+	} );
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+
+	const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
+	async function selectEditorBlock( clientId ) {
+		await clearSelectedBlock();
+		selectBlock( clientId );
+	}
+
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const focusReturnRef = useFocusReturn();
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE ) {
+			event.stopPropagation();
+			setIsListViewOpened( false );
+		}
+	}
+
+	const instanceId = useInstanceId( ListViewSidebar );
+	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			aria-labelledby={ labelId }
+			className="edit-site-editor__list-view-panel"
+			onKeyDown={ closeOnEscape }
+		>
+			<div className="edit-site-editor__list-view-panel-header">
+				<strong id={ labelId }>{ __( 'List view' ) }</strong>
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Close list view sidebar' ) }
+					onClick={ () => setIsListViewOpened( false ) }
+				/>
+			</div>
+			<div
+				className="edit-site-editor__list-view-panel-content"
+				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
+			>
+				<BlockNavigationTree
+					blocks={ rootBlocks }
+					selectBlock={ selectEditorBlock }
+					selectedBlockClientId={ selectedBlockClientId }
+					showNestedBlocks
+					__experimentalPersistentListViewFeatures
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss
new file mode 100644
index 00000000000000..d7623ffe2bc935
--- /dev/null
+++ b/packages/edit-site/src/components/secondary-sidebar/style.scss
@@ -0,0 +1,51 @@
+.edit-site-editor__inserter-panel,
+.edit-site-editor__list-view-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-editor__list-view-panel {
+	// Same width as the Inserter.
+	// @see packages/block-editor/src/components/inserter/style.scss
+	min-width: 350px;
+}
+
+.edit-site-editor__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	@include break-medium() {
+		display: none;
+	}
+}
+
+.edit-site-editor__inserter-panel-content,
+.edit-site-editor__list-view-panel-content {
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+}
+
+
+.edit-site-editor__inserter-panel-content {
+	@include break-medium() {
+		height: 100%;
+	}
+}
+
+.edit-site-editor__list-view-panel-header {
+	align-items: center;
+	border-bottom: $border-width solid $gray-300;
+	display: flex;
+	justify-content: space-between;
+	height: $grid-unit-60;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-05;
+}
+
+.edit-site-editor__list-view-panel-content {
+	overflow-y: auto;
+	padding: $grid-unit-10;
+}
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index e24f53309524a6..cd898184de86fb 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -285,3 +285,16 @@ export function updateSettings( settings ) {
 		settings,
 	};
 }
+
+/**
+ * Sets whether the list view panel should be open.
+ *
+ * @param {boolean} isOpen If true, opens the list view. If false, closes it.
+ *                         It does not toggle the state, but sets it directly.
+ */
+export function setIsListViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_LIST_VIEW_OPENED',
+		isOpen,
+	};
+}
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 0a89862d23ec87..0e6c44f7bea240 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -117,8 +117,8 @@ export function homeTemplateId( state, action ) {
  * Reducer for information about the navigation panel, such as its active menu
  * and whether it should be opened or closed.
  *
- * Note: this reducer interacts with the block inserter panel reducer to make
- * sure that only one of the two panels is open at the same time.
+ * Note: this reducer interacts with the inserter and list view panels reducers
+ * to make sure that only one of the three panels is open at the same time.
  *
  * @param {Object} state Current state.
  * @param {Object} action Dispatched action.
@@ -146,6 +146,7 @@ export function navigationPanel(
 				isOpen: action.isOpen,
 			};
 		case 'SET_IS_INSERTER_OPENED':
+		case 'SET_IS_LIST_VIEW_OPENED':
 			return {
 				...state,
 				menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
@@ -158,8 +159,8 @@ export function navigationPanel(
 /**
  * Reducer to set the block inserter panel open or closed.
  *
- * Note: this reducer interacts with the navigation panel reducer to make
- * sure that only one of the two panels is open at the same time.
+ * Note: this reducer interacts with the navigation and list view panels reducers
+ * to make sure that only one of the three panels is open at the same time.
  *
  * @param {Object} state Current state.
  * @param {Object} action Dispatched action.
@@ -169,6 +170,7 @@ export function blockInserterPanel( state = false, action ) {
 		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
 			return false;
 		case 'SET_IS_NAVIGATION_PANEL_OPENED':
+		case 'SET_IS_LIST_VIEW_OPENED':
 			return action.isOpen ? false : state;
 		case 'SET_IS_INSERTER_OPENED':
 			return action.isOpen;
@@ -176,6 +178,28 @@ export function blockInserterPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer to set the list view panel open or closed.
+ *
+ * Note: this reducer interacts with the navigation and inserter panels reducers
+ * to make sure that only one of the three panels is open at the same time.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function listViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
+			return false;
+		case 'SET_IS_NAVIGATION_PANEL_OPENED':
+		case 'SET_IS_INSERTER_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_LIST_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	preferences,
 	deviceType,
@@ -184,4 +208,5 @@ export default combineReducers( {
 	homeTemplateId,
 	navigationPanel,
 	blockInserterPanel,
+	listViewPanel,
 } );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 4bcfd07dc2926e..ab39225a364c8a 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -160,3 +160,14 @@ export function isNavigationOpened( state ) {
 export function isInserterOpened( state ) {
 	return state.blockInserterPanel;
 }
+
+/**
+ * Returns the current opened/closed state of the list view panel.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} True if the list view panel should be open; false if closed.
+ */
+export function isListViewOpened( state ) {
+	return state.listViewPanel;
+}
diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
index 0ad8fdb4af851f..747a65cb97b329 100644
--- a/packages/edit-site/src/store/test/actions.js
+++ b/packages/edit-site/src/store/test/actions.js
@@ -10,6 +10,7 @@ import {
 	setPage,
 	showHomepage,
 	setHomeTemplateId,
+	setIsListViewOpened,
 } from '../actions';
 
 describe( 'actions', () => {
@@ -232,4 +233,17 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should return the SET_IS_LIST_VIEW_OPENED action', () => {
+			expect( setIsListViewOpened( true ) ).toEqual( {
+				type: 'SET_IS_LIST_VIEW_OPENED',
+				isOpen: true,
+			} );
+			expect( setIsListViewOpened( false ) ).toEqual( {
+				type: 'SET_IS_LIST_VIEW_OPENED',
+				isOpen: false,
+			} );
+		} );
+	} );
 } );
diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js
index 9f8263786464bd..2d9ca151ab7eaf 100644
--- a/packages/edit-site/src/store/test/reducer.js
+++ b/packages/edit-site/src/store/test/reducer.js
@@ -13,6 +13,7 @@ import {
 	editedPost,
 	navigationPanel,
 	blockInserterPanel,
+	listViewPanel,
 } from '../reducer';
 import { PREFERENCES_DEFAULTS } from '../defaults';
 
@@ -21,6 +22,7 @@ import {
 	openNavigationPanelToMenu,
 	setIsNavigationPanelOpened,
 	setIsInserterOpened,
+	setIsListViewOpened,
 } from '../actions';
 
 describe( 'state', () => {
@@ -208,6 +210,21 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'should close the navigation panel when opening the list view and change the menu to root', () => {
+			const state = navigationPanel(
+				undefined,
+				openNavigationPanelToMenu( 'test-menu' )
+			);
+
+			expect( state.menu ).toEqual( 'test-menu' );
+			expect(
+				navigationPanel( state, setIsListViewOpened( true ) )
+			).toEqual( {
+				isOpen: false,
+				menu: 'root',
+			} );
+		} );
+
 		it( 'should not change the state when closing the inserter', () => {
 			const state = navigationPanel(
 				undefined,
@@ -219,6 +236,18 @@ describe( 'state', () => {
 				navigationPanel( state, setIsInserterOpened( false ) )
 			).toEqual( state );
 		} );
+
+		it( 'should not change the state when closing the list view', () => {
+			const state = navigationPanel(
+				undefined,
+				openNavigationPanelToMenu( 'test-menu' )
+			);
+
+			expect( state.menu ).toEqual( 'test-menu' );
+			expect(
+				navigationPanel( state, setIsListViewOpened( false ) )
+			).toEqual( state );
+		} );
 	} );
 
 	describe( 'blockInserterPanel()', () => {
@@ -248,10 +277,68 @@ describe( 'state', () => {
 			).toBe( false );
 		} );
 
+		it( 'should close the inserter when opening the list view panel', () => {
+			expect(
+				blockInserterPanel( true, setIsListViewOpened( true ) )
+			).toBe( false );
+		} );
+
 		it( 'should not change the state when closing the nav panel', () => {
 			expect(
 				blockInserterPanel( true, setIsNavigationPanelOpened( false ) )
 			).toBe( true );
 		} );
+
+		it( 'should not change the state when closing the list view panel', () => {
+			expect(
+				blockInserterPanel( true, setIsListViewOpened( false ) )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'listViewPanel()', () => {
+		it( 'should apply default state', () => {
+			expect( listViewPanel( undefined, {} ) ).toEqual( false );
+		} );
+
+		it( 'should default to returning the same state', () => {
+			expect( listViewPanel( true, {} ) ).toBe( true );
+		} );
+
+		it( 'should set the open state of the list view panel', () => {
+			expect( listViewPanel( false, setIsListViewOpened( true ) ) ).toBe(
+				true
+			);
+			expect( listViewPanel( true, setIsListViewOpened( false ) ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should close the list view when opening the nav panel', () => {
+			expect(
+				listViewPanel( true, openNavigationPanelToMenu( 'noop' ) )
+			).toBe( false );
+			expect(
+				listViewPanel( true, setIsNavigationPanelOpened( true ) )
+			).toBe( false );
+		} );
+
+		it( 'should close the list view when opening the inserter panel', () => {
+			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should not change the state when closing the nav panel', () => {
+			expect(
+				listViewPanel( true, setIsNavigationPanelOpened( false ) )
+			).toBe( true );
+		} );
+
+		it( 'should not change the state when closing the inserter panel', () => {
+			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
+				true
+			);
+		} );
 	} );
 } );
diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
index e24b640f07afb1..12d922879e8854 100644
--- a/packages/edit-site/src/store/test/selectors.js
+++ b/packages/edit-site/src/store/test/selectors.js
@@ -12,6 +12,7 @@ import {
 	getNavigationPanelActiveMenu,
 	isNavigationOpened,
 	isInserterOpened,
+	isListViewOpened,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -170,4 +171,15 @@ describe( 'selectors', () => {
 			expect( isInserterOpened( state ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'isListViewOpened', () => {
+		it( 'returns the list view panel isOpened state', () => {
+			const state = {
+				listViewPanel: true,
+			};
+			expect( isListViewOpened( state ) ).toBe( true );
+			state.listViewPanel = false;
+			expect( isListViewOpened( state ) ).toBe( false );
+		} );
+	} );
 } );
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 636d278dc40e05..9dff7eb78b9988 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -13,6 +13,7 @@
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";
 @import "./components/template-part-converter/style.scss";
+@import "./components/secondary-sidebar/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 3dcc81ae5c8cec..857f4930f57503 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -105,6 +105,7 @@ export { default as lifesaver } from './library/lifesaver';
 export { default as link } from './library/link';
 export { default as linkOff } from './library/link-off';
 export { default as list } from './library/list';
+export { default as listView } from './library/list-view';
 export { default as lock } from './library/lock';
 export { default as loop } from './library/loop';
 export { default as mapMarker } from './library/map-marker';
diff --git a/packages/icons/src/library/list-view.js b/packages/icons/src/library/list-view.js
new file mode 100644
index 00000000000000..3e31561ba655d6
--- /dev/null
+++ b/packages/icons/src/library/list-view.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const listView = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
+	</SVG>
+);
+
+export default listView;