From a69476e77d584b6c88d745494c0065d4bb9e8546 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Wed, 31 Jan 2018 11:48:13 +0100
Subject: [PATCH 01/19] Make it possible for plugins to render a sidebar

---
 edit-post/api/index.js                        |   4 +
 edit-post/api/sidebar.js                      | 114 +++++++++++++++
 edit-post/components/header/index.js          |  39 +++--
 edit-post/components/layout/index.js          |  47 ++++--
 .../visual-editor/block-inspector-button.js   |  33 ++---
 edit-post/components/plugins-panel/index.js   |  80 +++++++++++
 edit-post/components/plugins-panel/style.scss |  76 ++++++++++
 .../sidebar/discussion-panel/index.js         |   4 +-
 .../sidebar/document-outline-panel/index.js   |   4 +-
 .../sidebar/featured-image/index.js           |   4 +-
 edit-post/components/sidebar/header.js        |  15 +-
 edit-post/components/sidebar/index.js         |  37 ++++-
 .../sidebar/page-attributes/index.js          |   4 +-
 .../components/sidebar/post-excerpt/index.js  |   4 +-
 .../components/sidebar/post-status/index.js   |   4 +-
 .../sidebar/post-taxonomies/index.js          |   4 +-
 edit-post/components/sidebar/style.scss       |   2 -
 edit-post/index.js                            |   3 +
 edit-post/store/actions.js                    |  97 ++++++++++---
 edit-post/store/defaults.js                   |  11 +-
 edit-post/store/reducer.js                    |  55 ++++++-
 edit-post/store/selectors.js                  |  70 ++++++---
 edit-post/store/test/actions.js               |  85 ++++++++---
 edit-post/store/test/reducer.js               |  72 ++++------
 edit-post/store/test/selectors.js             | 135 ++++--------------
 25 files changed, 702 insertions(+), 301 deletions(-)
 create mode 100644 edit-post/api/index.js
 create mode 100644 edit-post/api/sidebar.js
 create mode 100644 edit-post/components/plugins-panel/index.js
 create mode 100644 edit-post/components/plugins-panel/style.scss

diff --git a/edit-post/api/index.js b/edit-post/api/index.js
new file mode 100644
index 00000000000000..d4ca54d44c6164
--- /dev/null
+++ b/edit-post/api/index.js
@@ -0,0 +1,4 @@
+export {
+	renderSidebar,
+	getSidebarSettings,
+} from './sidebar';
diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
new file mode 100644
index 00000000000000..cafc30e2c113fe
--- /dev/null
+++ b/edit-post/api/sidebar.js
@@ -0,0 +1,114 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+
+/* External dependencies */
+import { isFunction } from 'lodash';
+
+/* Internal dependencies */
+import store from '../store';
+import { setGeneralSidebarActivePanel, openGeneralSidebar } from '../store/actions';
+import { applyFilters } from '@wordpress/hooks';
+
+const sidebars = {};
+
+/**
+ * Registers a sidebar to the editor.
+ *
+ * A button will be shown in the settings menu to open the sidebar. The sidebar
+ * can be manually opened by calling the `activateSidebar` function.
+ *
+ * @param {string} name              The name of the sidebar. Should be in
+ *                                   `[plugin]/[sidebar]` format.
+ * @param {Object}   settings        The settings for this sidebar.
+ * @param {string}   settings.title  The name to show in the settings menu.
+ * @param {Function} settings.render The function that renders the sidebar.
+ *
+ * @returns {Object} The final sidebar settings object.
+ */
+export function registerSidebar( name, settings ) {
+	settings = {
+		name,
+		...settings,
+	};
+
+	if ( typeof name !== 'string' ) {
+		console.error(
+			'Sidebar names must be strings.'
+		);
+		return null;
+	}
+	if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
+		console.error(
+			'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar.'
+		);
+		return null;
+	}
+	if ( ! settings || ! isFunction( settings.render ) ) {
+		console.error(
+			'The "render" property must be specified and must be a valid function.'
+		);
+		return null;
+	}
+	if ( sidebars[ name ] ) {
+		console.error(
+			`Sidebar ${ name } is already registered.`
+		);
+	}
+
+	if ( ! settings.title ) {
+		console.error(
+			`The sidebar ${ name } must have a title.`
+		);
+		return null;
+	}
+	if ( typeof settings.title !== 'string' ) {
+		console.error(
+			'Sidebar titles must be strings.'
+		);
+		return null;
+	}
+
+	settings = applyFilters( 'editor.registerSidebar', settings, name );
+
+	return sidebars[ name ] = settings;
+}
+
+/**
+ * Retrieves the sidebar settings object.
+ *
+ * @param {string} name The name of the sidebar to retrieve the settings for.
+ *
+ * @returns {Object} The settings object of the sidebar. Or null if the
+ *                         sidebar doesn't exist.
+ */
+export function getSidebarSettings( name ) {
+	if ( ! sidebars.hasOwnProperty( name ) ) {
+		return null;
+	}
+	return sidebars[ name ];
+}
+
+/**
+ * Renders a plugin sidebar.
+ *
+ * @param {string}   name      The name of the plugin sidebar.
+ * @param {Object}   settings  The settings for this sidebar.
+ * @param {string}   settings.title  The name to show in the settings menu.
+ * @param {Function} settings.render The function that renders the sidebar.
+ *
+ * @returns {void}
+ */
+export function renderSidebar( name, settings ) {
+	registerSidebar( name, settings );
+	activateSidebar( name );
+}
+
+/**
+ * Activates the given sidebar.
+ *
+ * @param  {string} name The name of the sidebar to activate.
+ * @return {void}
+ */
+function activateSidebar( name ) {
+	store.dispatch( openGeneralSidebar( 'plugins' ) );
+	store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) );
+}
diff --git a/edit-post/components/header/index.js b/edit-post/components/header/index.js
index a18a25ac01248f..91eefd11767c2a 100644
--- a/edit-post/components/header/index.js
+++ b/edit-post/components/header/index.js
@@ -20,15 +20,25 @@ import {
 import './style.scss';
 import EllipsisMenu from './ellipsis-menu';
 import HeaderToolbar from './header-toolbar';
-import { isSidebarOpened } from '../../store/selectors';
-import { toggleSidebar } from '../../store/actions';
+import {
+	getOpenedGeneralSidebar,
+	isPublishSidebarOpened,
+} from '../../store/selectors';
+import {
+	openGeneralSidebar,
+	closeGeneralSidebar,
+	togglePublishSidebar,
+} from '../../store/actions';
 
 function Header( {
-	onToggleDefaultSidebar,
+	isGeneralSidebarEditorOpen,
+	onOpenGeneralSidebar,
+	onCloseGeneralSidebar,
+	isPublishSidebarOpen,
 	onTogglePublishSidebar,
-	isDefaultSidebarOpened,
-	isPublishSidebarOpened,
 } ) {
+	const toggleGeneralSidebar = isGeneralSidebarEditorOpen ? onCloseGeneralSidebar : onOpenGeneralSidebar;
+
 	return (
 		<div
 			role="region"
@@ -37,20 +47,20 @@ function Header( {
 			tabIndex="-1"
 		>
 			<HeaderToolbar />
-			{ ! isPublishSidebarOpened && (
+			{ ! isPublishSidebarOpen && (
 				<div className="edit-post-header__settings">
 					<PostSavedState />
 					<PostPreviewButton />
 					<PostPublishPanelToggle
-						isOpen={ isPublishSidebarOpened }
+						isOpen={ isPublishSidebarOpen }
 						onToggle={ onTogglePublishSidebar }
 					/>
 					<IconButton
 						icon="admin-generic"
-						onClick={ onToggleDefaultSidebar }
-						isToggled={ isDefaultSidebarOpened }
+						onClick={ toggleGeneralSidebar }
+						isToggled={ isGeneralSidebarEditorOpen }
 						label={ __( 'Settings' ) }
-						aria-expanded={ isDefaultSidebarOpened }
+						aria-expanded={ isGeneralSidebarEditorOpen }
 					/>
 					<EllipsisMenu key="ellipsis-menu" />
 				</div>
@@ -61,12 +71,13 @@ function Header( {
 
 export default connect(
 	( state ) => ( {
-		isDefaultSidebarOpened: isSidebarOpened( state ),
-		isPublishSidebarOpened: isSidebarOpened( state, 'publish' ),
+		isGeneralSidebarEditorOpen: getOpenedGeneralSidebar( state ) === 'editor',
+		isPublishSidebarOpen: isPublishSidebarOpened( state ),
 	} ),
 	{
-		onToggleDefaultSidebar: () => toggleSidebar(),
-		onTogglePublishSidebar: () => toggleSidebar( 'publish' ),
+		onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ),
+		onCloseGeneralSidebar: closeGeneralSidebar,
+		onTogglePublishSidebar: togglePublishSidebar,
 	},
 	undefined,
 	{ storeKey: 'edit-post' }
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 8bea1893d7a43b..7a44e45723a1e5 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -29,23 +29,37 @@ import VisualEditor from '../modes/visual-editor';
 import EditorModeKeyboardShortcuts from '../modes/keyboard-shortcuts';
 import {
 	getEditorMode,
-	hasFixedToolbar,
 	hasOpenSidebar,
-	isSidebarOpened,
+	isFeatureActive,
+	getOpenedGeneralSidebar,
+	isPublishSidebarOpened,
 } from '../../store/selectors';
-import { toggleSidebar } from '../../store/actions';
+import { closeGeneralSidebar, closePublishSidebar } from '../../store/actions';
+import PluginsPanel from '../../components/plugins-panel/index.js';
+
+function GeneralSidebar( { openedGeneralSidebar } ) {
+	switch ( openedGeneralSidebar ) {
+		case 'editor':
+			return <Sidebar />;
+		case 'plugins':
+			return <PluginsPanel />;
+		default:
+	}
+	return null;
+}
 
 function Layout( {
 	mode,
 	layoutHasOpenSidebar,
-	isDefaultSidebarOpened,
-	isPublishSidebarOpened,
-	fixedToolbarActive,
-	onClosePublishPanel,
+	publishSidebarOpen,
+	openedGeneralSidebar,
+	hasFixedToolbar,
+	onCloseGeneralSidebar,
+	onClosePublishSidebar,
 } ) {
 	const className = classnames( 'edit-post-layout', {
 		'is-sidebar-opened': layoutHasOpenSidebar,
-		'has-fixed-toolbar': fixedToolbarActive,
+		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
 	return (
@@ -68,8 +82,12 @@ function Layout( {
 					<MetaBoxes location="advanced" />
 				</div>
 			</div>
-			{ isDefaultSidebarOpened && <Sidebar /> }
-			{ isPublishSidebarOpened && <PostPublishPanel onClose={ onClosePublishPanel } /> }
+			{ publishSidebarOpen && <PostPublishPanel onClose={ onClosePublishSidebar } /> }
+			{
+				openedGeneralSidebar !== null && <GeneralSidebar
+					onCloseGeneralSidebar={ onCloseGeneralSidebar }
+					openedGeneralSidebar={ openedGeneralSidebar } />
+			}
 			<Popover.Slot />
 		</div>
 	);
@@ -79,12 +97,13 @@ export default connect(
 	( state ) => ( {
 		mode: getEditorMode( state ),
 		layoutHasOpenSidebar: hasOpenSidebar( state ),
-		isDefaultSidebarOpened: isSidebarOpened( state ),
-		isPublishSidebarOpened: isSidebarOpened( state, 'publish' ),
-		fixedToolbarActive: hasFixedToolbar( state ),
+		openedGeneralSidebar: getOpenedGeneralSidebar( state ),
+		publishSidebarOpen: isPublishSidebarOpened( state ),
+		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 	} ),
 	{
-		onClosePublishPanel: () => toggleSidebar( 'publish', false ),
+		onCloseGeneralSidebar: closeGeneralSidebar,
+		onClosePublishSidebar: closePublishSidebar,
 	},
 	undefined,
 	{ storeKey: 'edit-post' }
diff --git a/edit-post/components/modes/visual-editor/block-inspector-button.js b/edit-post/components/modes/visual-editor/block-inspector-button.js
index 55fb5077cfe6b3..dd53a77622644e 100644
--- a/edit-post/components/modes/visual-editor/block-inspector-button.js
+++ b/edit-post/components/modes/visual-editor/block-inspector-button.js
@@ -13,39 +13,31 @@ import { IconButton, withSpokenMessages } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { getActivePanel, isSidebarOpened } from '../../../store/selectors';
-import { toggleSidebar, setActivePanel } from '../../../store/actions';
+import { getActiveEditorPanel, isGeneralSidebarPanelOpened } from '../../../store/selectors';
+import { openGeneralSidebar } from '../../../store/actions';
 
 export function BlockInspectorButton( {
-	isDefaultSidebarOpened,
+	isGeneralSidebarEditorOpened,
+	onOpenGeneralSidebarEditor,
 	panel,
-	toggleDefaultSidebar,
-	onShowInspector,
 	onClick = noop,
 	small = false,
 	speak,
 } ) {
-	const toggleInspector = () => {
-		onShowInspector();
-		if ( ! isDefaultSidebarOpened || panel === 'block' ) {
-			toggleDefaultSidebar();
-		}
-	};
-
 	const speakMessage = () => {
-		if ( ! isDefaultSidebarOpened || ( isDefaultSidebarOpened && panel !== 'block' ) ) {
+		if ( ! isGeneralSidebarEditorOpened || ( isGeneralSidebarEditorOpened && panel !== 'block' ) ) {
 			speak( __( 'Additional settings are now available in the Editor advanced settings sidebar' ) );
 		} else {
 			speak( __( 'Advanced settings closed' ) );
 		}
 	};
 
-	const label = ( isDefaultSidebarOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
+	const label = ( isGeneralSidebarEditorOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
 
 	return (
 		<IconButton
 			className="editor-block-settings-menu__control"
-			onClick={ flow( toggleInspector, speakMessage, onClick ) }
+			onClick={ flow( onOpenGeneralSidebarEditor, speakMessage, onClick ) }
 			icon="admin-generic"
 			label={ small ? label : undefined }
 		>
@@ -56,15 +48,12 @@ export function BlockInspectorButton( {
 
 export default connect(
 	( state ) => ( {
-		isDefaultSidebarOpened: isSidebarOpened( state ),
-		panel: getActivePanel( state ),
+		isGeneralSidebarEditorOpened: isGeneralSidebarPanelOpened( state, 'editor' ),
+		panel: getActiveEditorPanel( state ),
 	} ),
 	( dispatch ) => ( {
-		onShowInspector() {
-			dispatch( setActivePanel( 'block' ) );
-		},
-		toggleDefaultSidebar() {
-			dispatch( toggleSidebar() );
+		onOpenGeneralSidebarEditor() {
+			dispatch( openGeneralSidebar( 'editor', 'block' ) );
 		},
 	} ),
 	undefined,
diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
new file mode 100644
index 00000000000000..3a95767b0ea769
--- /dev/null
+++ b/edit-post/components/plugins-panel/index.js
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { getSidebarSettings } from '../../api/sidebar';
+import { getActivePlugin } from '../../store/selectors';
+import { closeGeneralSidebar } from '../../store/actions';
+
+/**
+ * Returns the sidebar that should be rendered in the sidebar registered by
+ * plugins.
+ *
+ * @param {string} plugin The currently active plugin.
+ *
+ * @returns {Object} The React element to render as a panel.
+ */
+export function getPluginSidebar( plugin ) {
+	const pluginSidebar = getSidebarSettings( plugin );
+
+	if ( ! pluginSidebar ) {
+		return {
+			title: __( 'Error: Unregistered plugin requested.' ),
+			render: () => {
+				return <Panel>
+					<PanelBody>
+						{ sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) }
+					</PanelBody>
+				</Panel>;
+			},
+		};
+	}
+	return pluginSidebar;
+}
+
+function PluginsPanel( { onClose, plugin } ) {
+	const {
+		title,
+		render,
+	} = getPluginSidebar( plugin );
+	return (
+		<div
+			className="editor-sidebar"
+			role="region"
+			aria-label={ __( 'Editor plugins' ) }
+			tabIndex="-1">
+			<div className="editor-plugins-panel__header">
+				<h3>{ title }</h3>
+				<IconButton
+					onClick={ onClose }
+					icon="no-alt"
+					label={ __( 'Close settings' ) }
+				/>
+			</div>
+			<div className="editor-plugins-panel__content">
+				{ render() }
+			</div>
+		</div>
+	);
+}
+
+export default connect(
+	( state ) => {
+		return {
+			plugin: getActivePlugin( state ),
+		};
+	}, {
+		onClose: closeGeneralSidebar,
+	}
+)( withFocusReturn( PluginsPanel ) );
diff --git a/edit-post/components/plugins-panel/style.scss b/edit-post/components/plugins-panel/style.scss
new file mode 100644
index 00000000000000..d769f721676058
--- /dev/null
+++ b/edit-post/components/plugins-panel/style.scss
@@ -0,0 +1,76 @@
+.editor-sidebar {
+  .editor-plugins-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: $sidebar-width;
+    border-left: 1px solid $light-gray-500;
+    background: $light-gray-300;
+    color: $dark-gray-500;
+    height: 100vh;
+    overflow: hidden;
+
+    @include break-small() {
+      top: $admin-bar-height-big + $header-height;
+      z-index: auto;
+      height: auto;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    @include break-medium() {
+      top: $admin-bar-height + $header-height;
+    }
+
+    > .components-panel .components-panel__header {
+      position: fixed;
+      z-index: z-index('.components-panel__header');
+      top: 0;
+      left: 0;
+      right: 0;
+      height: $panel-header-height;
+
+      @include break-small() {
+        position: inherit;
+        top: auto;
+        left: auto;
+        right: auto;
+      }
+    }
+  }
+
+  .editor-plugins-panel__header {
+    padding-left: 16px;
+    height: $header-height;
+    border-bottom: 1px solid $light-gray-500;
+    display: flex;
+    align-items: center;
+
+    .components-icon-button {
+      margin-left: auto;
+    }
+
+    h3 {
+      margin: 0;
+    }
+  }
+}
+
+.edit-post-layout .editor-plugins-panel {
+  position: fixed;
+  z-index: z-index( '.edit-post-sidebar' );
+  top: $admin-bar-height-big;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+
+  @include break-medium() {
+    top: $admin-bar-height;
+    left: auto;
+    width: $sidebar-width;
+    border-left: 1px solid $light-gray-500;
+    @include slide_in_right;
+  }
+}
diff --git a/edit-post/components/sidebar/discussion-panel/index.js b/edit-post/components/sidebar/discussion-panel/index.js
index d20c0f012d8a4d..44a05155c8f763 100644
--- a/edit-post/components/sidebar/discussion-panel/index.js
+++ b/edit-post/components/sidebar/discussion-panel/index.js
@@ -14,7 +14,7 @@ import { PostComments, PostPingbacks, PostTypeSupportCheck } from '@wordpress/ed
  * Internal Dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module Constants
@@ -49,7 +49,7 @@ export default connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/document-outline-panel/index.js b/edit-post/components/sidebar/document-outline-panel/index.js
index 19ed39a7688afd..c99be78806ba58 100644
--- a/edit-post/components/sidebar/document-outline-panel/index.js
+++ b/edit-post/components/sidebar/document-outline-panel/index.js
@@ -14,7 +14,7 @@ import { DocumentOutline, DocumentOutlineCheck } from '@wordpress/editor';
  * Internal dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module constants
@@ -39,7 +39,7 @@ export default connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/featured-image/index.js b/edit-post/components/sidebar/featured-image/index.js
index 9764afa504304c..e9d8511fada379 100644
--- a/edit-post/components/sidebar/featured-image/index.js
+++ b/edit-post/components/sidebar/featured-image/index.js
@@ -14,7 +14,7 @@ import { PostFeaturedImage, PostFeaturedImageCheck } from '@wordpress/editor';
  * Internal dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module Constants
@@ -39,7 +39,7 @@ export default connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/header.js b/edit-post/components/sidebar/header.js
index 62201a9952a7b2..17d60605ed5bd4 100644
--- a/edit-post/components/sidebar/header.js
+++ b/edit-post/components/sidebar/header.js
@@ -14,13 +14,12 @@ import { query } from '@wordpress/data';
 /**
  * Internal Dependencies
  */
-import { getActivePanel } from '../../store/selectors';
-import { toggleSidebar, setActivePanel } from '../../store/actions';
+import { getActiveEditorPanel } from '../../store/selectors';
+import { closeGeneralSidebar, setGeneralSidebarActivePanel } from '../../store/actions';
 
-const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
+const SidebarHeader = ( { panel, onSetPanel, onCloseSidebar, count } ) => {
 	// Do not display "0 Blocks".
 	count = count === 0 ? 1 : count;
-	const closeSidebar = () => onToggleSidebar( undefined, false );
 
 	return (
 		<div className="components-panel__header edit-post-sidebar__panel-tabs">
@@ -39,7 +38,7 @@ const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
 				{ sprintf( _n( 'Block', '%d Blocks', count ), count ) }
 			</button>
 			<IconButton
-				onClick={ closeSidebar }
+				onClick={ onCloseSidebar }
 				icon="no-alt"
 				label={ __( 'Close settings' ) }
 			/>
@@ -53,11 +52,11 @@ export default compose(
 	} ) ),
 	connect(
 		( state ) => ( {
-			panel: getActivePanel( state ),
+			panel: getActiveEditorPanel( state ),
 		} ),
 		{
-			onSetPanel: setActivePanel,
-			onToggleSidebar: toggleSidebar,
+			onSetPanel: setGeneralSidebarActivePanel.bind( null, 'editor' ),
+			onCloseSidebar: closeGeneralSidebar,
 		},
 		undefined,
 		{ storeKey: 'edit-post' }
diff --git a/edit-post/components/sidebar/index.js b/edit-post/components/sidebar/index.js
index 7c046e7d1359d3..563ab9c1fa7331 100644
--- a/edit-post/components/sidebar/index.js
+++ b/edit-post/components/sidebar/index.js
@@ -16,10 +16,40 @@ import './style.scss';
 import PostSettings from './post-settings';
 import BlockInspectorPanel from './block-inspector-panel';
 import Header from './header';
+import { getActiveEditorPanel } from '../../store/selectors';
 
-import { getActivePanel } from '../../store/selectors';
+/**
+ * Returns the panel that should be rendered in the sidebar.
+ *
+ * @param {string} panel The currently active panel.
+ *
+ * @returns {Object} The React element to render as a panel.
+ */
+function getPanel( panel ) {
+	switch ( panel ) {
+		case 'document':
+			return PostSettings;
+		case 'block':
+			return BlockInspectorPanel;
+		default:
+			return PostSettings;
+	}
+}
 
+/**
+ * Renders a sidebar with the relevant panel.
+ *
+ * @param {string} panel The currently active panel.
+ *
+ * @returns {Object} The rendered sidebar.
+ */
 const Sidebar = ( { panel } ) => {
+	const ActivePanel = getPanel( panel );
+
+	const props = {
+		panel,
+	};
+
 	return (
 		<div
 			className="edit-post-sidebar"
@@ -28,8 +58,7 @@ const Sidebar = ( { panel } ) => {
 			tabIndex="-1"
 		>
 			<Header />
-			{ panel === 'document' && <PostSettings /> }
-			{ panel === 'block' && <BlockInspectorPanel /> }
+			<ActivePanel { ...props } />
 		</div>
 	);
 };
@@ -37,7 +66,7 @@ const Sidebar = ( { panel } ) => {
 export default connect(
 	( state ) => {
 		return {
-			panel: getActivePanel( state ),
+			panel: getActiveEditorPanel( state ),
 		};
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/page-attributes/index.js b/edit-post/components/sidebar/page-attributes/index.js
index cc5b4266703d9b..64de154c9057be 100644
--- a/edit-post/components/sidebar/page-attributes/index.js
+++ b/edit-post/components/sidebar/page-attributes/index.js
@@ -16,7 +16,7 @@ import { query } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
 
 /**
@@ -57,7 +57,7 @@ const applyConnect = connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/post-excerpt/index.js b/edit-post/components/sidebar/post-excerpt/index.js
index b7ecc0f3926229..cf46d944e2c54d 100644
--- a/edit-post/components/sidebar/post-excerpt/index.js
+++ b/edit-post/components/sidebar/post-excerpt/index.js
@@ -14,7 +14,7 @@ import { PostExcerpt as PostExcerptForm, PostExcerptCheck } from '@wordpress/edi
  * Internal Dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module Constants
@@ -39,7 +39,7 @@ export default connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/post-status/index.js b/edit-post/components/sidebar/post-status/index.js
index f8051e6ab34459..dbdf0a7056e13a 100644
--- a/edit-post/components/sidebar/post-status/index.js
+++ b/edit-post/components/sidebar/post-status/index.js
@@ -23,7 +23,7 @@ import PostPendingStatus from '../post-pending-status';
 import {
 	isEditorSidebarPanelOpened,
 } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module Constants
@@ -50,7 +50,7 @@ export default connect(
 	} ),
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/post-taxonomies/index.js b/edit-post/components/sidebar/post-taxonomies/index.js
index 995197bb250f8b..aebae97031f711 100644
--- a/edit-post/components/sidebar/post-taxonomies/index.js
+++ b/edit-post/components/sidebar/post-taxonomies/index.js
@@ -14,7 +14,7 @@ import { PostTaxonomies as PostTaxonomiesForm, PostTaxonomiesCheck } from '@word
  * Internal dependencies
  */
 import { isEditorSidebarPanelOpened } from '../../../store/selectors';
-import { toggleSidebarPanel } from '../../../store/actions';
+import { toggleGeneralSidebarEditorPanel } from '../../../store/actions';
 
 /**
  * Module Constants
@@ -43,7 +43,7 @@ export default connect(
 	},
 	{
 		onTogglePanel() {
-			return toggleSidebarPanel( PANEL_NAME );
+			return toggleGeneralSidebarEditorPanel( PANEL_NAME );
 		},
 	},
 	undefined,
diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss
index 025d0d14b420fb..877908dae6b939 100644
--- a/edit-post/components/sidebar/style.scss
+++ b/edit-post/components/sidebar/style.scss
@@ -29,14 +29,12 @@
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		height: 100%;
-		padding-top: $panel-header-height;
 		margin-top: -1px;
 		margin-bottom: -1px;
 
 		@include break-small() {
 			overflow: inherit;
 			height: auto;
-			padding-top: 0;
 		}
 	}
 
diff --git a/edit-post/index.js b/edit-post/index.js
index 42220c6077ceb3..ce5c54f582cff0 100644
--- a/edit-post/index.js
+++ b/edit-post/index.js
@@ -19,6 +19,9 @@ import './assets/stylesheets/main.scss';
 import Layout from './components/layout';
 import store from './store';
 
+export * from './api';
+export { getPluginSidebar } from './components/plugins-panel/index.js';
+
 // Configure moment globally
 moment.locale( dateSettings.l10n.locale );
 if ( dateSettings.timezone.string ) {
diff --git a/edit-post/store/actions.js b/edit-post/store/actions.js
index f705c32a55aa2b..145b62c8e3bafd 100644
--- a/edit-post/store/actions.js
+++ b/edit-post/store/actions.js
@@ -1,52 +1,107 @@
 
 /**
- * Returns an action object used in signalling that the user toggled the
- * sidebar.
- *
- * @param {string}   sidebar     Name of the sidebar to toggle
- *                               (desktop, mobile or publish).
- * @param {boolean?} forcedValue Force a sidebar state.
+ * Returns an action object used in signalling that the user switched the active
+ * sidebar tab panel.
  *
- * @returns {Object} Action object.
+ * @param  {String} sidebar Sidebar name
+ * @param  {String} panel   Panel name
+ * @return {Object}         Action object
  */
-export function toggleSidebar( sidebar, forcedValue ) {
+export function setGeneralSidebarActivePanel( sidebar, panel ) {
 	return {
-		type: 'TOGGLE_SIDEBAR',
+		type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL',
 		sidebar,
-		forcedValue,
+		panel,
 	};
 }
 
 /**
- * Returns an action object used in signalling that the user switched the active
- * sidebar tab panel.
+ * Returns an action object used in signalling that the user opened a sidebar.
  *
- * @param {string} panel The panel name.
+ * @param {string} sidebar        Sidebar to open.
+ * @param {string} [panel = null] Panel to open in the sidebar. Null if unchanged.
+ * @returns {Object}              Action object.
+ */
+export function openGeneralSidebar( sidebar, panel = null ) {
+	return {
+		type: 'OPEN_GENERAL_SIDEBAR',
+		sidebar,
+		panel,
+	};
+}
+
+/**
+ * Returns an action object signalling that the user closed the sidebar.
  *
  * @returns {Object} Action object.
  */
-export function setActivePanel( panel ) {
+export function closeGeneralSidebar() {
 	return {
-		type: 'SET_ACTIVE_PANEL',
-		panel,
+		type: 'CLOSE_GENERAL_SIDEBAR',
 	};
 }
 
 /**
- * Returns an action object used in signalling that the user toggled a
- * sidebar panel.
+ * Returns an action object used in signalling that the user opened the publish
+ * sidebar.
  *
- * @param {string} panel The panel name.
+ * @returns {Object} Action object
+ */
+export function openPublishSidebar() {
+	return {
+		type: 'OPEN_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user closed the
+ * publish sidebar.
  *
  * @returns {Object} Action object.
  */
-export function toggleSidebarPanel( panel ) {
+export function closePublishSidebar() {
+	return {
+		type: 'CLOSE_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user toggles the publish sidebar
+ *
+ * @return {Object} Action object
+ */
+export function togglePublishSidebar() {
+	return {
+		type: 'TOGGLE_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that use toggled a panel in the editor.
+ *
+ * @param {string}  panel The panel to toggle.
+ * @return {Object} Action object.
+*/
+export function toggleGeneralSidebarEditorPanel( panel ) {
 	return {
-		type: 'TOGGLE_SIDEBAR_PANEL',
+		type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL',
 		panel,
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the viewport type preference should be set.
+ *
+ * @param {string} viewportType The viewport type (desktop or mobile).
+ * @return {Object} Action object.
+ */
+export function setViewportType( viewportType ) {
+	return {
+		type: 'SET_VIEWPORT_TYPE',
+		viewportType,
+	};
+}
+
 /**
  * Returns an action object used to toggle a feature flag.
  *
diff --git a/edit-post/store/defaults.js b/edit-post/store/defaults.js
index bae11caa8e7b88..07807509ac3035 100644
--- a/edit-post/store/defaults.js
+++ b/edit-post/store/defaults.js
@@ -1,9 +1,10 @@
 export const PREFERENCES_DEFAULTS = {
-	mode: 'visual',
-	sidebars: {
-		desktop: true,
-		mobile: false,
-		publish: false,
+	editorMode: 'visual',
+	viewportType: 'desktop', // 'desktop' | 'mobile'
+	activeGeneralSidebar: null, // null | 'editor' | 'plugins'
+	activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values
+		editor: null, // 'document' | 'block'
+		plugins: null, // pluginId
 	},
 	panels: { 'post-status': true },
 	features: {
diff --git a/edit-post/store/reducer.js b/edit-post/store/reducer.js
index b01fe8a9dddbcc..a20ddbb3c554f3 100644
--- a/edit-post/store/reducer.js
+++ b/edit-post/store/reducer.js
@@ -22,15 +22,30 @@ import { PREFERENCES_DEFAULTS } from './defaults';
  */
 export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'TOGGLE_SIDEBAR':
+		case 'OPEN_GENERAL_SIDEBAR':
+			const activeSidebarPanel = action.panel ? action.panel : state.activeSidebarPanel[ action.sidebar ];
 			return {
 				...state,
-				sidebars: {
-					...state.sidebars,
-					[ action.sidebar ]: action.forcedValue !== undefined ? action.forcedValue : ! state.sidebars[ action.sidebar ],
+				activeGeneralSidebar: action.sidebar,
+				activeSidebarPanel: {
+					...state.activeSidebarPanel,
+					[ action.sidebar ]: activeSidebarPanel,
 				},
 			};
-		case 'TOGGLE_SIDEBAR_PANEL':
+		case 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL':
+			return {
+				...state,
+				activeSidebarPanel: {
+					...state.activeSidebarPanel,
+					[ action.sidebar ]: action.panel,
+				},
+			};
+		case 'CLOSE_GENERAL_SIDEBAR':
+			return {
+				...state,
+				activeGeneralSidebar: null,
+			};
+		case 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL':
 			return {
 				...state,
 				panels: {
@@ -38,6 +53,23 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 					[ action.panel ]: ! get( state, [ 'panels', action.panel ], false ),
 				},
 			};
+		case 'SET_VIEWPORT_TYPE':
+			return {
+				...state,
+				viewportType: action.viewportType,
+			};
+		case 'UPDATE_MOBILE_STATE':
+			if ( action.isMobile ) {
+				return {
+					...state,
+					viewportType: 'mobile',
+					activeGeneralSidebar: null,
+				};
+			}
+			return {
+				...state,
+				viewportType: 'desktop',
+			};
 		case 'SWITCH_MODE':
 			return {
 				...state,
@@ -67,6 +99,18 @@ export function panel( state = 'document', action ) {
 	return state;
 }
 
+export function publishSidebarActive( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_PUBLISH_SIDEBAR':
+			return true;
+		case 'CLOSE_PUBLISH_SIDEBAR':
+			return false;
+		case 'TOGGLE_PUBLISH_SIDEBAR':
+			return ! state;
+	}
+	return state;
+}
+
 export function mobile( state = false, action ) {
 	if ( action.type === 'UPDATE_MOBILE_STATE' ) {
 		return action.isMobile;
@@ -77,5 +121,6 @@ export function mobile( state = false, action ) {
 export default combineReducers( {
 	preferences,
 	panel,
+	publishSidebarActive,
 	mobile,
 } );
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index f45696f080dd5c..fd7b48543e2706 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -6,7 +6,7 @@
  * @returns {string} Editing mode.
  */
 export function getEditorMode( state ) {
-	return getPreference( state, 'mode', 'visual' );
+	return getPreference( state, 'editorMode', 'visual' );
 }
 
 /**
@@ -16,8 +16,18 @@ export function getEditorMode( state ) {
  *
  * @returns {string} Active sidebar panel.
  */
-export function getActivePanel( state ) {
-	return state.panel;
+export function getActiveEditorPanel( state ) {
+	return getPreference( state, 'activeSidebarPanel', {} ).editor;
+}
+
+/**
+ * Returns the current active plugin for the plugin sidebar.
+ *
+ * @param  {Object}  state Global application state
+ * @return {String}        Active plugin sidebar plugin
+ */
+export function getActivePlugin( state ) {
+	return getPreference( state, 'activeSidebarPanel', {} ).plugins;
 }
 
 /**
@@ -46,20 +56,37 @@ export function getPreference( state, preferenceKey, defaultValue ) {
 }
 
 /**
- * Returns true if the sidebar is open, or false otherwise.
+ * Returns the opened general sidebar and null if the sidebar is closed.
  *
- * @param {Object} state   Global application state.
- * @param {string} sidebar Sidebar name (leave undefined for the default sidebar).
+ * @param {Object} state Global application state.
+ * @returns {String}     The opened general sidebar panel.
+ */
+export function getOpenedGeneralSidebar( state ) {
+	return getPreference( state, 'activeGeneralSidebar' );
+}
+
+/**
+ * Returns true if the panel is open in the currently opened sidebar.
  *
- * @returns {boolean} Whether the given sidebar is open.
+ * @param  {Object}  state   Global application state
+ * @param  {string}  sidebar Sidebar name (leave undefined for the default sidebar)
+ * @param  {string}  panel   Sidebar panel name (leave undefined for the default panel)
+ * @returns {Boolean}        Whether the given general sidebar panel is open
  */
-export function isSidebarOpened( state, sidebar ) {
-	const sidebars = getPreference( state, 'sidebars' );
-	if ( sidebar !== undefined ) {
-		return sidebars[ sidebar ];
-	}
+export function isGeneralSidebarPanelOpened( state, sidebar, panel ) {
+	const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar' );
+	const activeSidebarPanel = getPreference( state, 'activeSidebarPanel' );
+	return activeGeneralSidebar === sidebar && activeSidebarPanel === panel;
+}
 
-	return isMobile( state ) ? sidebars.mobile : sidebars.desktop;
+/**
+ * Returns true if the publish sidebar is opened.
+ *
+ * @param {Object} state Global application state
+ * @returns {bool}       Whether the publish sidebar is open.
+ */
+export function isPublishSidebarOpened( state ) {
+	return state.publishSidebarActive;
 }
 
 /**
@@ -70,19 +97,18 @@ export function isSidebarOpened( state, sidebar ) {
  * @returns {boolean} Whether sidebar is open.
  */
 export function hasOpenSidebar( state ) {
-	const sidebars = getPreference( state, 'sidebars' );
-	return isMobile( state ) ?
-		sidebars.mobile || sidebars.publish :
-		sidebars.desktop || sidebars.publish;
+	const generalSidebarOpen = getPreference( state, 'activeGeneralSidebar' ) !== null;
+	const publishSidebarOpen = state.publishSidebarActive;
+
+	return generalSidebarOpen || publishSidebarOpen;
 }
 
 /**
  * Returns true if the editor sidebar panel is open, or false otherwise.
  *
- * @param {Object} state Global application state.
- * @param {string} panel Sidebar panel name.
- *
- * @returns {boolean} Whether sidebar is open.
+ * @param  {Object}  state Global application state.
+ * @param  {String}  panel Sidebar panel name.
+ * @returns {Boolean}       Whether sidebar is open.
  */
 export function isEditorSidebarPanelOpened( state, panel ) {
 	const panels = getPreference( state, 'panels' );
@@ -118,7 +144,7 @@ export function hasFixedToolbar( state ) {
  * @param {Object} state   Global application state.
  * @param {string} feature Feature slug.
  *
- * @returns {booleean} Is active.
+ * @returns {boolean} Is active.
  */
 export function isFeatureActive( state, feature ) {
 	return !! state.preferences.features[ feature ];
diff --git a/edit-post/store/test/actions.js b/edit-post/store/test/actions.js
index 013f65e39bc7d5..7314d760ac2203 100644
--- a/edit-post/store/test/actions.js
+++ b/edit-post/store/test/actions.js
@@ -2,41 +2,92 @@
  * Internal dependencies
  */
 import {
-	toggleSidebar,
-	setActivePanel,
-	toggleSidebarPanel,
+	setGeneralSidebarActivePanel,
+	toggleGeneralSidebarEditorPanel,
+	openGeneralSidebar,
+	closeGeneralSidebar,
+	openPublishSidebar,
+	closePublishSidebar,
+	togglePublishSidebar,
+	setViewportType,
 	toggleFeature,
 } from '../actions';
 
 describe( 'actions', () => {
-	describe( 'toggleSidebar', () => {
-		it( 'should return TOGGLE_SIDEBAR action', () => {
-			expect( toggleSidebar( 'publish', true ) ).toEqual( {
-				type: 'TOGGLE_SIDEBAR',
-				sidebar: 'publish',
-				forcedValue: true,
+	describe( 'setGeneralSidebarActivePanel', () => {
+		it( 'should return SET_GENERAL_SIDEBAR_ACTIVE_PANEL action', () => {
+			expect( setGeneralSidebarActivePanel( 'editor', 'document' ) ).toEqual( {
+				type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL',
+				sidebar: 'editor',
+				panel: 'document',
 			} );
 		} );
 	} );
 
-	describe( 'setActivePanel', () => {
-		const panel = 'panelName';
-		expect( setActivePanel( panel ) ).toEqual( {
-			type: 'SET_ACTIVE_PANEL',
-			panel,
+	describe( 'openGeneralSidebar', () => {
+		it( 'should return OPEN_GENERAL_SIDEBAR action', () => {
+			const sidebar = 'sidebarName';
+			const panel = 'panelName';
+			expect( openGeneralSidebar( sidebar, panel ) ).toEqual( {
+				type: 'OPEN_GENERAL_SIDEBAR',
+				sidebar,
+				panel,
+			} );
+		} );
+	} );
+
+	describe( 'closeGeneralSidebar', () => {
+		it( 'should return CLOSE_GENERAL_SIDEBAR action', () => {
+			expect( closeGeneralSidebar() ).toEqual( {
+				type: 'CLOSE_GENERAL_SIDEBAR',
+			} );
+		} );
+	} );
+
+	describe( 'openPublishSidebar', () => {
+		it( 'should return an OPEN_PUBLISH_SIDEBAR action', () => {
+			expect( openPublishSidebar() ).toEqual( {
+				type: 'OPEN_PUBLISH_SIDEBAR',
+			} );
+		} );
+	} );
+
+	describe( 'closePublishSidebar', () => {
+		it( 'should return an CLOSE_PUBLISH_SIDEBAR action', () => {
+			expect( closePublishSidebar() ).toEqual( {
+				type: 'CLOSE_PUBLISH_SIDEBAR',
+			} );
+		} );
+	} );
+
+	describe( 'togglePublishSidebar', () => {
+		it( 'should return an TOGGLE_PUBLISH_SIDEBAR action', () => {
+			expect( togglePublishSidebar() ).toEqual( {
+				type: 'TOGGLE_PUBLISH_SIDEBAR',
+			} );
 		} );
 	} );
 
 	describe( 'toggleSidebarPanel', () => {
-		it( 'should return TOGGLE_SIDEBAR_PANEL action', () => {
+		it( 'should return TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL action', () => {
 			const panel = 'panelName';
-			expect( toggleSidebarPanel( panel ) ).toEqual( {
-				type: 'TOGGLE_SIDEBAR_PANEL',
+			expect( toggleGeneralSidebarEditorPanel( panel ) ).toEqual( {
+				type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL',
 				panel,
 			} );
 		} );
 	} );
 
+	describe( 'setViewportType', () => {
+		it( 'should return SET_VIEWPORT_TYPE action', () => {
+			const viewportType = 'mobile';
+			expect( setViewportType( viewportType ) ).toEqual( {
+				type: 'SET_VIEWPORT_TYPE',
+				viewportType,
+			} );
+		} );
+	} );
+
 	describe( 'toggleFeature', () => {
 		it( 'should return TOGGLE_FEATURE action', () => {
 			const feature = 'name';
diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index 2e829713d2f9f2..c81cd8f526a725 100644
--- a/edit-post/store/test/reducer.js
+++ b/edit-post/store/test/reducer.js
@@ -16,64 +16,42 @@ describe( 'state', () => {
 			const state = preferences( undefined, {} );
 
 			expect( state ).toEqual( {
-				mode: 'visual',
-				sidebars: {
-					desktop: true,
-					mobile: false,
-					publish: false,
+				activeGeneralSidebar: null,
+				activeSidebarPanel: {
+					editor: null,
+					plugins: null,
 				},
+				editorMode: 'visual',
 				panels: { 'post-status': true },
 				features: { fixedToolbar: false },
+				viewportType: 'desktop',
 			} );
 		} );
 
-		it( 'should toggle the given sidebar flag', () => {
-			const state = preferences( deepFreeze( { sidebars: {
-				mobile: true,
-				desktop: true,
-			} } ), {
-				type: 'TOGGLE_SIDEBAR',
-				sidebar: 'desktop',
-			} );
-
-			expect( state.sidebars ).toEqual( {
-				mobile: true,
-				desktop: false,
-			} );
-		} );
-
-		it( 'should set the sidebar open flag to true if unset', () => {
-			const state = preferences( deepFreeze( { sidebars: {
-				mobile: true,
-			} } ), {
-				type: 'TOGGLE_SIDEBAR',
-				sidebar: 'desktop',
-			} );
-
-			expect( state.sidebars ).toEqual( {
-				mobile: true,
-				desktop: true,
-			} );
-		} );
-
-		it( 'should force the given sidebar flag', () => {
-			const state = preferences( deepFreeze( { sidebars: {
-				mobile: true,
-			} } ), {
-				type: 'TOGGLE_SIDEBAR',
-				sidebar: 'desktop',
-				forcedValue: false,
+		it( 'should set the general sidebar active panel', () => {
+			const state = preferences( deepFreeze( {
+				activeGeneralSidebar: 'editor',
+				activeSidebarPanel: {
+					editor: null,
+					plugins: null,
+				},
+			} ), {
+				type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL',
+				sidebar: 'editor',
+				panel: 'document',
 			} );
-
-			expect( state.sidebars ).toEqual( {
-				mobile: true,
-				desktop: false,
+			expect( state ).toEqual( {
+				activeGeneralSidebar: 'editor',
+				activeSidebarPanel: {
+					editor: 'document',
+					plugins: null,
+				},
 			} );
 		} );
 
 		it( 'should set the sidebar panel open flag to true if unset', () => {
 			const state = preferences( deepFreeze( {} ), {
-				type: 'TOGGLE_SIDEBAR_PANEL',
+				type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL',
 				panel: 'post-taxonomies',
 			} );
 
@@ -82,7 +60,7 @@ describe( 'state', () => {
 
 		it( 'should toggle the sidebar panel open flag', () => {
 			const state = preferences( deepFreeze( { panels: { 'post-taxonomies': true } } ), {
-				type: 'TOGGLE_SIDEBAR_PANEL',
+				type: 'TOGGLE_GENERAL_SIDEBAR_EDITOR_PANEL',
 				panel: 'post-taxonomies',
 			} );
 
diff --git a/edit-post/store/test/selectors.js b/edit-post/store/test/selectors.js
index 581b0db3a0cbcd..3c21c37741d4f8 100644
--- a/edit-post/store/test/selectors.js
+++ b/edit-post/store/test/selectors.js
@@ -4,7 +4,7 @@
 import {
 	getEditorMode,
 	getPreference,
-	isSidebarOpened,
+	isGeneralSidebarPanelOpened,
 	hasOpenSidebar,
 	isEditorSidebarPanelOpened,
 	isMobile,
@@ -20,7 +20,7 @@ describe( 'selectors', () => {
 	describe( 'getEditorMode', () => {
 		it( 'should return the selected editor mode', () => {
 			const state = {
-				preferences: { mode: 'text' },
+				preferences: { editorMode: 'text' },
 			};
 
 			expect( getEditorMode( state ) ).toEqual( 'text' );
@@ -61,143 +61,66 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'isSidebarOpened', () => {
-		it( 'should return true when is not mobile and the normal sidebar is opened', () => {
+	describe( 'isGeneralSidebarPanelOpened', () => {
+		it( 'should return true when specified the sidebar panel is opened', () => {
 			const state = {
-				mobile: false,
-				preferences: {
-					sidebars: {
-						desktop: true,
-						mobile: false,
-					},
-				},
-			};
-
-			expect( isSidebarOpened( state ) ).toBe( true );
-		} );
-
-		it( 'should return false when is not mobile and the normal sidebar is closed', () => {
-			const state = {
-				mobile: false,
-				preferences: {
-					sidebars: {
-						desktop: false,
-						mobile: true,
-					},
-				},
-			};
-
-			expect( isSidebarOpened( state ) ).toBe( false );
-		} );
-
-		it( 'should return true when is mobile and the mobile sidebar is opened', () => {
-			const state = {
-				mobile: true,
 				preferences: {
-					sidebars: {
-						desktop: false,
-						mobile: true,
-					},
+					activeGeneralSidebar: 'editor',
+					viewportType: 'desktop',
+					activeSidebarPanel: 'document',
 				},
 			};
+			const panel = 'document';
+			const sidebar = 'editor';
 
-			expect( isSidebarOpened( state ) ).toBe( true );
+			expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( true );
 		} );
 
-		it( 'should return false when is mobile and the mobile sidebar is closed', () => {
+		it( 'should return false when another panel than the specified sidebar panel is opened', () => {
 			const state = {
-				mobile: true,
 				preferences: {
-					sidebars: {
-						desktop: true,
-						mobile: false,
-					},
+					activeGeneralSidebar: 'editor',
+					viewportType: 'desktop',
+					activeSidebarPanel: 'blocks',
 				},
 			};
+			const panel = 'document';
+			const sidebar = 'editor';
 
-			expect( isSidebarOpened( state ) ).toBe( false );
+			expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false );
 		} );
 
-		it( 'should return true when the given is opened', () => {
+		it( 'should return false when no sidebar panel is opened', () => {
 			const state = {
 				preferences: {
-					sidebars: {
-						publish: true,
-					},
+					activeGeneralSidebar: null,
+					viewportType: 'desktop',
+					activeSidebarPanel: null,
 				},
 			};
+			const panel = 'blocks';
+			const sidebar = 'editor';
 
-			expect( isSidebarOpened( state, 'publish' ) ).toBe( true );
-		} );
-
-		it( 'should return false when the given is not opened', () => {
-			const state = {
-				preferences: {
-					sidebars: {
-						publish: false,
-					},
-				},
-			};
-
-			expect( isSidebarOpened( state, 'publish' ) ).toBe( false );
+			expect( isGeneralSidebarPanelOpened( state, sidebar, panel ) ).toBe( false );
 		} );
 	} );
 
 	describe( 'hasOpenSidebar', () => {
-		it( 'should return true if at least one sidebar is open (using the desktop sidebar as default)', () => {
+		it( 'should return true if at least one sidebar is open', () => {
 			const state = {
-				mobile: false,
 				preferences: {
-					sidebars: {
-						desktop: true,
-						mobile: false,
-						publish: false,
-					},
+					activeSidebarPanel: null,
 				},
 			};
 
 			expect( hasOpenSidebar( state ) ).toBe( true );
 		} );
 
-		it( 'should return true if at no sidebar is open (using the desktop sidebar as default)', () => {
+		it( 'should return false if no sidebar is open', () => {
 			const state = {
-				mobile: false,
+				publishSidebarActive: false,
 				preferences: {
-					sidebars: {
-						desktop: false,
-						mobile: true,
-						publish: false,
-					},
-				},
-			};
-
-			expect( hasOpenSidebar( state ) ).toBe( false );
-		} );
-
-		it( 'should return true if at least one sidebar is open (using the mobile sidebar as default)', () => {
-			const state = {
-				mobile: true,
-				preferences: {
-					sidebars: {
-						desktop: false,
-						mobile: true,
-						publish: false,
-					},
-				},
-			};
-
-			expect( hasOpenSidebar( state ) ).toBe( true );
-		} );
-
-		it( 'should return true if at no sidebar is open (using the mobile sidebar as default)', () => {
-			const state = {
-				mobile: true,
-				preferences: {
-					sidebars: {
-						desktop: true,
-						mobile: false,
-						publish: false,
-					},
+					activeGeneralSidebar: null,
 				},
 			};
 

From f5586c98fe41289d0bc4289110d79eff5e5a3bf9 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Wed, 31 Jan 2018 14:27:05 +0100
Subject: [PATCH 02/19] Fix sidebar styling

---
 edit-post/components/plugins-panel/index.js   |  2 +-
 edit-post/components/plugins-panel/style.scss | 22 +++++++------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index 3a95767b0ea769..1e163f98b5a4c9 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -50,7 +50,7 @@ function PluginsPanel( { onClose, plugin } ) {
 	} = getPluginSidebar( plugin );
 	return (
 		<div
-			className="editor-sidebar"
+			className="editor-plugins-panel"
 			role="region"
 			aria-label={ __( 'Editor plugins' ) }
 			tabIndex="-1">
diff --git a/edit-post/components/plugins-panel/style.scss b/edit-post/components/plugins-panel/style.scss
index d769f721676058..df8c6cf4899181 100644
--- a/edit-post/components/plugins-panel/style.scss
+++ b/edit-post/components/plugins-panel/style.scss
@@ -1,7 +1,8 @@
-.editor-sidebar {
+.edit-post-layout {
   .editor-plugins-panel {
     position: fixed;
-    top: 0;
+    z-index: z-index( '.edit-post-sidebar' );
+    top: $admin-bar-height + $header-height;
     right: 0;
     bottom: 0;
     width: $sidebar-width;
@@ -21,6 +22,7 @@
 
     @include break-medium() {
       top: $admin-bar-height + $header-height;
+      border-left: 1px solid $light-gray-500;
     }
 
     > .components-panel .components-panel__header {
@@ -57,20 +59,12 @@
   }
 }
 
-.edit-post-layout .editor-plugins-panel {
-  position: fixed;
-  z-index: z-index( '.edit-post-sidebar' );
-  top: $admin-bar-height-big;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  overflow: auto;
+.edit-post-layout.is-sidebar-opened .editor-plugins-panel {
+  /* Sidebar covers screen on mobile */
+  width: 100%;
 
+  /* Sidebar sits on the side on larger breakpoints */
   @include break-medium() {
-    top: $admin-bar-height;
-    left: auto;
     width: $sidebar-width;
-    border-left: 1px solid $light-gray-500;
-    @include slide_in_right;
   }
 }

From 26c088e7cc07b964de1d42c68982bb0aafd466d8 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Wed, 31 Jan 2018 14:48:00 +0100
Subject: [PATCH 03/19] Remove unused mobile middleware

---
 edit-post/store/index.js         |  6 ++----
 edit-post/utils/mobile/README.md | 15 ---------------
 edit-post/utils/mobile/index.js  | 16 ----------------
 3 files changed, 2 insertions(+), 35 deletions(-)
 delete mode 100644 edit-post/utils/mobile/README.md
 delete mode 100644 edit-post/utils/mobile/index.js

diff --git a/edit-post/store/index.js b/edit-post/store/index.js
index 3dfc4b96916636..3673b09241e743 100644
--- a/edit-post/store/index.js
+++ b/edit-post/store/index.js
@@ -8,7 +8,6 @@ import { registerReducer, withRehydratation, loadAndPersist } from '@wordpress/d
  */
 import reducer from './reducer';
 import enhanceWithBrowserSize from './mobile';
-import applyMiddlewares from './middlewares';
 import { BREAK_MEDIUM } from './constants';
 
 /**
@@ -17,9 +16,8 @@ import { BREAK_MEDIUM } from './constants';
 const STORAGE_KEY = `WP_EDIT_POST_PREFERENCES_${ window.userSettings.uid }`;
 const MODULE_KEY = 'core/edit-post';
 
-const store = applyMiddlewares(
-	registerReducer( MODULE_KEY, withRehydratation( reducer, 'preferences', STORAGE_KEY ) )
-);
+const store = registerReducer( MODULE_KEY, withRehydratation( reducer, 'preferences', STORAGE_KEY ) );
+
 loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
 enhanceWithBrowserSize( store, BREAK_MEDIUM );
 
diff --git a/edit-post/utils/mobile/README.md b/edit-post/utils/mobile/README.md
deleted file mode 100644
index fff39c3f681c85..00000000000000
--- a/edit-post/utils/mobile/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-mobileMiddleware
-===========
-
-`mobileMiddleware` is a very simple [redux middleware](https://redux.js.org/docs/advanced/Middleware.html) that sets the isSidebarOpened flag to false on REDUX_REHYDRATE payloads. 
-This useful to make isSidebarOpened false on mobile even if the value that was saved to local storage was true.
-The middleware just needs to be added to the enhancers list:
-
-```js
-	const enhancers = [
-		...
-		applyMiddleware( mobileMiddleware ),
-	];
-	...
-	const store = createStore( reducer, flowRight( enhancers ) );
-```
diff --git a/edit-post/utils/mobile/index.js b/edit-post/utils/mobile/index.js
deleted file mode 100644
index 67e941bb2bd406..00000000000000
--- a/edit-post/utils/mobile/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { isMobile } from '../../store/selectors';
-import { toggleSidebar } from '../../store/actions';
-
-/**
- * Middleware
- */
-
-export const mobileMiddleware = ( { getState } ) => next => action => {
-	if ( action.type === 'TOGGLE_SIDEBAR' && action.sidebar === undefined ) {
-		return next( toggleSidebar( isMobile( getState() ) ? 'mobile' : 'desktop', action.forcedValue ) );
-	}
-	return next( action );
-};

From d221bd9cc21fd8d022405bb7417a8f47792941c7 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Thu, 1 Feb 2018 10:07:17 +0100
Subject: [PATCH 04/19] Fix editor mode switching

---
 edit-post/store/reducer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit-post/store/reducer.js b/edit-post/store/reducer.js
index a20ddbb3c554f3..f73d8768d4be4f 100644
--- a/edit-post/store/reducer.js
+++ b/edit-post/store/reducer.js
@@ -73,7 +73,7 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 		case 'SWITCH_MODE':
 			return {
 				...state,
-				mode: action.mode,
+				editorMode: action.mode,
 			};
 		case 'TOGGLE_FEATURE':
 			return {

From d31b21ca536f39d143102a5026eb577db097556f Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Thu, 1 Feb 2018 10:11:22 +0100
Subject: [PATCH 05/19] Fix editorMode switch test

---
 edit-post/store/test/reducer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index c81cd8f526a725..98f1b11efd6a64 100644
--- a/edit-post/store/test/reducer.js
+++ b/edit-post/store/test/reducer.js
@@ -73,7 +73,7 @@ describe( 'state', () => {
 				mode: 'text',
 			} );
 
-			expect( state ).toEqual( { mode: 'text' } );
+			expect( state ).toEqual( { editorMode: 'text' } );
 		} );
 
 		it( 'should toggle a feature flag', () => {

From b69794bce5adf89387ff72455be5837199650eb7 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Thu, 1 Feb 2018 10:21:19 +0100
Subject: [PATCH 06/19] Fix documentation

---
 edit-post/api/sidebar.js     |  2 +-
 edit-post/store/actions.js   | 12 ++++++------
 edit-post/store/selectors.js | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
index cafc30e2c113fe..c9a8f366db1e7d 100644
--- a/edit-post/api/sidebar.js
+++ b/edit-post/api/sidebar.js
@@ -106,7 +106,7 @@ export function renderSidebar( name, settings ) {
  * Activates the given sidebar.
  *
  * @param  {string} name The name of the sidebar to activate.
- * @return {void}
+ * @returns {void}
  */
 function activateSidebar( name ) {
 	store.dispatch( openGeneralSidebar( 'plugins' ) );
diff --git a/edit-post/store/actions.js b/edit-post/store/actions.js
index 145b62c8e3bafd..4bc4c0ddf24ccc 100644
--- a/edit-post/store/actions.js
+++ b/edit-post/store/actions.js
@@ -3,9 +3,9 @@
  * Returns an action object used in signalling that the user switched the active
  * sidebar tab panel.
  *
- * @param  {String} sidebar Sidebar name
- * @param  {String} panel   Panel name
- * @return {Object}         Action object
+ * @param  {string} sidebar Sidebar name
+ * @param  {string} panel   Panel name
+ * @returns {Object}         Action object
  */
 export function setGeneralSidebarActivePanel( sidebar, panel ) {
 	return {
@@ -68,7 +68,7 @@ export function closePublishSidebar() {
 /**
  * Returns an action object used in signalling that the user toggles the publish sidebar
  *
- * @return {Object} Action object
+ * @returns {Object} Action object
  */
 export function togglePublishSidebar() {
 	return {
@@ -80,7 +80,7 @@ export function togglePublishSidebar() {
  * Returns an action object used in signalling that use toggled a panel in the editor.
  *
  * @param {string}  panel The panel to toggle.
- * @return {Object} Action object.
+ * @returns {Object} Action object.
 */
 export function toggleGeneralSidebarEditorPanel( panel ) {
 	return {
@@ -93,7 +93,7 @@ export function toggleGeneralSidebarEditorPanel( panel ) {
  * Returns an action object used in signalling that the viewport type preference should be set.
  *
  * @param {string} viewportType The viewport type (desktop or mobile).
- * @return {Object} Action object.
+ * @returns {Object} Action object.
  */
 export function setViewportType( viewportType ) {
 	return {
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index fd7b48543e2706..1bf74df7714ef1 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -24,7 +24,7 @@ export function getActiveEditorPanel( state ) {
  * Returns the current active plugin for the plugin sidebar.
  *
  * @param  {Object}  state Global application state
- * @return {String}        Active plugin sidebar plugin
+ * @returns {string}        Active plugin sidebar plugin
  */
 export function getActivePlugin( state ) {
 	return getPreference( state, 'activeSidebarPanel', {} ).plugins;
@@ -59,7 +59,7 @@ export function getPreference( state, preferenceKey, defaultValue ) {
  * Returns the opened general sidebar and null if the sidebar is closed.
  *
  * @param {Object} state Global application state.
- * @returns {String}     The opened general sidebar panel.
+ * @returns {string}     The opened general sidebar panel.
  */
 export function getOpenedGeneralSidebar( state ) {
 	return getPreference( state, 'activeGeneralSidebar' );
@@ -71,7 +71,7 @@ export function getOpenedGeneralSidebar( state ) {
  * @param  {Object}  state   Global application state
  * @param  {string}  sidebar Sidebar name (leave undefined for the default sidebar)
  * @param  {string}  panel   Sidebar panel name (leave undefined for the default panel)
- * @returns {Boolean}        Whether the given general sidebar panel is open
+ * @returns {boolean}        Whether the given general sidebar panel is open
  */
 export function isGeneralSidebarPanelOpened( state, sidebar, panel ) {
 	const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar' );
@@ -83,7 +83,7 @@ export function isGeneralSidebarPanelOpened( state, sidebar, panel ) {
  * Returns true if the publish sidebar is opened.
  *
  * @param {Object} state Global application state
- * @returns {bool}       Whether the publish sidebar is open.
+ * @returns {boolean}       Whether the publish sidebar is open.
  */
 export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
@@ -107,8 +107,8 @@ export function hasOpenSidebar( state ) {
  * Returns true if the editor sidebar panel is open, or false otherwise.
  *
  * @param  {Object}  state Global application state.
- * @param  {String}  panel Sidebar panel name.
- * @returns {Boolean}       Whether sidebar is open.
+ * @param  {string}  panel Sidebar panel name.
+ * @returns {boolean}       Whether sidebar is open.
  */
 export function isEditorSidebarPanelOpened( state, panel ) {
 	const panels = getPreference( state, 'panels' );

From 3cdf86f520f8f379b50eeed62872e24fb7516b76 Mon Sep 17 00:00:00 2001
From: Anton Timmermans <email@atimmer.com>
Date: Wed, 7 Feb 2018 16:29:12 +0100
Subject: [PATCH 07/19] Change `@returns` into `@return`

---
 edit-post/api/sidebar.js                    |  8 ++++----
 edit-post/components/plugins-panel/index.js |  2 +-
 edit-post/components/sidebar/index.js       |  4 ++--
 edit-post/store/actions.js                  | 12 ++++++------
 edit-post/store/selectors.js                | 12 ++++++------
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
index c9a8f366db1e7d..4b26a5a4289ebe 100644
--- a/edit-post/api/sidebar.js
+++ b/edit-post/api/sidebar.js
@@ -22,7 +22,7 @@ const sidebars = {};
  * @param {string}   settings.title  The name to show in the settings menu.
  * @param {Function} settings.render The function that renders the sidebar.
  *
- * @returns {Object} The final sidebar settings object.
+ * @return {Object} The final sidebar settings object.
  */
 export function registerSidebar( name, settings ) {
 	settings = {
@@ -77,7 +77,7 @@ export function registerSidebar( name, settings ) {
  *
  * @param {string} name The name of the sidebar to retrieve the settings for.
  *
- * @returns {Object} The settings object of the sidebar. Or null if the
+ * @return {Object} The settings object of the sidebar. Or null if the
  *                         sidebar doesn't exist.
  */
 export function getSidebarSettings( name ) {
@@ -95,7 +95,7 @@ export function getSidebarSettings( name ) {
  * @param {string}   settings.title  The name to show in the settings menu.
  * @param {Function} settings.render The function that renders the sidebar.
  *
- * @returns {void}
+ * @return {void}
  */
 export function renderSidebar( name, settings ) {
 	registerSidebar( name, settings );
@@ -106,7 +106,7 @@ export function renderSidebar( name, settings ) {
  * Activates the given sidebar.
  *
  * @param  {string} name The name of the sidebar to activate.
- * @returns {void}
+ * @return {void}
  */
 function activateSidebar( name ) {
 	store.dispatch( openGeneralSidebar( 'plugins' ) );
diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index 1e163f98b5a4c9..1b6600100379cc 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -23,7 +23,7 @@ import { closeGeneralSidebar } from '../../store/actions';
  *
  * @param {string} plugin The currently active plugin.
  *
- * @returns {Object} The React element to render as a panel.
+ * @return {Object} The React element to render as a panel.
  */
 export function getPluginSidebar( plugin ) {
 	const pluginSidebar = getSidebarSettings( plugin );
diff --git a/edit-post/components/sidebar/index.js b/edit-post/components/sidebar/index.js
index 563ab9c1fa7331..6a696b443b5fde 100644
--- a/edit-post/components/sidebar/index.js
+++ b/edit-post/components/sidebar/index.js
@@ -23,7 +23,7 @@ import { getActiveEditorPanel } from '../../store/selectors';
  *
  * @param {string} panel The currently active panel.
  *
- * @returns {Object} The React element to render as a panel.
+ * @return {Object} The React element to render as a panel.
  */
 function getPanel( panel ) {
 	switch ( panel ) {
@@ -41,7 +41,7 @@ function getPanel( panel ) {
  *
  * @param {string} panel The currently active panel.
  *
- * @returns {Object} The rendered sidebar.
+ * @return {Object} The rendered sidebar.
  */
 const Sidebar = ( { panel } ) => {
 	const ActivePanel = getPanel( panel );
diff --git a/edit-post/store/actions.js b/edit-post/store/actions.js
index ef3793dece6719..4bdd38952d7d98 100644
--- a/edit-post/store/actions.js
+++ b/edit-post/store/actions.js
@@ -5,7 +5,7 @@
  *
  * @param  {string} sidebar Sidebar name
  * @param  {string} panel   Panel name
- * @returns {Object}         Action object
+ * @return {Object}         Action object
  */
 export function setGeneralSidebarActivePanel( sidebar, panel ) {
 	return {
@@ -20,7 +20,7 @@ export function setGeneralSidebarActivePanel( sidebar, panel ) {
  *
  * @param {string} sidebar        Sidebar to open.
  * @param {string} [panel = null] Panel to open in the sidebar. Null if unchanged.
- * @returns {Object}              Action object.
+ * @return {Object}              Action object.
  */
 export function openGeneralSidebar( sidebar, panel = null ) {
 	return {
@@ -45,7 +45,7 @@ export function closeGeneralSidebar() {
  * Returns an action object used in signalling that the user opened the publish
  * sidebar.
  *
- * @returns {Object} Action object
+ * @return {Object} Action object
  */
 export function openPublishSidebar() {
 	return {
@@ -68,7 +68,7 @@ export function closePublishSidebar() {
 /**
  * Returns an action object used in signalling that the user toggles the publish sidebar
  *
- * @returns {Object} Action object
+ * @return {Object} Action object
  */
 export function togglePublishSidebar() {
 	return {
@@ -80,7 +80,7 @@ export function togglePublishSidebar() {
  * Returns an action object used in signalling that use toggled a panel in the editor.
  *
  * @param {string}  panel The panel to toggle.
- * @returns {Object} Action object.
+ * @return {Object} Action object.
 */
 export function toggleGeneralSidebarEditorPanel( panel ) {
 	return {
@@ -93,7 +93,7 @@ export function toggleGeneralSidebarEditorPanel( panel ) {
  * Returns an action object used in signalling that the viewport type preference should be set.
  *
  * @param {string} viewportType The viewport type (desktop or mobile).
- * @returns {Object} Action object.
+ * @return {Object} Action object.
  */
 export function setViewportType( viewportType ) {
 	return {
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 6f65d5dbe884e4..36fa5e6c54b80b 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -24,7 +24,7 @@ export function getActiveEditorPanel( state ) {
  * Returns the current active plugin for the plugin sidebar.
  *
  * @param  {Object}  state Global application state
- * @returns {string}        Active plugin sidebar plugin
+ * @return {string}        Active plugin sidebar plugin
  */
 export function getActivePlugin( state ) {
 	return getPreference( state, 'activeSidebarPanel', {} ).plugins;
@@ -59,7 +59,7 @@ export function getPreference( state, preferenceKey, defaultValue ) {
  * Returns the opened general sidebar and null if the sidebar is closed.
  *
  * @param {Object} state Global application state.
- * @returns {string}     The opened general sidebar panel.
+ * @return {string}     The opened general sidebar panel.
  */
 export function getOpenedGeneralSidebar( state ) {
 	return getPreference( state, 'activeGeneralSidebar' );
@@ -71,7 +71,7 @@ export function getOpenedGeneralSidebar( state ) {
  * @param  {Object}  state   Global application state
  * @param  {string}  sidebar Sidebar name (leave undefined for the default sidebar)
  * @param  {string}  panel   Sidebar panel name (leave undefined for the default panel)
- * @returns {boolean}        Whether the given general sidebar panel is open
+ * @return {boolean}        Whether the given general sidebar panel is open
  */
 export function isGeneralSidebarPanelOpened( state, sidebar, panel ) {
 	const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar' );
@@ -83,7 +83,7 @@ export function isGeneralSidebarPanelOpened( state, sidebar, panel ) {
  * Returns true if the publish sidebar is opened.
  *
  * @param {Object} state Global application state
- * @returns {boolean}       Whether the publish sidebar is open.
+ * @return {boolean}       Whether the publish sidebar is open.
  */
 export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
@@ -108,7 +108,7 @@ export function hasOpenSidebar( state ) {
  *
  * @param  {Object}  state Global application state.
  * @param  {string}  panel Sidebar panel name.
- * @returns {boolean}       Whether the sidebar panel is open.
+ * @return {boolean}       Whether the sidebar panel is open.
  */
 export function isEditorSidebarPanelOpened( state, panel ) {
 	const panels = getPreference( state, 'panels' );
@@ -144,7 +144,7 @@ export function hasFixedToolbar( state ) {
  * @param {Object} state   Global application state.
  * @param {string} feature Feature slug.
  *
- * @returns {boolean} Is active.
+ * @return {boolean} Is active.
  */
 export function isFeatureActive( state, feature ) {
 	return !! state.preferences.features[ feature ];

From fbf1225da9003cb8c1ff692da2d71c4813c912f8 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Mon, 12 Feb 2018 15:42:32 +0100
Subject: [PATCH 08/19] Add storeKey to make the plugins panel connect to the
 correct store

---
 edit-post/components/plugins-panel/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index 1b6600100379cc..877bc994206db4 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -76,5 +76,7 @@ export default connect(
 		};
 	}, {
 		onClose: closeGeneralSidebar,
-	}
+	},
+	undefined,
+	{ storeKey: 'edit-post' }
 )( withFocusReturn( PluginsPanel ) );

From 380a1258ab06cac6a969c4897de2ab072508841f Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 13 Feb 2018 10:22:38 +0100
Subject: [PATCH 09/19] Rename 'plugins' to 'plugin' in selector

---
 edit-post/api/index.js               | 1 +
 edit-post/api/sidebar.js             | 6 +++---
 edit-post/components/layout/index.js | 2 +-
 edit-post/store/defaults.js          | 4 ++--
 edit-post/store/selectors.js         | 2 +-
 edit-post/store/test/reducer.js      | 6 +++---
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/edit-post/api/index.js b/edit-post/api/index.js
index d4ca54d44c6164..6fa256c8d25000 100644
--- a/edit-post/api/index.js
+++ b/edit-post/api/index.js
@@ -1,4 +1,5 @@
 export {
 	renderSidebar,
+	activateSidebar,
 	getSidebarSettings,
 } from './sidebar';
diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
index 4b26a5a4289ebe..05f16175724bb1 100644
--- a/edit-post/api/sidebar.js
+++ b/edit-post/api/sidebar.js
@@ -108,7 +108,7 @@ export function renderSidebar( name, settings ) {
  * @param  {string} name The name of the sidebar to activate.
  * @return {void}
  */
-function activateSidebar( name ) {
-	store.dispatch( openGeneralSidebar( 'plugins' ) );
-	store.dispatch( setGeneralSidebarActivePanel( 'plugins', name ) );
+export function activateSidebar( name ) {
+	store.dispatch( openGeneralSidebar( 'plugin' ) );
+	store.dispatch( setGeneralSidebarActivePanel( 'plugin', name ) );
 }
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 7a44e45723a1e5..7c547e79e965f5 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -41,7 +41,7 @@ function GeneralSidebar( { openedGeneralSidebar } ) {
 	switch ( openedGeneralSidebar ) {
 		case 'editor':
 			return <Sidebar />;
-		case 'plugins':
+		case 'plugin':
 			return <PluginsPanel />;
 		default:
 	}
diff --git a/edit-post/store/defaults.js b/edit-post/store/defaults.js
index 07807509ac3035..55c296b843c4e1 100644
--- a/edit-post/store/defaults.js
+++ b/edit-post/store/defaults.js
@@ -1,10 +1,10 @@
 export const PREFERENCES_DEFAULTS = {
 	editorMode: 'visual',
 	viewportType: 'desktop', // 'desktop' | 'mobile'
-	activeGeneralSidebar: null, // null | 'editor' | 'plugins'
+	activeGeneralSidebar: null, // null | 'editor' | 'plugin'
 	activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values
 		editor: null, // 'document' | 'block'
-		plugins: null, // pluginId
+		plugin: null, // pluginId
 	},
 	panels: { 'post-status': true },
 	features: {
diff --git a/edit-post/store/selectors.js b/edit-post/store/selectors.js
index 36fa5e6c54b80b..72b41c87fd8a66 100644
--- a/edit-post/store/selectors.js
+++ b/edit-post/store/selectors.js
@@ -27,7 +27,7 @@ export function getActiveEditorPanel( state ) {
  * @return {string}        Active plugin sidebar plugin
  */
 export function getActivePlugin( state ) {
-	return getPreference( state, 'activeSidebarPanel', {} ).plugins;
+	return getPreference( state, 'activeSidebarPanel', {} ).plugin;
 }
 
 /**
diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index 98f1b11efd6a64..e4b2f5ad5ffff2 100644
--- a/edit-post/store/test/reducer.js
+++ b/edit-post/store/test/reducer.js
@@ -19,7 +19,7 @@ describe( 'state', () => {
 				activeGeneralSidebar: null,
 				activeSidebarPanel: {
 					editor: null,
-					plugins: null,
+					plugin: null,
 				},
 				editorMode: 'visual',
 				panels: { 'post-status': true },
@@ -33,7 +33,7 @@ describe( 'state', () => {
 				activeGeneralSidebar: 'editor',
 				activeSidebarPanel: {
 					editor: null,
-					plugins: null,
+					plugin: null,
 				},
 			} ), {
 				type: 'SET_GENERAL_SIDEBAR_ACTIVE_PANEL',
@@ -44,7 +44,7 @@ describe( 'state', () => {
 				activeGeneralSidebar: 'editor',
 				activeSidebarPanel: {
 					editor: 'document',
-					plugins: null,
+					plugin: null,
 				},
 			} );
 		} );

From cdfc5a602fb63a1132d6a3e48bf049dc00a61ea9 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 13 Feb 2018 10:25:54 +0100
Subject: [PATCH 10/19] Set editor as default activeGeneralSidebar

---
 edit-post/store/defaults.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit-post/store/defaults.js b/edit-post/store/defaults.js
index 55c296b843c4e1..42bf7c23ef28e7 100644
--- a/edit-post/store/defaults.js
+++ b/edit-post/store/defaults.js
@@ -1,7 +1,7 @@
 export const PREFERENCES_DEFAULTS = {
 	editorMode: 'visual',
 	viewportType: 'desktop', // 'desktop' | 'mobile'
-	activeGeneralSidebar: null, // null | 'editor' | 'plugin'
+	activeGeneralSidebar: editor, // null | 'editor' | 'plugin'
 	activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values
 		editor: null, // 'document' | 'block'
 		plugin: null, // pluginId

From 872ddcca3be0eacfc21e374a6582b9ac0f883e42 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 13 Feb 2018 10:44:35 +0100
Subject: [PATCH 11/19] Unexpose getSidebarSettings

---
 edit-post/api/index.js   | 1 -
 edit-post/api/sidebar.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/edit-post/api/index.js b/edit-post/api/index.js
index 6fa256c8d25000..88841d860b7696 100644
--- a/edit-post/api/index.js
+++ b/edit-post/api/index.js
@@ -1,5 +1,4 @@
 export {
 	renderSidebar,
 	activateSidebar,
-	getSidebarSettings,
 } from './sidebar';
diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
index 05f16175724bb1..1b24b739b4206b 100644
--- a/edit-post/api/sidebar.js
+++ b/edit-post/api/sidebar.js
@@ -80,7 +80,7 @@ export function registerSidebar( name, settings ) {
  * @return {Object} The settings object of the sidebar. Or null if the
  *                         sidebar doesn't exist.
  */
-export function getSidebarSettings( name ) {
+function getSidebarSettings( name ) {
 	if ( ! sidebars.hasOwnProperty( name ) ) {
 		return null;
 	}

From 271db7cbeb98eee7b9fddfc0530f5161415bb680 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 13 Feb 2018 14:42:39 +0100
Subject: [PATCH 12/19] Remove duplicate scss and remove renderSidebar function

---
 edit-post/api/index.js                        |  2 +-
 edit-post/api/sidebar.js                      | 18 +-----
 edit-post/components/layout/index.js          |  1 -
 edit-post/components/plugins-panel/index.js   |  6 +-
 edit-post/components/plugins-panel/style.scss | 55 +------------------
 edit-post/components/sidebar/style.scss       | 17 +++---
 6 files changed, 16 insertions(+), 83 deletions(-)

diff --git a/edit-post/api/index.js b/edit-post/api/index.js
index 88841d860b7696..1252f8010ec3f4 100644
--- a/edit-post/api/index.js
+++ b/edit-post/api/index.js
@@ -1,4 +1,4 @@
 export {
-	renderSidebar,
+	registerSidebar,
 	activateSidebar,
 } from './sidebar';
diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js
index 1b24b739b4206b..b2d52152d421e2 100644
--- a/edit-post/api/sidebar.js
+++ b/edit-post/api/sidebar.js
@@ -80,28 +80,12 @@ export function registerSidebar( name, settings ) {
  * @return {Object} The settings object of the sidebar. Or null if the
  *                         sidebar doesn't exist.
  */
-function getSidebarSettings( name ) {
+export function getSidebarSettings( name ) {
 	if ( ! sidebars.hasOwnProperty( name ) ) {
 		return null;
 	}
 	return sidebars[ name ];
 }
-
-/**
- * Renders a plugin sidebar.
- *
- * @param {string}   name      The name of the plugin sidebar.
- * @param {Object}   settings  The settings for this sidebar.
- * @param {string}   settings.title  The name to show in the settings menu.
- * @param {Function} settings.render The function that renders the sidebar.
- *
- * @return {void}
- */
-export function renderSidebar( name, settings ) {
-	registerSidebar( name, settings );
-	activateSidebar( name );
-}
-
 /**
  * Activates the given sidebar.
  *
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 7c547e79e965f5..4d810160b01b36 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -85,7 +85,6 @@ function Layout( {
 			{ publishSidebarOpen && <PostPublishPanel onClose={ onClosePublishSidebar } /> }
 			{
 				openedGeneralSidebar !== null && <GeneralSidebar
-					onCloseGeneralSidebar={ onCloseGeneralSidebar }
 					openedGeneralSidebar={ openedGeneralSidebar } />
 			}
 			<Popover.Slot />
diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index 877bc994206db4..b798c64875679d 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -50,11 +50,11 @@ function PluginsPanel( { onClose, plugin } ) {
 	} = getPluginSidebar( plugin );
 	return (
 		<div
-			className="editor-plugins-panel"
+			className="edit-post-sidebar edit-post-plugins-panel"
 			role="region"
 			aria-label={ __( 'Editor plugins' ) }
 			tabIndex="-1">
-			<div className="editor-plugins-panel__header">
+			<div className="edit-post-plugins-panel__header">
 				<h3>{ title }</h3>
 				<IconButton
 					onClick={ onClose }
@@ -62,7 +62,7 @@ function PluginsPanel( { onClose, plugin } ) {
 					label={ __( 'Close settings' ) }
 				/>
 			</div>
-			<div className="editor-plugins-panel__content">
+			<div className="edit-post-plugins-panel__content">
 				{ render() }
 			</div>
 		</div>
diff --git a/edit-post/components/plugins-panel/style.scss b/edit-post/components/plugins-panel/style.scss
index df8c6cf4899181..3e665202917700 100644
--- a/edit-post/components/plugins-panel/style.scss
+++ b/edit-post/components/plugins-panel/style.scss
@@ -1,48 +1,5 @@
 .edit-post-layout {
-  .editor-plugins-panel {
-    position: fixed;
-    z-index: z-index( '.edit-post-sidebar' );
-    top: $admin-bar-height + $header-height;
-    right: 0;
-    bottom: 0;
-    width: $sidebar-width;
-    border-left: 1px solid $light-gray-500;
-    background: $light-gray-300;
-    color: $dark-gray-500;
-    height: 100vh;
-    overflow: hidden;
-
-    @include break-small() {
-      top: $admin-bar-height-big + $header-height;
-      z-index: auto;
-      height: auto;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    @include break-medium() {
-      top: $admin-bar-height + $header-height;
-      border-left: 1px solid $light-gray-500;
-    }
-
-    > .components-panel .components-panel__header {
-      position: fixed;
-      z-index: z-index('.components-panel__header');
-      top: 0;
-      left: 0;
-      right: 0;
-      height: $panel-header-height;
-
-      @include break-small() {
-        position: inherit;
-        top: auto;
-        left: auto;
-        right: auto;
-      }
-    }
-  }
-
-  .editor-plugins-panel__header {
+  .edit-post-plugins-panel__header {
     padding-left: 16px;
     height: $header-height;
     border-bottom: 1px solid $light-gray-500;
@@ -58,13 +15,3 @@
     }
   }
 }
-
-.edit-post-layout.is-sidebar-opened .editor-plugins-panel {
-  /* Sidebar covers screen on mobile */
-  width: 100%;
-
-  /* Sidebar sits on the side on larger breakpoints */
-  @include break-medium() {
-    width: $sidebar-width;
-  }
-}
diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss
index 8f24e08a5e9452..e1c118f5707413 100644
--- a/edit-post/components/sidebar/style.scss
+++ b/edit-post/components/sidebar/style.scss
@@ -88,13 +88,16 @@
 	}
 }
 
-.edit-post-layout.is-sidebar-opened .edit-post-sidebar {
-	/* Sidebar covers screen on mobile */
-	width: 100%;
-
-	/* Sidebar sits on the side on larger breakpoints */
-	@include break-medium() {
-		width: $sidebar-width;
+.edit-post-layout.is-sidebar-opened {
+	.edit-post-sidebar,
+	.edit-post-plugins-panel {
+		/* Sidebar covers screen on mobile */
+		width: 100%;
+
+		/* Sidebar sits on the side on larger breakpoints */
+		@include break-medium() {
+			width: $sidebar-width;
+		}
 	}
 }
 

From e116f9631fe8d9ac7e82e4471b44ab51eb32f0d8 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 13 Feb 2018 15:41:40 +0100
Subject: [PATCH 13/19] Fix unittests

---
 edit-post/components/layout/index.js | 4 +---
 edit-post/store/defaults.js          | 2 +-
 edit-post/store/test/reducer.js      | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 4d810160b01b36..74d9abc50004c3 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -34,7 +34,7 @@ import {
 	getOpenedGeneralSidebar,
 	isPublishSidebarOpened,
 } from '../../store/selectors';
-import { closeGeneralSidebar, closePublishSidebar } from '../../store/actions';
+import { closePublishSidebar } from '../../store/actions';
 import PluginsPanel from '../../components/plugins-panel/index.js';
 
 function GeneralSidebar( { openedGeneralSidebar } ) {
@@ -54,7 +54,6 @@ function Layout( {
 	publishSidebarOpen,
 	openedGeneralSidebar,
 	hasFixedToolbar,
-	onCloseGeneralSidebar,
 	onClosePublishSidebar,
 } ) {
 	const className = classnames( 'edit-post-layout', {
@@ -101,7 +100,6 @@ export default connect(
 		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 	} ),
 	{
-		onCloseGeneralSidebar: closeGeneralSidebar,
 		onClosePublishSidebar: closePublishSidebar,
 	},
 	undefined,
diff --git a/edit-post/store/defaults.js b/edit-post/store/defaults.js
index 42bf7c23ef28e7..bb5277c4efb797 100644
--- a/edit-post/store/defaults.js
+++ b/edit-post/store/defaults.js
@@ -1,7 +1,7 @@
 export const PREFERENCES_DEFAULTS = {
 	editorMode: 'visual',
 	viewportType: 'desktop', // 'desktop' | 'mobile'
-	activeGeneralSidebar: editor, // null | 'editor' | 'plugin'
+	activeGeneralSidebar: 'editor', // null | 'editor' | 'plugin'
 	activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values
 		editor: null, // 'document' | 'block'
 		plugin: null, // pluginId
diff --git a/edit-post/store/test/reducer.js b/edit-post/store/test/reducer.js
index e4b2f5ad5ffff2..c0f7e9499f4334 100644
--- a/edit-post/store/test/reducer.js
+++ b/edit-post/store/test/reducer.js
@@ -16,7 +16,7 @@ describe( 'state', () => {
 			const state = preferences( undefined, {} );
 
 			expect( state ).toEqual( {
-				activeGeneralSidebar: null,
+				activeGeneralSidebar: 'editor',
 				activeSidebarPanel: {
 					editor: null,
 					plugin: null,

From 2388b6045288a2c0bdb64c1d8d6191e4572a95d6 Mon Sep 17 00:00:00 2001
From: IreneStr <irene@yoast.com>
Date: Tue, 20 Feb 2018 16:21:19 +0100
Subject: [PATCH 14/19] Fix header height, font and close button

---
 edit-post/components/plugins-panel/style.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/edit-post/components/plugins-panel/style.scss b/edit-post/components/plugins-panel/style.scss
index 3e665202917700..9a1e1dfb5a4f80 100644
--- a/edit-post/components/plugins-panel/style.scss
+++ b/edit-post/components/plugins-panel/style.scss
@@ -1,7 +1,7 @@
 .edit-post-layout {
   .edit-post-plugins-panel__header {
-    padding-left: 16px;
-    height: $header-height;
+    padding: 0 8px 0 16px;
+    height: $panel-header-height;
     border-bottom: 1px solid $light-gray-500;
     display: flex;
     align-items: center;
@@ -12,6 +12,10 @@
 
     h3 {
       margin: 0;
+      font-weight: 400;
+      color: inherit;
     }
   }
 }
+
+

From c417b7ecc80e1779ae0411116cdfd514e17e6fce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Wed, 21 Feb 2018 12:28:50 +0100
Subject: [PATCH 15/19] Update index.js

---
 edit-post/components/plugins-panel/index.js | 27 +++------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index b798c64875679d..a79a3b4a9c6458 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -17,37 +17,18 @@ import { getSidebarSettings } from '../../api/sidebar';
 import { getActivePlugin } from '../../store/selectors';
 import { closeGeneralSidebar } from '../../store/actions';
 
-/**
- * Returns the sidebar that should be rendered in the sidebar registered by
- * plugins.
- *
- * @param {string} plugin The currently active plugin.
- *
- * @return {Object} The React element to render as a panel.
- */
-export function getPluginSidebar( plugin ) {
+function PluginsPanel( { onClose, plugin } ) {
 	const pluginSidebar = getSidebarSettings( plugin );
 
 	if ( ! pluginSidebar ) {
-		return {
-			title: __( 'Error: Unregistered plugin requested.' ),
-			render: () => {
-				return <Panel>
-					<PanelBody>
-						{ sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) }
-					</PanelBody>
-				</Panel>;
-			},
-		};
+		return null;
 	}
-	return pluginSidebar;
-}
 
-function PluginsPanel( { onClose, plugin } ) {
 	const {
 		title,
 		render,
-	} = getPluginSidebar( plugin );
+	} = pluginSidebar;
+
 	return (
 		<div
 			className="edit-post-sidebar edit-post-plugins-panel"

From 0570733faf6f89dc61116eb5e0ffb494ff2e1109 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Wed, 21 Feb 2018 12:29:57 +0100
Subject: [PATCH 16/19] Edit Post: Remove no longer used getPluginSidebar

---
 edit-post/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/edit-post/index.js b/edit-post/index.js
index 0fbbf94de98b66..3a01e5532c82ca 100644
--- a/edit-post/index.js
+++ b/edit-post/index.js
@@ -20,7 +20,6 @@ import Layout from './components/layout';
 import store from './store';
 
 export * from './api';
-export { getPluginSidebar } from './components/plugins-panel/index.js';
 
 // Configure moment globally
 moment.locale( dateSettings.l10n.locale );

From 29beb8269f91ded814792ebae6117b9fc9ac7a6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Wed, 21 Feb 2018 12:56:14 +0100
Subject: [PATCH 17/19] Edit Post: Remove no longer used imports from
 PluginsPanel

---
 edit-post/components/plugins-panel/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/edit-post/components/plugins-panel/index.js b/edit-post/components/plugins-panel/index.js
index a79a3b4a9c6458..57be1622457e96 100644
--- a/edit-post/components/plugins-panel/index.js
+++ b/edit-post/components/plugins-panel/index.js
@@ -6,8 +6,8 @@ import { connect } from 'react-redux';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { IconButton, withFocusReturn } from '@wordpress/components';
 
 /**
  * Internal Dependencies

From ab02dffe0fb7b6e35d60e1390be07236efffc8a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Wed, 21 Feb 2018 14:04:49 +0100
Subject: [PATCH 18/19] Edit Post: Update Layout to handle missing plugin
 properly

---
 edit-post/components/layout/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 74d9abc50004c3..6ac82111c01dea 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -33,9 +33,11 @@ import {
 	isFeatureActive,
 	getOpenedGeneralSidebar,
 	isPublishSidebarOpened,
+	getActivePlugin,
 } from '../../store/selectors';
 import { closePublishSidebar } from '../../store/actions';
 import PluginsPanel from '../../components/plugins-panel/index.js';
+import { getSidebarSettings } from '../../api/sidebar';
 
 function GeneralSidebar( { openedGeneralSidebar } ) {
 	switch ( openedGeneralSidebar ) {
@@ -55,9 +57,13 @@ function Layout( {
 	openedGeneralSidebar,
 	hasFixedToolbar,
 	onClosePublishSidebar,
+	plugin,
 } ) {
+
+	const isSidebarOpened = layoutHasOpenSidebar &&
+		( openedGeneralSidebar !== 'plugin' || getSidebarSettings( plugin ) );
 	const className = classnames( 'edit-post-layout', {
-		'is-sidebar-opened': layoutHasOpenSidebar,
+		'is-sidebar-opened': isSidebarOpened,
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
@@ -98,6 +104,7 @@ export default connect(
 		openedGeneralSidebar: getOpenedGeneralSidebar( state ),
 		publishSidebarOpen: isPublishSidebarOpened( state ),
 		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
+		plugin: getActivePlugin( state ),
 	} ),
 	{
 		onClosePublishSidebar: closePublishSidebar,

From 85d6ff1539eef6fc69b37f137fca62885127f3e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Wed, 21 Feb 2018 14:11:55 +0100
Subject: [PATCH 19/19] Edit Post: Remove obsolete blank line

---
 edit-post/components/layout/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
index 6ac82111c01dea..6037e50d33251a 100644
--- a/edit-post/components/layout/index.js
+++ b/edit-post/components/layout/index.js
@@ -59,7 +59,6 @@ function Layout( {
 	onClosePublishSidebar,
 	plugin,
 } ) {
-
 	const isSidebarOpened = layoutHasOpenSidebar &&
 		( openedGeneralSidebar !== 'plugin' || getSidebarSettings( plugin ) );
 	const className = classnames( 'edit-post-layout', {