Editor: Unify the list view sidebar between the post and site editors

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

@@ -52,7 +52,6 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import EditPostPreferencesModal from '../preferences-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
@@ -65,7 +64,7 @@ import useCommonCommands from '../../hooks/commands/use-common-commands';
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { InserterSidebar } = unlock( editorPrivateApis );
+const { InserterSidebar, ListViewSidebar } = unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */

packages/edit-post/src/style.scss

@@ -5,7 +5,6 @@
 @import "./components/layout/style.scss";
 @import "./components/block-manager/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/secondary-sidebar/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-slug/style.scss";

packages/edit-site/src/components/editor/index.js

@@ -42,7 +42,6 @@ import {
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
 import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
@@ -58,8 +57,11 @@ import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
-const { ExperimentalEditorProvider: EditorProvider, InserterSidebar } =
-	unlock( editorPrivateApis );
+const {
+	ExperimentalEditorProvider: EditorProvider,
+	InserterSidebar,
+	ListViewSidebar,
+} = unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */

packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js → packages/editor/src/components/list-view-sidebar/index.js

@@ -11,13 +11,13 @@ import { __, _x } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import ListViewOutline from './list-view-outline';
 import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
@@ -116,7 +116,7 @@ export default function ListViewSidebar() {
 	function renderTabContent( tabName ) {
 		if ( tabName === 'list-view' ) {
 			return (
-				<div className="edit-post-editor__list-view-panel-content">
+				<div className="editor-list-view-sidebar__list-view-panel-content">
 					<ListView dropZoneElement={ dropZoneElement } />
 				</div>
 			);
@@ -127,37 +127,37 @@ export default function ListViewSidebar() {
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			className="edit-post-editor__document-overview-panel"
+			className="editor-list-view-sidebar"
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
 			<Button
-				className="edit-post-editor__document-overview-panel__close-button"
+				className="editor-list-view-sidebar__close-button"
 				icon={ closeSmall }
 				label={ __( 'Close' ) }
 				onClick={ closeListView }
 			/>
 			<TabPanel
-				className="edit-post-editor__document-overview-panel__tab-panel"
+				className="editor-list-view-sidebar__tab-panel"
 				ref={ tabPanelRef }
 				onSelect={ ( tabName ) => setTab( tabName ) }
 				selectOnMove={ false }
 				tabs={ [
 					{
 						name: 'list-view',
 						title: _x( 'List View', 'Post overview' ),
-						className: 'edit-post-sidebar__panel-tab',
+						className: 'editor-list-view-sidebar__panel-tab',
 					},
 					{
 						name: 'outline',
 						title: _x( 'Outline', 'Post overview' ),
-						className: 'edit-post-sidebar__panel-tab',
+						className: 'editor-list-view-sidebar__panel-tab',
 					},
 				] }
 			>
 				{ ( currentTab ) => (
 					<div
-						className="edit-post-editor__list-view-container"
+						className="editor-list-view-sidebar__list-view-container"
 						ref={ listViewContainerRef }
 					>
 						{ renderTabContent( currentTab.name ) }

packages/edit-post/src/components/secondary-sidebar/list-view-outline.js → packages/editor/src/components/list-view-sidebar/list-view-outline.js

@@ -2,12 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	DocumentOutline,
-	WordCount,
-	TimeToRead,
-	CharacterCount,
-} from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
 	__experimentalText as Text,
@@ -18,6 +12,14 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import CharacterCount from '../character-count';
+import WordCount from '../word-count';
+import TimeToRead from '../time-to-read';
+import DocumentOutline from '../document-outline';
+
 function EmptyOutlineIllustration() {
 	return (
 		<SVG
@@ -65,7 +67,7 @@ export default function ListViewOutline() {
 	}, [] );
 	return (
 		<>
-			<div className="edit-post-editor__list-view-overview">
+			<div className="editor-list-view-sidebar__outline">
 				<div>
 					<Text>{ __( 'Characters:' ) }</Text>
 					<Text>
@@ -84,7 +86,7 @@ export default function ListViewOutline() {
 			{ headingCount > 0 ? (
 				<DocumentOutline />
 			) : (
-				<div className="edit-post-editor__list-view-empty-headings">
+				<div className="editor-list-view-sidebar__outline-empty-headings">
 					<EmptyOutlineIllustration />
 					<p>
 						{ __(