Allow plugins to extend the BlockSettingsMenu

edit-post/components/block-settings-menu/index.js

@@ -0,0 +1,4 @@
+import { _BlockSettingsMenuPluginsItem } from '@wordpress/editor';
+
+const PluginBlockSettingsMenuItem = _BlockSettingsMenuPluginsItem;
+export default PluginBlockSettingsMenuItem;

edit-post/index.js

@@ -83,6 +83,7 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 	};
 }
 
+export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu';
 export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
 export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
 export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';

editor/components/block-settings-menu/block-settings-menu-plugins-group.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { isEmpty, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+const { Fill: BlockSettingsMenuPluginsGroup, Slot } = createSlotFill( 'BlockSettingsMenuPluginsGroup' );
+
+const BlockSettingsMenuPluginsGroupSlot = ( { fillProps, selectedBlocks } ) => {
+	selectedBlocks = map( selectedBlocks, ( block ) => block.name );
+	return (
+		<Slot fillProps={ { ...fillProps, selectedBlocks } } >
+			{ ( fills ) => ! isEmpty( fills ) && (
+				<Fragment>
+					<div className="editor-block-settings-menu__separator" />
+					{ fills }
+				</Fragment>
+			) }
+		</Slot>
+	);
+};
+
+BlockSettingsMenuPluginsGroup.Slot = withSelect( ( select, { fillProps: { uids } } ) => ( {
+	selectedBlocks: select( 'core/editor' ).getBlocksByUID( uids ),
+} ) )( BlockSettingsMenuPluginsGroupSlot );
+
+export default BlockSettingsMenuPluginsGroup;

editor/components/block-settings-menu/block-settings-menu-plugins-item.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { difference } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { IconButton } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockSettingsMenuPluginsGroup from './block-settings-menu-plugins-group';
+
+const isEverySelectedBlockAllowed = ( selected, allowed ) => difference( selected, allowed ).length === 0;
+
+/**
+ * Plugins may want to add an item to the menu either for every block
+ * or only for the specific ones provided in the `allowedBlocks` component property.
+ *
+ * If there are multiple blocks selected the item will be rendered if every block
+ * is of one allowed type (not necesarily the same).
+ *
+ * @param {string[]} selectedBlockNames Array containing the names of the blocks selected
+ * @param {string[]} allowedBlockNames Array containing the names of the blocks allowed
+ * @return {boolean} Whether the item will be rendered or not.
+ */
+const shouldRenderItem = ( selectedBlockNames, allowedBlockNames ) => ! Array.isArray( allowedBlockNames ) ||
+	isEverySelectedBlockAllowed( selectedBlockNames, allowedBlockNames );
+
+const BlockSettingsMenuPluginsItem = ( { allowedBlocks, icon, label, onClick, small, role } ) => (
+	<BlockSettingsMenuPluginsGroup>
+		{ ( { selectedBlocks, onClose } ) => {
+			if ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {
+				return null;
+			}
+			return ( <IconButton
+				className="editor-block-settings-menu__control"
+				onClick={ compose( onClick, onClose ) }
+				icon={ icon || 'admin-plugins' }
+				label={ small ? label : undefined }
+				role={ role }
+			>
+				{ ! small && label }
+			</IconButton> );
+		} }
+	</BlockSettingsMenuPluginsGroup>
+);
+
+export default BlockSettingsMenuPluginsItem;

editor/components/block-settings-menu/index.js

@@ -26,6 +26,7 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import BlockUnknownConvertButton from './block-unknown-convert-button';
 import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import withDeprecatedUniqueId from '../with-deprecated-unique-id';
+import _BlockSettingsMenuPluginsGroup from './block-settings-menu-plugins-group';
 
 export class BlockSettingsMenu extends Component {
 	constructor() {
@@ -127,6 +128,7 @@ export class BlockSettingsMenu extends Component {
 									itemsRole="menuitem"
 								/>
 							) }
+							<_BlockSettingsMenuPluginsGroup.Slot fillProps={ { clientIds, onClose } } />
 							<div className="editor-block-settings-menu__separator" />
 							{ count === 1 && (
 								<SharedBlockDeleteButton

editor/components/index.js

@@ -83,6 +83,7 @@ export { default as BlockMover } from './block-mover';
 export { default as BlockSelectionClearer } from './block-selection-clearer';
 export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as _BlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as _BlockSettingsMenuPluginsItem } from './block-settings-menu/block-settings-menu-plugins-item';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as CopyHandler } from './copy-handler';