Try List View in a panel in post editor

docs/designers-developers/developers/data/data-core-edit-post.md

@@ -189,6 +189,18 @@ _Returns_
 
 -   `boolean`: Whether the inserter is opened.
 
+<a name="isListViewOpened" href="#isListViewOpened">#</a> **isListViewOpened**
+
+Returns true if List View is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the inserter is opened.
+
 <a name="isMetaBoxLocationActive" href="#isMetaBoxLocationActive">#</a> **isMetaBoxLocationActive**
 
 Returns true if there is an active meta box in the given location, or false
@@ -401,6 +413,18 @@ _Returns_
 
 -   `Object`: Action object.
 
+<a name="setIsListViewOpened" href="#setIsListViewOpened">#</a> **setIsListViewOpened**
+
+Returns an action object used to open/close List View.
+
+_Parameters_
+
+-   _value_ `boolean`: A boolean representing whether list view should be opened or closed.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <a name="showBlockTypes" href="#showBlockTypes">#</a> **showBlockTypes**
 
 Returns an action object used in signalling that block types by the given

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -7,7 +7,6 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	BlockToolbar,
 	NavigableToolbar,
-	BlockNavigationDropdown,
 	ToolSelector,
 } from '@wordpress/block-editor';
 import {
@@ -21,17 +20,35 @@ import {
 	ToolbarItem,
 	MenuItemsChoice,
 	MenuGroup,
+	SVG,
+	Path,
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
+const ListViewIcon = (
+	<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 HeaderToolbar() {
 	const inserterButton = useRef();
-	const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
+	const listViewButton = useRef();
+	const { setIsInserterOpened, setIsListViewOpened } = useDispatch(
+		'core/edit-post'
+	);
 	const {
 		hasFixedToolbar,
 		isInserterEnabled,
 		isInserterOpened,
+		isListViewEnabled,
+		isListViewOpened,
 		isTextModeEnabled,
 		previewDeviceType,
 		showIconLabels,
@@ -54,7 +71,11 @@ function HeaderToolbar() {
 				hasInserterItems(
 					getBlockRootClientId( getBlockSelectionEnd() )
 				),
+			isListViewEnabled:
+				select( 'core/edit-post' ).getEditorMode() === 'visual' &&
+				select( 'core/editor' ).getEditorSettings().richEditingEnabled,
 			isInserterOpened: select( 'core/edit-post' ).isInserterOpened(),
+			isListViewOpened: select( 'core/edit-post' ).isListViewOpened(),
 			isTextModeEnabled:
 				select( 'core/edit-post' ).getEditorMode() === 'text',
 			previewDeviceType: select(
@@ -94,12 +115,6 @@ function HeaderToolbar() {
 				showTooltip={ ! showIconLabels }
 				isTertiary={ showIconLabels }
 			/>
-			<ToolbarItem
-				as={ BlockNavigationDropdown }
-				isDisabled={ isTextModeEnabled }
-				showTooltip={ ! showIconLabels }
-				isTertiary={ showIconLabels }
-			/>
 		</>
 	);
 
@@ -137,6 +152,35 @@ function HeaderToolbar() {
 			>
 				{ showIconLabels && __( 'Add' ) }
 			</ToolbarItem>
+			<ToolbarItem
+				ref={ listViewButton }
+				as={ Button }
+				className="edit-post-header-toolbar__inserter-toggle"
+				isPrimary
+				isPressed={ isListViewOpened }
+				onMouseDown={ ( event ) => {
+					event.preventDefault();
+				} }
+				onClick={ () => {
+					if ( isListViewOpened ) {
+						// Focusing the inserter button closes the inserter popover
+						listViewButton.current.focus();
+					} else {
+						setIsListViewOpened( true );
+					}
+				} }
+				disabled={ ! isListViewEnabled }
+				icon={ ListViewIcon }
+				/* translators: button label text should, if possible, be under 16
+			characters. */
+				label={ _x(
+					'List View',
+					'Generic label for list view button'
+				) }
+				showTooltip={ ! showIconLabels }
+			>
+				{ showIconLabels && __( 'List View' ) }
+			</ToolbarItem>
 			{ ( isWideViewport || ! showIconLabels ) && (
 				<>
 					{ isLargeViewport && (

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

@@ -14,10 +14,7 @@ import {
 	EditorKeyboardShortcutsRegister,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockBreadcrumb,
-	__experimentalLibrary as Library,
-} from '@wordpress/block-editor';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import {
 	Button,
 	ScrollLock,
@@ -33,7 +30,6 @@ import {
 	InterfaceSkeleton,
 } from '@wordpress/interface';
 import { useState, useEffect, useCallback } from '@wordpress/element';
-import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -50,7 +46,8 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
-import PopoverWrapper from './popover-wrapper';
+import InserterPanel from './inserter-panel';
+import ListViewPanel from './list-view-panel';
 
 const interfaceLabels = {
 	leftSidebar: __( 'Block library' ),
@@ -73,6 +70,7 @@ function Layout() {
 		openGeneralSidebar,
 		closeGeneralSidebar,
 		setIsInserterOpened,
+		setIsListViewOpened,
 	} = useDispatch( 'core/edit-post' );
 	const {
 		mode,
@@ -86,6 +84,7 @@ function Layout() {
 		hasBlockSelected,
 		showMostUsedBlocks,
 		isInserterOpened,
+		isListViewOpened,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		return {
@@ -104,6 +103,7 @@ function Layout() {
 				'mostUsedBlocks'
 			),
 			isInserterOpened: select( 'core/edit-post' ).isInserterOpened(),
+			isListViewOpened: select( 'core/edit-post' ).isListViewOpened(),
 			mode: select( 'core/edit-post' ).getEditorMode(),
 			isRichEditingEnabled: select( 'core/editor' ).getEditorSettings()
 				.richEditingEnabled,
@@ -136,10 +136,11 @@ function Layout() {
 	useEffect( () => {
 		if ( sidebarIsOpened && ! isHugeViewport ) {
 			setIsInserterOpened( false );
+			setIsListViewOpened( false );
 		}
 	}, [ sidebarIsOpened, isHugeViewport ] );
 	useEffect( () => {
-		if ( isInserterOpened && ! isHugeViewport ) {
+		if ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {
 			closeGeneralSidebar();
 		}
 	}, [ isInserterOpened, isHugeViewport ] );
@@ -182,39 +183,22 @@ function Layout() {
 						/>
 					}
 					leftSidebar={
-						mode === 'visual' &&
-						isInserterOpened && (
-							<PopoverWrapper
-								className="edit-post-layout__inserter-panel-popover-wrapper"
-								onClose={ () => setIsInserterOpened( false ) }
-							>
-								<div className="edit-post-layout__inserter-panel">
-									<div className="edit-post-layout__inserter-panel-header">
-										<Button
-											icon={ close }
-											onClick={ () =>
-												setIsInserterOpened( false )
-											}
-										/>
-									</div>
-									<div className="edit-post-layout__inserter-panel-content">
-										<Library
-											showMostUsedBlocks={
-												showMostUsedBlocks
-											}
-											showInserterHelpPanel
-											onSelect={ () => {
-												if ( isMobileViewport ) {
-													setIsInserterOpened(
-														false
-													);
-												}
-											} }
-										/>
-									</div>
-								</div>
-							</PopoverWrapper>
-						)
+						<>
+							<InserterPanel
+								isOpened={
+									mode === 'visual' && isInserterOpened
+								}
+								setIsOpened={ setIsInserterOpened }
+								showMostUsedBlocks={ showMostUsedBlocks }
+								isMobileViewport={ isMobileViewport }
+							/>
+							<ListViewPanel
+								isOpened={
+									mode === 'visual' && isListViewOpened
+								}
+								setIsOpened={ setIsListViewOpened }
+							/>
+						</>
 					}
 					sidebar={
 						( ! isMobileViewport || sidebarIsOpened ) && (

packages/edit-post/src/components/layout/inserter-panel.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import PopoverWrapper from './popover-wrapper';
+
+export default function InserterPanel( {
+	isOpened,
+	setIsOpened,
+	showMostUsedBlocks,
+	isMobileViewport,
+} ) {
+	if ( ! isOpened ) {
+		return null;
+	}
+
+	return (
+		<PopoverWrapper
+			className="edit-post-layout__inserter-panel-popover-wrapper"
+			onClose={ () => setIsOpened( false ) }
+		>
+			<div className="edit-post-layout__inserter-panel">
+				<div className="edit-post-layout__inserter-panel-header">
+					<Button
+						icon={ close }
+						onClick={ () => setIsOpened( false ) }
+					/>
+				</div>
+				<div className="edit-post-layout__inserter-panel-content">
+					<Library
+						showMostUsedBlocks={ showMostUsedBlocks }
+						showInserterHelpPanel
+						onSelect={ () => {
+							if ( isMobileViewport ) {
+								setIsOpened( false );
+							}
+						} }
+					/>
+				</div>
+			</div>
+		</PopoverWrapper>
+	);
+}

packages/edit-post/src/components/layout/list-view-panel.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalBlockNavigationTree as BlockNavigationTree } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import PopoverWrapper from './popover-wrapper';
+
+export default function ListViewPanel( { isOpened, setIsOpened } ) {
+	const { rootBlocks, selectedBlockClientId } = useSelect( ( select ) => {
+		const selectors = select( 'core/block-editor' );
+		return {
+			rootBlocks: selectors.__unstableGetBlockTree(),
+			selectedBlockClientId: selectors.getSelectedBlockClientId(),
+		};
+	}, [] );
+
+	const { selectBlock } = useDispatch( 'core/block-editor' );
+
+	if ( ! isOpened ) {
+		return null;
+	}
+
+	return (
+		<PopoverWrapper
+			className="edit-post-layout__list-view-panel-popover-wrapper"
+			onClose={ () => setIsOpened( false ) }
+		>
+			<div className="edit-post-layout__list-view-panel">
+				<div className="edit-post-layout__list-view-panel-header">
+					<Button
+						icon={ close }
+						onClick={ () => setIsOpened( false ) }
+					/>
+				</div>
+				<div className="edit-post-layout__list-view-panel-content">
+					<BlockNavigationTree
+						blocks={ rootBlocks }
+						selectedBlockClientId={ selectedBlockClientId }
+						selectBlock={ selectBlock }
+						__experimentalFeatures
+						showNestedBlocks
+						showAppender
+						showBlockMovers
+					/>
+				</div>
+			</div>
+		</PopoverWrapper>
+	);
+}