Replace the renderBlockMenu prop with a Slot

WordPress · Jun 11, 2018 · d9ec524 · d9ec524
1 parent 4ec4177
commit d9ec524
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 28 deletions.
diff --git a/edit-post/components/visual-editor/index.js b/edit-post/components/visual-editor/index.js
@@ -10,24 +10,15 @@ import {
 	EditorGlobalKeyboardShortcuts,
 	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
+	PluginBlockSettingsMenu,
 } from '@wordpress/editor';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import BlockInspectorButton from './block-inspector-button';
 
-function VisualEditorBlockMenu( { children, onClose } ) {
-	return (
-		<Fragment>
-			<BlockInspectorButton onClick={ onClose } role="menuitem" />
-			{ children }
-		</Fragment>
-	);
-}
-
 function VisualEditor() {
 	return (
 		<BlockSelectionClearer className="edit-post-visual-editor">
@@ -37,9 +28,12 @@ function VisualEditor() {
 			<WritingFlow>
 				<ObserveTyping>
 					<PostTitle />
-					<BlockList renderBlockMenu={ VisualEditorBlockMenu } />
+					<BlockList />
 				</ObserveTyping>
 			</WritingFlow>
+			<PluginBlockSettingsMenu>
+				{ ( { onClose } ) => <BlockInspectorButton onClick={ onClose } role="menuitem" /> }
+			</PluginBlockSettingsMenu>
 		</BlockSelectionClearer>
 	);
 }

diff --git a/editor/components/block-list/block-mobile-toolbar.js b/editor/components/block-list/block-mobile-toolbar.js
@@ -10,12 +10,12 @@ import BlockMover from '../block-mover';
 import BlockSettingsMenu from '../block-settings-menu';
 import VisualEditorInserter from '../inserter';
 
-function BlockMobileToolbar( { rootUID, uid, renderBlockMenu } ) {
+function BlockMobileToolbar( { rootUID, uid } ) {
 	return (
 		<div className="editor-block-list__block-mobile-toolbar">
 			<VisualEditorInserter />
 			<BlockMover uids={ [ uid ] } />
-			<BlockSettingsMenu rootUID={ rootUID } uids={ [ uid ] } renderBlockMenu={ renderBlockMenu } />
+			<BlockSettingsMenu rootUID={ rootUID } uids={ [ uid ] } />
 		</div>
 	);
 }

diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -86,8 +86,7 @@ export class BlockListBlock extends Component {
 	}
 
 	createInnerBlockList( uid ) {
-		const { renderBlockMenu } = this.props;
-		return createInnerBlockList( uid, renderBlockMenu );
+		return createInnerBlockList( uid );
 	}
 
 	/**
@@ -403,7 +402,6 @@ export class BlockListBlock extends Component {
 			uid,
 			rootUID,
 			layout,
-			renderBlockMenu,
 			isSelected,
 			isMultiSelected,
 			isFirstMultiSelected,
@@ -533,7 +531,6 @@ export class BlockListBlock extends Component {
 					<BlockSettingsMenu
 						uids={ uid }
 						rootUID={ rootUID }
-						renderBlockMenu={ renderBlockMenu }
 						isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'right' }
 					/>
 				) }
@@ -581,7 +578,6 @@ export class BlockListBlock extends Component {
 						<BlockMobileToolbar
 							rootUID={ rootUID }
 							uid={ uid }
-							renderBlockMenu={ renderBlockMenu }
 						/>
 					) }
 				</IgnoreNestedEvents>

diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
@@ -193,7 +193,6 @@ class BlockListLayout extends Component {
 			layout,
 			isGroupedByLayout,
 			rootUID,
-			renderBlockMenu,
 		} = this.props;
 
 		let defaultLayout;
@@ -219,7 +218,6 @@ class BlockListLayout extends Component {
 						layout={ defaultLayout }
 						isFirst={ blockIndex === 0 }
 						isLast={ blockIndex === blockUIDs.length - 1 }
-						renderBlockMenu={ renderBlockMenu }
 					/>
 				) ) }
 				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>

diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
@@ -22,6 +22,7 @@ import BlockDuplicateButton from './block-duplicate-button';
 import BlockTransformations from './block-transformations';
 import SharedBlockSettings from './shared-block-settings';
 import UnknownConverter from './unknown-converter';
+import PluginBlockSettingsMenu from './plugin-block-settings-menu';
 
 export class BlockSettingsMenu extends Component {
 	constructor() {
@@ -51,7 +52,6 @@ export class BlockSettingsMenu extends Component {
 			onSelect,
 			focus,
 			rootUID,
-			renderBlockMenu = ( { children } ) => children,
 			isHidden,
 		} = this.props;
 		const { isFocused } = this.state;
@@ -94,13 +94,12 @@ export class BlockSettingsMenu extends Component {
 					renderContent={ ( { onClose } ) => (
 						// Should this just use a DropdownMenu instead of a DropDown ?
 						<NavigableMenu className="editor-block-settings-menu__content">
-							{ renderBlockMenu( { onClose, children: [
-								count === 1 && <BlockModeToggle key="mode-toggle" uid={ firstBlockUID } onToggle={ onClose } role="menuitem" />,
-								count === 1 && <UnknownConverter key="unknown-converter" uid={ firstBlockUID } role="menuitem" />,
-								<BlockDuplicateButton key="duplicate" uids={ uids } rootUID={ rootUID } role="menuitem" />,
-								count === 1 && <SharedBlockSettings key="shared-block" uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" />,
-								<BlockTransformations key="transformations" uids={ uids } onClick={ onClose } itemsRole="menuitem" />,
-							] } ) }
+							<PluginBlockSettingsMenu.Slot fillProps={ { onClose } } />
+							{ count === 1 && <BlockModeToggle uid={ firstBlockUID } onToggle={ onClose } role="menuitem" /> }
+							{ count === 1 && <UnknownConverter uid={ firstBlockUID } role="menuitem" /> }
+							<BlockDuplicateButton uids={ uids } rootUID={ rootUID } role="menuitem" />
+							{ count === 1 && <SharedBlockSettings uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" /> }
+							<BlockTransformations uids={ uids } onClick={ onClose } itemsRole="menuitem" />
 						</NavigableMenu>
 					) }
 				/>

diff --git a/editor/components/block-settings-menu/plugin-block-settings-menu.js b/editor/components/block-settings-menu/plugin-block-settings-menu.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: PluginBlockSettingsMenu, Slot } = createSlotFill( 'PluginsBlockSettingsMenu' );
+
+PluginBlockSettingsMenu.Slot = Slot;
+
+export default PluginBlockSettingsMenu;
diff --git a/editor/components/index.js b/editor/components/index.js
@@ -83,6 +83,7 @@ export { default as BlockList } from './block-list';
 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 PluginBlockSettingsMenu } from './block-settings-menu/plugin-block-settings-menu';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as CopyHandler } from './copy-handler';