Extensibility: Plugin sidebar api

edit-post/components/layout/index.js

@@ -38,6 +38,7 @@ function Layout( {
 	mode,
 	editorSidebarOpened,
 	pluginSidebarOpened,
+	sidebarName,
 	publishSidebarOpened,
 	hasFixedToolbar,
 	closePublishSidebar,
@@ -82,7 +83,7 @@ function Layout( {
 				/>
 			) }
 			{ editorSidebarOpened && <Sidebar /> }
-			{ pluginSidebarOpened && <PluginSidebar.Slot /> }
+			{ pluginSidebarOpened && <PluginSidebar.Slot name={ sidebarName } /> }
 			<Popover.Slot />
 			<PluginArea />
 		</div>
@@ -94,6 +95,7 @@ export default compose(
 		mode: select( 'core/edit-post' ).getEditorMode(),
 		editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
 		pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(),
+		sidebarName: select( 'core/edit-post' ).getActiveGeneralSidebarName(),
 		publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
 		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
 		metaBoxes: select( 'core/edit-post' ).getMetaBoxes(),

edit-post/components/plugin-sidebar/index.js

@@ -1,110 +1,57 @@
 /**
  * WordPress dependencies
  */
-import { Component, Children, cloneElement, compose } from '@wordpress/element';
-import { Slot, Fill, withFocusReturn } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { withPluginContext } from '@wordpress/plugins';
+import { compose } from '@wordpress/element';
+import { Slot, Fill, withFocusReturn, withContext } from '@wordpress/components';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import SidebarLayout from './sidebar-layout';
-import ErrorBoundary from './sidebar-error-boundary';
 
 /**
  * Name of slot in which the sidebar should fill.
  *
  * @type {String}
  */
-const SLOT_NAME = 'PluginSidebar';
+const SLOT_NAME = 'plugin-sidebar';
 
 /**
- * The plugin sidebar fill.
+ * Renders the plugin sidebar fill.
+ *
+ * @return {WPElement} Plugin sidebar fill.
  */
-class PluginSidebar extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.state = { invalid: false };
-
-		if ( typeof props.name !== 'string' ) {
-			// eslint-disable-next-line no-console
-			console.error( 'PluginSidebar name should be of type string' );
-			this.state.invalid = true;
-		}
-		if ( ! /^[a-z][a-z0-9-]*$/.test( props.name ) ) {
-			// eslint-disable-next-line no-console
-			console.error( 'Sidebar names must include only lowercase alphanumeric characters or dashes,' +
-				' and start with a letter. Example: "my-sidebar".' );
-			this.state.invalid = true;
-		}
-	}
-
-	/**
-	 * Generates the UI plugin identifier by combining the plugin name and the sidebar name.
-	 *
-	 * Also registers the plugin in the plugin registry.
-	 */
-	componentWillMount() {
-		if ( ! this.namespacedName ) {
-			this.namespacedName = `plugin-sidebar/${ this.props.pluginContext.namespace }/${ this.props.name }`;
-		}
-	}
-
-	/**
-	 * Renders the PluginSidebar component.
-	 *
-	 * @return {ReactElement} The rendered component.
-	 */
-	render() {
-		if ( this.props.activePlugin !== this.namespacedName || this.state.invalid ) {
-			return null;
-		}
-
-		const { children, ...props } = this.props;
-		const newProps = {
-			...props,
-			namespacedName: this.namespacedName,
-		};
-
-		return (
-			<Fill name={ SLOT_NAME }>
-				<SidebarLayout
-					title={ props.title }
-					onClose={ props.onClose } >
-					<ErrorBoundary pluginName={ this.namespacedName }>
-						{ typeof children === 'string' ? children : cloneElement( Children.only( children ), newProps ) }
-					</ErrorBoundary>
-				</SidebarLayout>
-			</Fill>
-		);
-	}
+function PluginSidebar( { pluginName, name, title, onClose, children } ) {
+	return (
+		<Fill name={ [ SLOT_NAME, pluginName, name ].join( '/' ) }>
+			<SidebarLayout
+				title={ title }
+				onClose={ onClose } >
+				{ children }
+			</SidebarLayout>
+		</Fill>
+	);
 }
 
-const WrappedPluginSidebar = compose( [
-	withSelect( select => {
-		return {
-			activePlugin: select( 'core/edit-post' ).getActiveGeneralSidebarName(),
-		};
-	} ),
+PluginSidebar = compose( [
 	withDispatch( dispatch => {
 		return {
 			onClose: dispatch( 'core/edit-post' ).closeGeneralSidebar,
 		};
 	} ),
 	withFocusReturn,
-	withPluginContext,
+	withContext( 'pluginName' )(),
 ] )( PluginSidebar );
 
 /**
  * The plugin sidebar slot.
  *
- * @return {ReactElement} The plugin sidebar slot.
+ * @return {WPElement} The plugin sidebar slot.
  */
-WrappedPluginSidebar.Slot = () => (
-	<Slot name={ SLOT_NAME } />
+PluginSidebar.Slot = ( { name } ) => (
+	<Slot name={ [ SLOT_NAME, name ].join( '/' ) } />
 );
 
-export default WrappedPluginSidebar;
+export default PluginSidebar;

edit-post/store/selectors.js

@@ -34,13 +34,8 @@ export function isEditorSidebarOpened( state ) {
  * @return {boolean}     Whether the plugin sidebar is opened.
  */
 export function isPluginSidebarOpened( state ) {
-	const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar', null );
-
-	if ( ! activeGeneralSidebar || typeof activeGeneralSidebar !== 'string' ) {
-		return false;
-	}
-
-	return activeGeneralSidebar.startsWith( 'plugin-sidebar/' );
+	const activeGeneralSidebar = getActiveGeneralSidebarName( state );
+	return !! activeGeneralSidebar && ! isEditorSidebarOpened( state );
 }
 
 /**
@@ -51,11 +46,7 @@ export function isPluginSidebarOpened( state ) {
  * @return {?string} Active general sidebar name.
  */
 export function getActiveGeneralSidebarName( state ) {
-	const activeGeneralSidebar = getPreference( state, 'activeGeneralSidebar', null );
-
-	return activeGeneralSidebar && ( isEditorSidebarOpened( state ) || isPluginSidebarOpened( state ) ) ?
-		activeGeneralSidebar :
-		null;
+	return getPreference( state, 'activeGeneralSidebar', null );
 }
 
 /**

plugins/README.md

@@ -41,7 +41,7 @@ wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/second-sid
 
 ### Available UI components
 
-The available UI components are found in the global variable `wp.editPost.__experimental`, and are React components.
+The available UI components are found in the global variable `wp.plugins.__experimental`, and are React components.
 
 #### PluginSidebar
 

plugins/api/index.js

@@ -1,15 +1,106 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * External dependencies
+ */
+import { isFunction } from 'lodash';
+
+/**
+ * Plugin definitions keyed by plugin name.
+ *
+ * @type {Object.<string,WPPlugin>}
+ */
+const plugins = {};
+
 /**
- * Internal dependencies
+ * Registers a plugin to the editor.
+ *
+ * @param {string}   name   The name of the plugin.
+ * @param {Object}   settings        The settings for this plugin.
+ * @param {Function} settings.render The function that renders the plugin.
+ *
+ * @return {Object} The final plugin settings object.
  */
-import PluginRegistry from './plugin';
+export function registerPlugin( name, settings ) {
+	if ( typeof settings !== 'object' ) {
+		console.error(
+			'No settings object provided!'
+		);
+		return null;
+	}
+	if ( typeof name !== 'string' ) {
+		console.error(
+			'Plugin names must be strings.'
+		);
+		return null;
+	}
+	if ( ! /^[a-z][a-z0-9-]*$/.test( name ) ) {
+		console.error(
+			'Plugin names must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-plugin".'
+		);
+		return null;
+	}
+	if ( plugins[ name ] ) {
+		console.error(
+			`Plugin "${ name }" is already registered.`
+		);
+	}
+	if ( ! isFunction( settings.render ) ) {
+		console.error(
+			'The "render" property must be specified and must be a valid function.'
+		);
+		return null;
+	}
 
-const registry = PluginRegistry.getInstance();
+	settings.name = name;
+	settings.sidebar = {};
 
-const __experimental = {
-	registerPlugin: registry.registerPlugin,
-	getRegisteredUIComponent: registry.getRegisteredUIComponent,
-};
+	settings = applyFilters( 'plugins.registerPlugin', settings, name );
 
-export {
-	__experimental,
-};
+	return plugins[ settings.name ] = settings;
+}
+
+/**
+ * Unregisters a plugin by name.
+ *
+ * @param {string} name Plugin name.
+ *
+ * @return {?WPPlugin} The previous plugin settings object, if it has been
+ *                     successfully unregistered; otherwise `undefined`.
+ */
+export function unregisterPlugin( name ) {
+	if ( ! plugins[ name ] ) {
+		console.error(
+			'Plugin "' + name + '" is not registered.'
+		);
+		return;
+	}
+	const oldPlugin = plugins[ name ];
+	delete plugins[ name ];
+	return oldPlugin;
+}
+
+/**
+ * Returns a registered plugin settings.
+ *
+ * @param {string} name Plugin name.
+ *
+ * @return {?Object} Plugin setting.
+ */
+export function getPlugin( name ) {
+	return plugins[ name ];
+}
+
+/**
+ * Returns all registered plugins.
+ *
+ * @return {Array} Plugin settings.
+ */
+export function getPlugins() {
+	return Object.values( plugins );
+}