Add an API to add a plugin sidebar

editor/api/index.js

@@ -0,0 +1,4 @@
+export {
+	renderSidebar,
+	getSidebarSettings,
+} from './sidebar';

editor/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 ) );
+}

editor/components/block-settings-menu/block-inspector-button.js

@@ -13,58 +13,46 @@ 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 }
-		>
+			label={ small ? label : undefined } >
 			{ ! small && label }
 		</IconButton>
 	);
 }
 
 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' ) );
 		},
 	} )
 )( withSpokenMessages( BlockInspectorButton ) );

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,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 ) );

editor/components/plugins-panel/style.scss

@@ -0,0 +1,58 @@
+.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;
+		}
+	}
+}