Move document information and outline to list view panel

WordPress · Oct 12, 2022 · 8f39ab3 · 8f39ab3
1 parent f5eaa4f
commit 8f39ab3
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 16 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,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, __experimentalText as Text } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
@@ -13,6 +18,13 @@ import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { useState } from '@wordpress/element';
+import {
+	DocumentOutline,
+	WordCount,
+	TimeToRead,
+	CharacterCount,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -35,6 +47,8 @@ export default function ListViewSidebar() {
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-post-editor__list-view-panel-label-${ instanceId }`;
 
+	const [ tab, setTab ] = useState( 'list-view' );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -43,10 +57,49 @@ export default function ListViewSidebar() {
 			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>
+				<ul>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'list-view' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'list-view' }
+							) }
+							data-label={ __( 'List View' ) }
+							aria-label={
+								tab === 'list-view'
+									? __( 'List View (selected)' )
+									: __( 'List View' )
+							}
+						>
+							{ __( 'List View' ) }
+						</Button>
+					</li>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'outline' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'outline' }
+							) }
+							data-label={ __( 'Outline' ) }
+							aria-label={
+								tab === 'outline'
+									? __( 'Outline (selected)' )
+									: __( 'Outline' )
+							}
+						>
+							{ __( 'Outline' ) }
+						</Button>
+					</li>
+				</ul>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close List View Sidebar' ) }
@@ -60,7 +113,28 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<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
@@ -9,6 +9,10 @@
 	// Same width as the Inserter.
 	// @see packages/block-editor/src/components/inserter/style.scss
 	min-width: 350px;
+	& > .document-outline, & > .edit-post-editor__list-view-panel-content {
+		overflow-y: auto;
+		height: calc( 100% - 180px - #{$grid-unit-05});
+	}
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -38,10 +42,39 @@
 	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%;
+		}
+	}
 }
 
 .edit-post-editor__list-view-panel-content {
-	overflow-y: auto;
 	// 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 {
+	position: absolute;
+	bottom: 0;
+	& > div > span:first-child {
+		width: 90px;
+		display: inline-block;
+	}
+	border-top: $border-width solid $gray-300;
+	width: calc(100% - #{ $grid-unit-40 });
+	margin-left: -($grid-unit-10 - $border-width - $border-width);
+	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;
+		}
+	}
+}
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 />,
 					}
 			  );