Document Outline: Implement the document outline as a plugin

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

@@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	Inserter,
 	BlockToolbar,
-	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	MultiBlocksSwitcher,
@@ -33,7 +32,6 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
 			<Inserter position="bottom right" />
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
-			<TableOfContents />
 			<MultiBlocksSwitcher />
 			{ hasFixedToolbar && isLargeViewport && (
 				<div className="edit-post-header-toolbar__block-toolbar">

edit-post/components/sidebar/document-sidebar/index.js

@@ -14,7 +14,6 @@ import FeaturedImage from '../featured-image';
 import DiscussionPanel from '../discussion-panel';
 import LastRevision from '../last-revision';
 import PageAttributes from '../page-attributes';
-import DocumentOutlinePanel from '../document-outline-panel';
 import MetaBoxes from '../../meta-boxes';
 import SettingsHeader from '../settings-header';
 import Sidebar from '../';
@@ -35,7 +34,6 @@ const DocumentSidebar = () => (
 			<PostExcerpt />
 			<DiscussionPanel />
 			<PageAttributes />
-			<DocumentOutlinePanel />
 			<MetaBoxes location="side" usePanel />
 		</Panel>
 	</Sidebar>

edit-post/index.js

@@ -8,6 +8,7 @@ import { render, unmountComponentAtNode } from '@wordpress/element';
  */
 import './assets/stylesheets/main.scss';
 import './hooks';
+import './plugins';
 import store from './store';
 import { initializeMetaBoxState } from './store/actions';
 import Editor from './editor';

edit-post/plugins/document-outline/index.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { registerPlugin } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
+import { TableOfContentsPanel } from '@wordpress/editor';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../../components/sidebar/plugin-sidebar';
+import PluginSidebarMoreMenuItem from '../../components/header/plugin-sidebar-more-menu-item';
+
+function DocumentOutlinePlugin() {
+	return (
+		<Fragment>
+			<PluginSidebar name="core/document-outline" title={ __( 'Content Structure' ) }>
+				<PanelBody><TableOfContentsPanel /></PanelBody>
+			</PluginSidebar>
+
+			<PluginSidebarMoreMenuItem target="core/document-outline" icon="info-outline">
+				{ __( 'Content Structure' ) }
+			</PluginSidebarMoreMenuItem>
+		</Fragment>
+	);
+}
+
+registerPlugin( 'core-document-outline', {
+	render: DocumentOutlinePlugin,
+} );

edit-post/plugins/index.js

@@ -0,0 +1 @@
+import './document-outline';

editor/components/index.js

@@ -48,6 +48,7 @@ export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';
 export { default as PostVisibilityCheck } from './post-visibility/check';
 export { default as TableOfContents } from './table-of-contents';
+export { default as TableOfContentsPanel } from './table-of-contents/panel';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 

editor/components/table-of-contents/style.scss

@@ -18,11 +18,12 @@
 }
 
 .table-of-contents__count {
-	width: 25%;
+	width: 50%;
 	display: flex;
 	flex-direction: column;
 	font-size: $default-font-size;
 	color: $dark-gray-300;
+	margin-bottom: 5px;
 }
 
 .table-of-contents__number,