Move document information and outline to list view panel

WordPress · Oct 18, 2022 · 6f6fde8 · 6f6fde8
1 parent f2729bf
commit 6f6fde8
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 26 deletions.
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
@@ -119,7 +119,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the third column in the columns block.
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyTimes( 'Tab', 2 );
+		await pressKeyTimes( 'Tab', 4 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.waitForSelector(
 			'.is-highlighted[aria-label="Block: Column (3 of 3)"]'

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -10,7 +10,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	store as editorStore,
@@ -77,13 +76,6 @@ function HeaderToolbar() {
 	);
 	const overflowItems = (
 		<>
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-				repositionDropdown={ showIconLabels && ! isWideViewport }
-				showTooltip={ ! showIconLabels }
-				variant={ showIconLabels ? 'tertiary' : undefined }
-			/>
 			<ToolbarItem
 				as={ Button }
 				className="edit-post-header-toolbar__list-view-toggle"

diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -1,25 +1,45 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { Button, __experimentalText as Text } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import {
+	DocumentOutline,
+	WordCount,
+	TimeToRead,
+	CharacterCount,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
 export default function ListViewSidebar() {
+	const { headingCount } = useSelect( ( select ) => {
+		const { getGlobalBlockCount } = select( blockEditorStore );
+		return {
+			headingCount: getGlobalBlockCount( 'core/heading' ),
+		};
+	}, [] );
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
@@ -32,35 +52,91 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-post-editor__list-view-panel-label-${ instanceId }`;
+	const [ tab, setTab ] = useState( 'list-view' );
+	useEffect( () => {
+		if ( headingCount === 0 && tab === 'outline' ) {
+			setTab( 'list-view' );
+		}
+	}, [ headingCount === 0, tab ] );
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
+			aria-label={ __( 'List View' ) }
 			className="edit-post-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
 			<div
-				className="edit-post-editor__list-view-panel-header"
+				className="edit-post-editor__list-view-panel-header components-panel__header edit-post-sidebar__panel-tabs"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
+				<ul>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'list-view' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'list-view' }
+							) }
+							aria-current={ tab === 'list-view' }
+						>
+							{ __( 'List View' ) }
+						</Button>
+					</li>
+					{ headingCount > 0 && (
+						<li>
+							<Button
+								onClick={ () => {
+									setTab( 'outline' );
+								} }
+								className={ classnames(
+									'edit-post-sidebar__panel-tab',
+									{ 'is-active': tab === 'outline' }
+								) }
+								aria-current={ tab === 'outline' }
+							>
+								{ __( 'Outline' ) }
+							</Button>
+						</li>
+					) }
+				</ul>
 			</div>
 			<div
-				className="edit-post-editor__list-view-panel-content"
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
 				] ) }
+				className="edit-post-editor__list-view-container"
 			>
-				<ListView />
+				{ tab === 'list-view' && (
+					<div className="edit-post-editor__list-view-panel-content">
+						<ListView />
+					</div>
+				) }
+				{ tab === 'outline' && <DocumentOutline /> }
+				<div className="edit-post-editor__list-view-overview">
+					<div>
+						<Text>{ __( 'Characters:' ) }</Text>
+						<Text>
+							<CharacterCount />
+						</Text>
+					</div>
+					<div>
+						<Text>{ __( 'Words:' ) }</Text>
+						<WordCount />
+					</div>
+					<div>
+						<Text>{ __( 'Time to read:' ) }</Text>
+						<TimeToRead />
+					</div>
+				</div>
 			</div>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -8,7 +8,12 @@
 .edit-post-editor__list-view-panel {
 	// Same width as the Inserter.
 	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	// Width of the list view panel.
+	width: 350px;
+
+	.edit-post-sidebar__panel-tabs {
+		flex-direction: row-reverse;
+	}
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -18,8 +23,7 @@
 	justify-content: flex-end;
 }
 
-.edit-post-editor__inserter-panel-content,
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__inserter-panel-content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 }
@@ -38,10 +42,51 @@
 	height: $grid-unit-60;
 	padding-left: $grid-unit-20;
 	padding-right: $grid-unit-05;
+	ul {
+		width: calc(100% - #{ $grid-unit-50 });
+	}
+	li {
+		width: 50%;
+		& button {
+			width: 100%;
+		}
+	}
+	li:only-child {
+		width: 100%;
+	}
 }
 
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__list-view-panel-content, .edit-post-editor__list-view-container > .document-outline {
+	overflow-x: hidden;
 	overflow-y: auto;
+	height: 100%;
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }
+
+.edit-post-editor__list-view-overview {
+	& > div > span:first-child {
+		// Width of the text information fields.
+		width: 90px;
+		display: inline-block;
+	}
+	border-top: $border-width solid $gray-300;
+	width: calc(100% - #{ $grid-unit-40 });
+	padding: $grid-unit-20;
+	& > div {
+		padding: 0 0 $grid-unit-10;
+		& > span {
+			font-size: $helptext-font-size;
+			line-height: $default-line-height;
+			color: $gray-700;
+		}
+	}
+	// Height of the overview container.
+	height: 72px;
+}
+
+.edit-post-editor__list-view-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - #{$grid-unit-60});
+}
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -72,6 +72,8 @@ export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
+export { default as TimeToRead } from './time-to-read';
+export { default as CharacterCount } from './character-count';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';

diff --git a/packages/editor/src/components/time-to-read/index.js b/packages/editor/src/components/time-to-read/index.js
@@ -38,7 +38,7 @@ export default function TimeToRead() {
 	const minutesToReadString =
 		minutesToRead === 0
 			? createInterpolateElement( __( '<span>< 1</span> minute' ), {
-					span: <span className="table-of-contents__number" />,
+					span: <span />,
 			  } )
 			: createInterpolateElement(
 					sprintf(
@@ -51,7 +51,7 @@ export default function TimeToRead() {
 						minutesToRead
 					),
 					{
-						span: <span className="table-of-contents__number" />,
+						span: <span />,
 					}
 			  );