Add an API to add a plugin sidebar

editor/api/index.js

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

editor/api/sidebar.js

@@ -0,0 +1,107 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+
+/* External dependencies */
+import { isFunction } from 'lodash';
+
+/* Internal dependencies */
+import store from '../store';
+import { setActivePanel } from '../store/actions';
+import { applyFilters } from '@wordpress/hooks';
+
+const sidebars = {};
+
+/**
+ * Registers a sidebar with 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;
+ }
+ 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;
+ }
+ if ( ! settings || ! isFunction( settings.render ) ) {
+ console.error(
+ 'The "render" property must be specified and must be a valid function.'
+ );
+ return;
+ }
+ if ( sidebars[ name ] ) {
+ console.error(
+ 'Sidebar "' + name + '" is already registered.'
+ );
+ }
+
+ if ( ! ( 'title' in settings ) || settings.title === '' ) {
+ console.error(
+ 'The sidebar "' + name + '" must have a title.'
+ );
+ return;
+ }
+ if ( typeof settings.title !== 'string' ) {
+ console.error(
+ 'Sidebar titles must be strings.'
+ );
+ return;
+ }
+
+ 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.
+ *
+ * @returns {false|Object} The settings object of the sidebar. Or false if the
+ * sidebar doesn't exist.
+ */
+export function getSidebar( name ) {
+ if ( ! sidebars.hasOwnProperty( name ) ) {
+ return false;
+ }
+
+ return sidebars[ name ];
+}
+
+/**
+ * Retrieves all sidebars that are registered.
+ *
+ * @returns {Object[]} Registered sidebars.
+ */
+export function getSidebars() {
+ return sidebars;
+}
+
+/**
+ * Activates the gives sidebar.
+ *
+ * @param {string} name The name of the sidebar to activate.
+ */
+export function activateSidebar( name ) {
+ store.dispatch( setActivePanel( name ) );
+}

editor/edit-post/header/ellipsis-menu/index.js

@@ -10,6 +10,7 @@ import { IconButton, Dropdown } from '@wordpress/components';
 import './style.scss';
 import ModeSwitcher from '../mode-switcher';
 import FixedToolbarToggle from '../fixed-toolbar-toggle';
+import Plugins from '../plugins';
 
 const element = (
  <Dropdown
@@ -28,6 +29,8 @@ const element = (
  <ModeSwitcher onSelect={ onClose } />
  <div className="editor-ellipsis-menu__separator" />
  <FixedToolbarToggle onToggle={ onClose } />
+ <div className="editor-ellipsis-menu__separator" />
+ <Plugins onToggle={ onClose } />
  </div>
  ) }
  />

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

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getSidebars, activateSidebar } from '../../../api/sidebar';
+import { MenuItemsGroup } from '../../../../components';
+import { getActivePanel, isEditorSidebarOpened } from '../../../store/selectors';
+import { connect } from 'react-redux';
+import { toggleSidebar } from '../../../store/actions';
+
+/**
+ * Renders a list of plugins that will activate different UI elements.
+ *
+ * @param {Object} props Props.
+ * @param {Function} props.onSwitch Function to call when a plugin is
+ * switched to.
+ * @param {string} props.activePanel The currently active panel.
+ * @param {boolean} props.isSidebarOpened Whether the sidebar is currently open.
+ * @param {Function} props.onToggleSidebar Function to call when the sidebar
+ * should be toggled.
+ *
+ * @returns {Object} The rendered list of menu items.
+ */
+function Plugins( { activePanel, onSwitch, isSidebarOpened, onToggleSidebar } ) {
+ const sidebars = getSidebars();
+
+ // This makes sure no check mark is before a plugin if the sidebar is closed.
+ if ( ! isSidebarOpened ) {
+ activePanel = '';
+ }
+
+ /**
+ * Handles the user clicking on one of the plugins in the menu
+ *
+ * @param {string} panelToActivate The sidebar panel to activate.
+ */
+ function onSelect( panelToActivate ) {
+ onSwitch( panelToActivate );
+
+ if ( ! isSidebarOpened ) {
+ onToggleSidebar();
+ }
+ }
+
+ const plugins = map( sidebars, ( sidebar ) => {
+ return {
+ value: sidebar.name,
+ label: sidebar.title,
+ };
+ } );
+
+ return (
+ <MenuItemsGroup
+ label={ __( 'Plugins' ) }
+ choices={ plugins }
+ value={ activePanel }
+ onSelect={ onSelect }
+ />
+ );
+}
+
+export default connect(
+ ( state ) => {
+ return {
+ activePanel: getActivePanel( state ),
+ isSidebarOpened: isEditorSidebarOpened( state ),
+ };
+ },
+ ( dispatch, ownProps ) => {
+ return {
+ onSwitch: ( value ) => {
+ activateSidebar( value );
+ ownProps.onToggle( value );
+ },
+ onToggleSidebar: () => {
+ dispatch( toggleSidebar() );
+ },
+ };
+ }
+)( Plugins );

editor/edit-post/sidebar/index.js

@@ -6,8 +6,8 @@ import { connect } from 'react-redux';
 /**
  * WordPress Dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { withFocusReturn } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { withFocusReturn, Panel, PanelBody } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -16,10 +16,68 @@ import './style.scss';
 import PostSettings from './post-settings';
 import BlockInspectorPanel from './block-inspector-panel';
 import Header from './header';
+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.
+ *
+ * @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 getPluginSidebar( panel );
+ }
+}
+
+/**
+ * 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="editor-sidebar"
@@ -28,8 +86,7 @@ const Sidebar = ( { panel } ) => {
  tabIndex="-1"
  >
  <Header />
- { panel === 'document' && <PostSettings /> }
- { panel === 'block' && <BlockInspectorPanel /> }
+ <ActivePanel { ...props } />
  </div>
  );
 };

editor/index.js

@@ -19,6 +19,7 @@ import { EditorProvider, ErrorBoundary } from './components';
 import { initializeMetaBoxState } from './store/actions';
 
 export * from './components';
+export * from './api';
 import store from './store'; // Registers the state tree
 
 // Configure moment globally