Edit Post: Refactor Editor sidebars

edit-post/components/layout/index.js

@@ -26,8 +26,9 @@ import { withViewportMatch } from '@wordpress/viewport';
  * Internal dependencies
  */
 import './style.scss';
+import BlockSidebar from '../sidebar/block-sidebar';
+import DocumentSidebar from '../sidebar/document-sidebar';
 import Header from '../header';
-import Sidebar from '../sidebar';
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorModeKeyboardShortcuts from '../keyboard-shortcuts';
@@ -86,7 +87,8 @@ function Layout( {
 					forceIsSaving={ isSaving }
 				/>
 			) }
-			{ editorSidebarOpened && <Sidebar /> }
+			<DocumentSidebar />
+			<BlockSidebar />
 			{ pluginSidebarOpened && <PluginSidebar.Slot name={ sidebarName } /> }
 			{
 				isMobileViewport && sidebarIsOpened && <ScrollLock />

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { Panel, PanelBody } from '@wordpress/components';
+import { BlockInspector } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import SettingsHeader from '../settings-header';
+import Sidebar from '../';
+
+const SIDEBAR_NAME = 'edit-post/block';
+
+const BlockSidebar = () => (
+	<Sidebar
+		name={ SIDEBAR_NAME }
+		label={ __( 'Editor advanced settings' ) }
+	>
+		<SettingsHeader sidebarName={ SIDEBAR_NAME } />
+		<Panel>
+			<PanelBody className="edit-post-block-sidebar__panel">
+				<BlockInspector />
+			</PanelBody>
+		</Panel>
+	</Sidebar>
+);
+
+export default BlockSidebar;

edit-post/components/sidebar/block-inspector-panel/style.scss → edit-post/components/sidebar/block-sidebar/style.scss

@@ -1,4 +1,4 @@
-.edit-post-block-inspector-panel .components-panel__body {
+.edit-post-block-sidebar__panel .components-panel__body {
 	border: none;
 	margin: 0 -16px;
 

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Panel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal Dependencies
+ */
+import PostStatus from '../post-status';
+import PostExcerpt from '../post-excerpt';
+import PostTaxonomies from '../post-taxonomies';
+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 '../';
+
+const SIDEBAR_NAME = 'edit-post/document';
+
+const DocumentSidebar = () => (
+	<Sidebar
+		name={ SIDEBAR_NAME }
+		label={ __( 'Editor advanced settings' ) }
+	>
+		<SettingsHeader sidebarName={ SIDEBAR_NAME } />
+		<Panel>
+			<PostStatus />
+			<LastRevision />
+			<PostTaxonomies />
+			<FeaturedImage />
+			<PostExcerpt />
+			<DiscussionPanel />
+			<PageAttributes />
+			<DocumentOutlinePanel />
+			<MetaBoxes location="side" usePanel />
+		</Panel>
+	</Sidebar>
+);
+
+export default DocumentSidebar;

edit-post/components/sidebar/index.js

@@ -1,39 +1,29 @@
 /**
  * WordPress Dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { withFocusReturn } from '@wordpress/components';
+import { ifCondition, withFocusReturn } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/element';
 
 /**
  * Internal Dependencies
  */
 import './style.scss';
-import PostSettings from './post-settings';
-import BlockInspectorPanel from './block-inspector-panel';
-import SettingsHeader from './header';
 
 /**
- * Renders a sidebar with the relevant panel.
- *
- * @param {string} panel The currently active panel.
+ * Renders a sidebar with its content.
  *
  * @return {Object} The rendered sidebar.
  */
-const Sidebar = ( { activeSidebarName } ) => {
+const Sidebar = ( { children, label } ) => {
 	return (
 		<div
 			className="edit-post-sidebar"
 			role="region"
-			aria-label={ __( 'Editor advanced settings' ) }
+			aria-label={ label }
 			tabIndex="-1"
 		>
-			<SettingsHeader activeSidebarName={ activeSidebarName } />
-			{ activeSidebarName === 'edit-post/block' ?
-				<BlockInspectorPanel /> :
-				<PostSettings />
-			}
+			{ children }
 		</div>
 	);
 };
@@ -42,5 +32,6 @@ export default compose(
 	withSelect( ( select ) => ( {
 		activeSidebarName: select( 'core/edit-post' ).getActiveGeneralSidebarName(),
 	} ) ),
+	ifCondition( ( { activeSidebarName, name } ) => activeSidebarName === name ),
 	withFocusReturn,
 )( Sidebar );

edit-post/components/sidebar/settings-header/index.js

@@ -11,7 +11,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import './style.scss';
 import Header from '../header';
 
-const SettingsHeader = ( { count, activeSidebarName, openSidebar } ) => {
+const SettingsHeader = ( { count, openSidebar, sidebarName } ) => {
 	// Do not display "0 Blocks".
 	count = count === 0 ? 1 : count;
 
@@ -22,14 +22,14 @@ const SettingsHeader = ( { count, activeSidebarName, openSidebar } ) => {
 		>
 			<button
 				onClick={ () => openSidebar( 'edit-post/document' ) }
-				className={ `edit-post-sidebar__panel-tab ${ activeSidebarName === 'edit-post/document' ? 'is-active' : '' }` }
+				className={ `edit-post-sidebar__panel-tab ${ sidebarName === 'edit-post/document' ? 'is-active' : '' }` }
 				aria-label={ __( 'Document settings' ) }
 			>
 				{ __( 'Document' ) }
 			</button>
 			<button
 				onClick={ () => openSidebar( 'edit-post/block' ) }
-				className={ `edit-post-sidebar__panel-tab ${ activeSidebarName === 'edit-post/block' ? 'is-active' : '' }` }
+				className={ `edit-post-sidebar__panel-tab ${ sidebarName === 'edit-post/block' ? 'is-active' : '' }` }
 				aria-label={ __( 'Block settings' ) }
 			>
 				{ sprintf( _n( 'Block', '%d Blocks', count ), count ) }