Add an API to add a plugin sidebar

editor/api/sidebar.js

@@ -5,7 +5,7 @@ import { isFunction } from 'lodash';
 
 /* Internal dependencies */
 import store from '../store';
-import { setActivePanel } from '../store/actions';
+import { setActivePlugin } from '../store/actions';
 import { applyFilters } from '@wordpress/hooks';
 
 const sidebars = {};
@@ -103,5 +103,5 @@ export function getSidebars() {
  * @param {string} name The name of the sidebar to activate.
  */
 export function activateSidebar( name ) {
-	store.dispatch( setActivePanel( name ) );
+	store.dispatch( setActivePlugin( name ) );
 }

editor/components/index.js

@@ -10,6 +10,7 @@ export { default as MetaBoxes } from './meta-boxes';
 export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesParent } from './page-attributes/parent';
+export { default as PluginsPanel } from './plugins-panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostComments } from './post-comments';

editor/components/plugins-panel/index.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { compose } from '@wordpress/element';
+import { Panel, PanelBody, IconButton, withFocusReturn } from '@wordpress/components';
+import { getActivePlugin } from '../../store/selectors';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { getSidebar } from '../../api/sidebar';
+
+/**
+ * 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.
+ */
+function getPluginSidebar( plugin ) {
+	const pluginSidebar = getSidebar( plugin );
+
+	if ( ! pluginSidebar ) {
+		return () => {
+			return <Panel>
+				<PanelBody>
+					{ sprintf( __( 'No matching plugin sidebar found for plugin "%s"' ), plugin ) }
+				</PanelBody>
+			</Panel>;
+		};
+	}
+
+	return pluginSidebar.render;
+}
+
+function PluginsPanel( { onClose, plugin } ) {
+	return (
+		<div 
+			className="editor-sidebar"
+			role="region"
+			aria-label={ __( 'Editor plugins' ) }
+			tabIndex="-1">
+			<div className="components-panel__header editor-sidebar__panel-tabs">
+				<IconButton
+					onClick={ onClose }
+					icon="no-alt"
+					label={ __( 'Close settings' ) }
+				/>
+			</div>
+			<div className="editor-plugins-panel__content">
+				{ getPluginSidebar( plugin )() }
+			</div>
+		</div>
+	);
+}
+
+export default connect(
+	( state ) => {
+		return {
+			plugin: getActivePlugin( state ),
+		};
+	}
+)( withFocusReturn( PluginsPanel ) );

editor/components/plugins-panel/style.scss

@@ -0,0 +1,49 @@
+.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;
+	align-content: space-between;
+}

editor/edit-post/header/plugins/index.js

@@ -14,7 +14,7 @@ import { MenuItemsGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import { getSidebars, activateSidebar } from '../../../api/sidebar';
-import { getActivePanel, hasOpenSidebar  } from '../../../store/selectors';
+import { getActivePanel, hasOpenSidebar } from '../../../store/selectors';
 import { toggleSidebar } from '../../../store/actions';
 
 /**
@@ -30,7 +30,7 @@ import { toggleSidebar } from '../../../store/actions';
  *
  * @returns {Object} The rendered list of menu items.
  */
-function Plugins( { activePanel, onSwitch, isSidebarOpen, onToggleSidebar } ) {
+function Plugins( { activePanel, onSwitch, isSidebarOpen, onTogglePluginsSidebar } ) {
 	const sidebars = getSidebars();
 
 	// This makes sure no check mark is before a plugin if the sidebar is closed.
@@ -47,7 +47,7 @@ function Plugins( { activePanel, onSwitch, isSidebarOpen, onToggleSidebar } ) {
 		onSwitch( panelToActivate );
 
 		if ( ! isSidebarOpen ) {
-			onToggleSidebar();
+			onTogglePluginsSidebar();
 		}
 	}
 
@@ -81,8 +81,8 @@ export default connect(
 				activateSidebar( value );
 				ownProps.onToggle( value );
 			},
-			onToggleSidebar: () => {
-				dispatch( toggleSidebar() );
+			onTogglePluginsSidebar: () => {
+				dispatch( toggleSidebar( 'plugins' ) );
 			},
 		};
 	}

editor/edit-post/layout/index.js

@@ -26,6 +26,7 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	PostPublishPanel,
+	PluginsPanel
 } from '../../components';
 import {
 	getEditorMode,
@@ -40,6 +41,7 @@ function Layout( {
 	layoutHasOpenSidebar,
 	isDefaultSidebarOpened,
 	isPublishSidebarOpened,
+	isPluginsSidebarOpened,
 	hasFixedToolbar,
 	onToggleSidebar,
 } ) {
@@ -48,6 +50,7 @@ function Layout( {
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 	const closePublishPanel = () => onToggleSidebar( 'publish', false );
+	const closePluginsPanel = () => onToggleSidebar( 'plugins', false );
 
 	return (
 		<div className={ className }>
@@ -71,6 +74,7 @@ function Layout( {
 			</div>
 			{ isDefaultSidebarOpened && <Sidebar /> }
 			{ isPublishSidebarOpened && <PostPublishPanel onClose={ closePublishPanel } /> }
+			{ isPluginsSidebarOpened && <PluginsPanel onClose={ closePluginsPanel } /> }
 			<Popover.Slot />
 		</div>
 	);
@@ -82,6 +86,7 @@ export default connect(
 		layoutHasOpenSidebar: hasOpenSidebar( state ),
 		isDefaultSidebarOpened: isSidebarOpened( state ),
 		isPublishSidebarOpened: isSidebarOpened( state, 'publish' ),
+		isPluginsSidebarOpened: isSidebarOpened( state, 'plugins' ),
 		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 	} ),
 	{ onToggleSidebar: toggleSidebar }

editor/edit-post/layout/style.scss

@@ -101,3 +101,22 @@
 .editor-layout .editor-post-publish-panel__header-publish-button {
 	margin-right: 52px; // This number is approximative to keep the publish button at the same position when opening the panel
 }
+
+.editor-layout .editor-plugins-panel {
+	position: fixed;
+	z-index: z-index( '.editor-layout .editor-post-publish-panel' );
+	top: $admin-bar-height-big;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+	position: fixed;
+
+	@include break-medium() {
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width;
+		border-left: 1px solid $light-gray-500;
+		@include slide_in_right;
+	}
+}

editor/edit-post/sidebar/index.js

@@ -20,30 +20,6 @@ import { getSidebar } from '../../api/sidebar';
 
 import { getActivePanel } from '../../store/selectors';
 
-/**
- * Returns the sidebar that should be rendered in the sidebar registered by
- * plugins.
- *
- * @param {string} panel The currently active panel.
- *
- * @returns {Object} The React element to render as a panel.
- */
-function getPluginSidebar( panel ) {
-	const pluginSidebar = getSidebar( panel );
-
-	if ( ! pluginSidebar ) {
-		return () => {
-			return <Panel>
-				<PanelBody>
-					{ sprintf( __( 'No matching plugin sidebar found for panel "%s"' ), panel ) }
-				</PanelBody>
-			</Panel>;
-		};
-	}
-
-	return pluginSidebar.render;
-}
-
 /**
  * Returns the panel that should be rendered in the sidebar.
  *
@@ -60,7 +36,7 @@ function getPanel( panel ) {
 			return BlockInspectorPanel;
 
 		default:
-			return getPluginSidebar( panel );
+			return PostSettings;
 	}
 }
 

editor/store/actions.js

@@ -334,7 +334,7 @@ export function stopTyping() {
 /**
  * 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  {String} sidebar  Name of the sidebar to toggle (desktop, mobile, plugins or publish)
  * @param  {Boolean?} force  Force a sidebar state
  * @return {Object}          Action object
  */
@@ -359,6 +359,19 @@ export function setActivePanel( panel ) {
 	};
 }
 
+/**
+ * Returns an action object usid in signalling that the user switched the active plugin.
+ * 
+ * @param  {String} plugin  The plugin name
+ * @return {Object}         Action object
+ */
+export function setActivePlugin( plugin ) {
+	return {
+		type: 'SET_ACTIVE_PLUGIN',
+		plugin,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user toggled a sidebar panel
  *

editor/store/defaults.js

@@ -4,6 +4,7 @@ export const PREFERENCES_DEFAULTS = {
 		desktop: true,
 		mobile: false,
 		publish: false,
+		plugins: false,
 	},
 	panels: { 'post-status': true },
 	recentlyUsedBlocks: [],

editor/store/reducer.js

@@ -578,6 +578,15 @@ export function panel( state = 'document', action ) {
 	return state;
 }
 
+export function plugin( state = 'null', action ) {
+	switch( action.type ) {
+		case 'SET_ACTIVE_PLUGIN':
+			return action.plugin;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning current network request state (whether a request to the WP
  * REST API is in progress, successful, or failed).
@@ -786,6 +795,7 @@ export default optimist( combineReducers( {
 	hoveredBlock,
 	blocksMode,
 	blockInsertionPoint,
+	plugin,
 	preferences,
 	panel,
 	saving,

editor/store/selectors.js

@@ -97,6 +97,16 @@ export function getActivePanel( state ) {
 	return state.panel;
 }
 
+/**
+ * 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 state.plugin;
+}
+
 /**
  * Returns the preferences (these preferences are persisted locally)
  *
@@ -145,8 +155,8 @@ export function isSidebarOpened( state, sidebar ) {
 export function hasOpenSidebar( state ) {
 	const sidebars = getPreference( state, 'sidebars' );
 	return isMobile( state ) ?
-		sidebars.mobile || sidebars.publish :
-		sidebars.desktop || sidebars.publish;
+		sidebars.mobile || sidebars.publish || sidebars.plugins :
+		sidebars.desktop || sidebars.publish || sidebars.plugins ;
 }
 
 /**