Add More Menu Item Api

blocks/api/registration.js

@@ -9,6 +9,7 @@ import { get, isFunction, some } from 'lodash';
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks';
+import { validateNamespacedId } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -94,16 +95,7 @@ export function registerBlockType( name, settings ) {
 		...settings,
 	};
 
-	if ( typeof name !== 'string' ) {
-		console.error(
-			'Block names must be strings.'
-		);
-		return;
-	}
-	if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
-		console.error(
-			'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
-		);
+	if ( ! validateNamespacedId( name, 'Block names' ) ) {
 		return;
 	}
 	if ( blocks[ name ] ) {

blocks/api/test/registration.js

@@ -51,31 +51,31 @@ describe( 'blocks', () => {
 
 		it( 'should reject blocks without a namespace', () => {
 			const block = registerBlockType( 'doing-it-wrong' );
-			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block' );
+			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-id' );
 			expect( block ).toBeUndefined();
 		} );
 
 		it( 'should reject blocks with too many namespaces', () => {
 			const block = registerBlockType( 'doing/it/wrong' );
-			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block' );
+			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-id' );
 			expect( block ).toBeUndefined();
 		} );
 
 		it( 'should reject blocks with invalid characters', () => {
 			const block = registerBlockType( 'still/_doing_it_wrong' );
-			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block' );
+			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-id' );
 			expect( block ).toBeUndefined();
 		} );
 
 		it( 'should reject blocks with uppercase characters', () => {
 			const block = registerBlockType( 'Core/Paragraph' );
-			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block' );
+			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-id' );
 			expect( block ).toBeUndefined();
 		} );
 
 		it( 'should reject blocks not starting with a letter', () => {
 			const block = registerBlockType( 'my-plugin/4-fancy-block', defaultBlockSettings );
-			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block' );
+			expect( console ).toHaveErroredWith( 'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-id' );
 			expect( block ).toBeUndefined();
 		} );
 

edit-post/api/index.js

@@ -1,3 +1,6 @@
+export {
+	registerMoreMenuItem as __experimentalRegisterMoreMenuItem,
+} from './more-menu-item';
 export {
 	registerSidebar,
 	activateSidebar,

edit-post/api/more-menu-item.js

@@ -0,0 +1,91 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+
+/**
+ * Wordpress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { validateNamespacedId } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import { isString } from 'lodash';
+import { activateSidebar } from './sidebar';
+
+const menuItems = {};
+
+/**
+ * Registers a plugin under the more menu.
+ *
+ * @param {string}       menuItemId      The unique identifier of the plugin. Should be in
+ *                                       `[namespace]/[name]` format.
+ * @param {Object}       settings        The settings for this menu item.
+ * @param {string}       settings.title  The name to show in the settings menu.
+ * @param {func}         settings.target The registered plugin that should be activated.
+ * @param {ReactElement} [settings.icon] SVG React Element.
+ *
+ * @return {Object} The final sidebar settings object.
+ */
+export function registerMoreMenuItem( menuItemId, settings ) {
+	settings = {
+		menuItemId,
+		...settings,
+	};
+
+	settings = applyFilters( 'editor.registerMoreMenuItem', settings, menuItemId );
+
+	if ( ! validateNamespacedId( menuItemId ) ) {
+		return null;
+	}
+	if ( menuItems[ menuItemId ] ) {
+		console.error(
+			`Menu item "${ menuItemId }" is already registered.`
+		);
+	}
+
+	if ( ! settings.title ) {
+		console.error(
+			`Menu item "${ menuItemId }" must have a title.`
+		);
+		return null;
+	}
+	if ( typeof settings.title !== 'string' ) {
+		console.error(
+			'Menu items title must be strings.'
+		);
+		return null;
+	}
+
+	if ( settings.icon && isString( settings.icon ) ) {
+		console.error(
+			'Menu item icon must be a react component'
+		);
+		return null;
+	}
+
+	if ( ! settings.target ) {
+		console.error(
+			`Menu item "${ menuItemId }" must have a target.`
+		);
+		return null;
+	}
+	if ( typeof settings.target !== 'string' ) {
+		console.error(
+			'Menu items target must be strings.'
+		);
+		return null;
+	}
+
+	settings.callback = activateSidebar.bind( null, settings.target );
+
+	return menuItems[ menuItemId ] = settings;
+}
+
+/**
+ * Retrieves all menu items that are registered.
+ *
+ * @return {Object} Registered menu items.
+ */
+export function getMoreMenuItems() {
+	return menuItems;
+}

edit-post/api/sidebar.js

@@ -1,12 +1,21 @@
 /* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
 
-/* External dependencies */
+/**
+ * External dependencies
+ */
 import { isFunction } from 'lodash';
 
-/* Internal dependencies */
+/**
+ * Wordpress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { validateNamespacedId } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
 import store from '../store';
 import { setGeneralSidebarActivePanel, openGeneralSidebar } from '../store/actions';
-import { applyFilters } from '@wordpress/hooks';
 
 const sidebars = {};
 
@@ -30,16 +39,7 @@ export function registerSidebar( name, settings ) {
 		...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.'
-		);
+	if ( ! validateNamespacedId( name ) ) {
 		return null;
 	}
 	if ( ! settings || ! isFunction( settings.render ) ) {

edit-post/api/test/more-menu-item.js

@@ -0,0 +1,43 @@
+let registerMoreMenuItem, getMoreMenuItems, registerSidebar;
+function requireAll() {
+	jest.resetModules();
+	const sidebar = require( '../sidebar' );
+	registerSidebar = sidebar.registerSidebar;
+	const moreMenuItem = require( '../more-menu-item' );
+	registerMoreMenuItem = moreMenuItem.registerMoreMenuItem;
+	getMoreMenuItems = moreMenuItem.getMoreMenuItems;
+}
+
+requireAll();
+
+describe( 'registerMoreMenuItem', () => {
+	beforeEach( requireAll );
+
+	it( 'successfully registers a more menu item', () => {
+		registerSidebar( 'plugins/sidebar', {
+			title: 'Plugin Title',
+			render: () => 'Component',
+		} );
+		registerMoreMenuItem( 'gutenberg/plugin', {
+			title: 'Plugin',
+			target: 'gutenberg/plugin',
+		} );
+		expect( getMoreMenuItems()[ 'gutenberg/plugin' ] ).toBeDefined();
+	} );
+
+	it( 'throws an error when a more menu item with the same id already exists', () => {
+		registerSidebar( 'plugins/sidebar', {
+			title: 'Plugin Title',
+			render: () => 'Component',
+		} );
+		registerMoreMenuItem( 'gutenberg/plugin', {
+			title: 'Plugin',
+			target: 'gutenberg/plugin',
+		} );
+		registerMoreMenuItem( 'gutenberg/plugin', {
+			title: 'Plugin',
+			target: 'gutenberg/plugin',
+		} );
+		expect( console ).toHaveErrored();
+	} );
+} );

edit-post/components/header/more-menu/index.js

@@ -10,6 +10,7 @@ import { IconButton, Dropdown, MenuItemsGroup } from '@wordpress/components';
 import './style.scss';
 import ModeSwitcher from '../mode-switcher';
 import FixedToolbarToggle from '../fixed-toolbar-toggle';
+import Plugins from '../plugins';
 
 const MoreMenu = () => (
 	<Dropdown
@@ -27,6 +28,7 @@ const MoreMenu = () => (
 			<div className="edit-post-more-menu__content">
 				<ModeSwitcher onSelect={ onClose } />
 				<FixedToolbarToggle onToggle={ onClose } />
+				<Plugins onSelect={ onClose } />
 				<MenuItemsGroup
 					label={ __( 'Tools' ) }
 					filterName="editPost.MoreMenu.tools"

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

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { map, isEmpty } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withInstanceId, IconButton, MenuItemsGroup } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getMoreMenuItems } from '../../../api/more-menu-item';
+
+/**
+ * Renders a list of plugins that will activate different UI elements.
+ *
+ * @param {Object} props The component props.
+ *
+ * @return {Object} The rendered list of menu items.
+ */
+function Plugins( props ) {
+	const ellipsisMenuItems = getMoreMenuItems();
+
+	if ( isEmpty( ellipsisMenuItems ) ) {
+		return null;
+	}
+
+	/**
+	 * Handles the user clicking on one of the plugins in the menu
+	 *
+	 * @param {string} pluginId The plugin id.
+	 *
+	 * @return {void}
+	 */
+	function onSelect( pluginId ) {
+		props.onSelect();
+		ellipsisMenuItems[ pluginId ].callback();
+	}
+
+	return (
+		<MenuItemsGroup
+			label={ __( 'Plugins' ) }
+			filterName="editPost.MoreMenu.plugins" >
+			{ map( ellipsisMenuItems, menuItem => {
+				const pluginActive = menuItem.target === props.activePlugin;
+
+				let Icon = menuItem.icon ? (
+					<span className="edit-post-plugins__icon-container" >
+						{ menuItem.icon }
+					</span>
+				) : null;
+
+				if ( pluginActive ) {
+					Icon = 'yes';
+				}
+
+				const buttonClassName = classnames(
+					'edit-post-plugins__button',
+					{
+						'has-icon': Icon,
+						'is-active': pluginActive,
+					}
+				);
+
+				return (
+					<IconButton
+						key={ menuItem.menuItemId }
+						className={ buttonClassName }
+						icon={ Icon }
+						onClick={ () => onSelect( menuItem.menuItemId ) }>
+						{ menuItem.title }
+					</IconButton>
+				);
+			} ) }
+		</MenuItemsGroup>
+	);
+}
+
+export default compose( [
+	withSelect( select => {
+		const editPost = select( 'core/edit-post' );
+		const openedSidebar = editPost.getOpenedGeneralSidebar();
+		if ( openedSidebar !== 'plugin' ) {
+			return {};
+		}
+
+		return {
+			activePlugin: editPost.getActivePlugin(),
+		};
+	} ),
+	withInstanceId,
+] )( Plugins );

edit-post/components/header/plugins/style.scss

@@ -0,0 +1,32 @@
+.edit-post-plugins__button,
+.edit-post-plugins__button.components-icon-button {
+	width: 100%;
+	padding: 8px 0;
+	padding-left: 25px;
+	text-align: left;
+	color: $dark-gray-500;
+
+	.dashicon {
+		margin-right: 5px;
+	}
+
+	&.has-icon {
+		padding-left: 0;
+	}
+
+	&:hover {
+		color: $black;
+	}
+}
+
+.edit-post-plugins__icon-container {
+	margin-right: 5px;
+	width: 20px;
+	height: 20px;
+	overflow: hidden;
+
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+}