diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index bfbb993447816..bedb3b80aeaef 100644
--- a/edit-post/components/layout/index.js
+++ b/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 />
diff --git a/edit-post/components/sidebar/block-inspector-panel/index.js b/edit-post/components/sidebar/block-inspector-panel/index.js
deleted file mode 100644
index d46c22d4c117b..0000000000000
--- a/edit-post/components/sidebar/block-inspector-panel/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Panel, PanelBody } from '@wordpress/components';
-import { BlockInspector } from '@wordpress/editor';
-
-/**
- * Internal Dependencies
- */
-import './style.scss';
-
-function BlockInspectorPanel() {
-	return (
-		<Panel>
-			<PanelBody className="edit-post-block-inspector-panel">
-				<BlockInspector />
-			</PanelBody>
-		</Panel>
-	);
-}
-
-export default BlockInspectorPanel;
diff --git a/edit-post/components/sidebar/block-sidebar/index.js b/edit-post/components/sidebar/block-sidebar/index.js
new file mode 100644
index 0000000000000..17f12ebf60bf1
--- /dev/null
+++ b/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;
diff --git a/edit-post/components/sidebar/block-inspector-panel/style.scss b/edit-post/components/sidebar/block-sidebar/style.scss
similarity index 82%
rename from edit-post/components/sidebar/block-inspector-panel/style.scss
rename to edit-post/components/sidebar/block-sidebar/style.scss
index 6136a427a7fc5..8df820bfdc56e 100644
--- a/edit-post/components/sidebar/block-inspector-panel/style.scss
+++ b/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;
 
diff --git a/edit-post/components/sidebar/document-sidebar/index.js b/edit-post/components/sidebar/document-sidebar/index.js
new file mode 100644
index 0000000000000..0320bc9aa4fac
--- /dev/null
+++ b/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;
diff --git a/edit-post/components/sidebar/index.js b/edit-post/components/sidebar/index.js
index 3514639bb10f8..e5c1ab9773002 100644
--- a/edit-post/components/sidebar/index.js
+++ b/edit-post/components/sidebar/index.js
@@ -1,8 +1,7 @@
 /**
  * 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';
 
@@ -10,30 +9,21 @@ 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 );
diff --git a/edit-post/components/sidebar/post-settings/index.js b/edit-post/components/sidebar/post-settings/index.js
deleted file mode 100644
index 71a6aad75406e..0000000000000
--- a/edit-post/components/sidebar/post-settings/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Panel } from '@wordpress/components';
-
-/**
- * Internal Dependencies
- */
-import './style.scss';
-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';
-
-const panel = (
-	<Panel>
-		<PostStatus />
-		<LastRevision />
-		<PostTaxonomies />
-		<FeaturedImage />
-		<PostExcerpt />
-		<DiscussionPanel />
-		<PageAttributes />
-		<DocumentOutlinePanel />
-		<MetaBoxes location="side" usePanel />
-	</Panel>
-);
-
-export default () => panel;
diff --git a/edit-post/components/sidebar/post-settings/style.scss b/edit-post/components/sidebar/post-settings/style.scss
deleted file mode 100644
index 5d1268114f02e..0000000000000
--- a/edit-post/components/sidebar/post-settings/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.edit-post-sidebar-post-settings__icons {
-	display: inline-flex;
-	margin-right: -5px;
-}
diff --git a/edit-post/components/sidebar/settings-header/index.js b/edit-post/components/sidebar/settings-header/index.js
index 159fe10508a0f..173ae977b6591 100644
--- a/edit-post/components/sidebar/settings-header/index.js
+++ b/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 ) }