Decouple editor and edit-post

editor exposes the _BlockSettingsMenuPluginsExtension component that specific implementations can use. edit-post chooses to fill that slot with a component of their own (PluginBlockSettingsMenuGroup) which happens to be a slot as well. This way, third-party authors can hook into the edit-post specific implementation by using the PluginsBlockSettingsMenuItem fill.
WordPress · Jul 31, 2018 · b0ecea3 · b0ecea3
1 parent 970148b
commit b0ecea3
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 4 deletions.
diff --git a/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js b/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js
@@ -10,7 +10,7 @@ import { createSlotFill } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 
-const { Fill: PluginBlockSettingsMenuGroup, Slot } = createSlotFill( 'BlockSettingsMenuPluginsGroup' );
+const { Fill: PluginBlockSettingsMenuGroup, Slot } = createSlotFill( 'PluginBlockSettingsMenuGroup' );
 
 const PluginBlockSettingsMenuGroupSlot = ( { fillProps, selectedBlocks } ) => {
 	selectedBlocks = map( selectedBlocks, ( block ) => block.name );

diff --git a/edit-post/components/visual-editor/index.js b/edit-post/components/visual-editor/index.js
@@ -11,13 +11,15 @@ import {
 	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
 	_BlockSettingsMenuFirstItem,
+	_BlockSettingsMenuPluginsExtension,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import BlockInspectorButton from './block-inspector-button';
+import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-settings-menu-group';
 
 function VisualEditor() {
 	return (
@@ -34,6 +36,9 @@ function VisualEditor() {
 			<_BlockSettingsMenuFirstItem>
 				{ ( { onClose } ) => <BlockInspectorButton onClick={ onClose } role="menuitem" /> }
 			</_BlockSettingsMenuFirstItem>
+			<_BlockSettingsMenuPluginsExtension>
+				{ ( { clientIds, onClose } ) => <PluginBlockSettingsMenuGroup.Slot fillProps={ { clientIds, onClose } } /> }
+			</_BlockSettingsMenuPluginsExtension>
 		</BlockSelectionClearer>
 	);
 }

diff --git a/edit-post/index.js b/edit-post/index.js
@@ -89,7 +89,6 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
 }
 
 export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
-export { default as PluginBlockSettingsMenuGroup } from './components/block-settings-menu/plugin-block-settings-menu-group';
 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';

diff --git a/editor/components/block-settings-menu/block-settings-menu-plugins-extension.js b/editor/components/block-settings-menu/block-settings-menu-plugins-extension.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: _BlockSettingsMenuPluginsExtension, Slot } = createSlotFill( '_BlockSettingsMenuPluginsExtension' );
+
+_BlockSettingsMenuPluginsExtension.Slot = Slot;
+
+export default _BlockSettingsMenuPluginsExtension;
diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
@@ -24,6 +24,7 @@ import ReusableBlockDeleteButton from './reusable-block-delete-button';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import BlockUnknownConvertButton from './block-unknown-convert-button';
 import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
+import _BlockSettingsMenuPluginsExtension from './block-settings-menu-plugins-extension';
 import withDeprecatedUniqueId from '../with-deprecated-unique-id';
 
 export class BlockSettingsMenu extends Component {
@@ -55,7 +56,6 @@ export class BlockSettingsMenu extends Component {
 			focus,
 			rootClientId,
 			isHidden,
-			PluginExtension,
 		} = this.props;
 		const { isFocused } = this.state;
 		const blockClientIds = castArray( clientIds );
@@ -127,7 +127,7 @@ export class BlockSettingsMenu extends Component {
 									itemsRole="menuitem"
 								/>
 							) }
-							{ PluginExtension && ( <PluginExtension fillProps={ { clientIds, onClose } } /> ) }
+							<_BlockSettingsMenuPluginsExtension.Slot fillProps={ { clientIds, onClose } } />
 							<div className="editor-block-settings-menu__separator" />
 							{ count === 1 && (
 								<ReusableBlockDeleteButton

diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -85,6 +85,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 _BlockSettingsMenuPluginsExtension } from './block-settings-menu/block-settings-menu-plugins-extension';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as CopyHandler } from './copy-handler';