Per-block EllipsisMenuControlsSlot

WordPress · May 21, 2020 · afff954 · afff954
1 parent 469a9f1
commit afff954
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
@@ -123,14 +123,12 @@ export default function BlockNavigationBlock( {
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
 							icon={ moreVertical }
-							onDropdownToggle={ ( isOpen ) => {
-								if ( isOpen ) {
-									onClick();
-								}
-							} }
 							{ ...props }
 						>
-							<EllipsisMenuControls.Slot bubblesVirtually />
+							<EllipsisMenuControls.Slot
+								clientId={ clientId }
+								bubblesVirtually
+							/>
 						</BlockSettingsDropdown>
 					) }
 				</TreeGridCell>

diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js
@@ -7,23 +7,26 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { createSlotFill } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { BlockListBlockContext } from '../block-list/block';
 
+const getSlotName = ( clientId ) => `BlockNavigationEllipsisMenu-${ clientId }`;
 const { Fill, Slot } = createSlotFill( 'EllipsisMenu' );
 
-const EllipsisMenuControlsSlot = ( { fillProps } ) => {
-	return (
-		<Slot fillProps={ { ...fillProps } }>
-			{ ( fills ) => ! isEmpty( fills ) && <>{ fills }</> }
-		</Slot>
-	);
-};
+const EllipsisMenuControlsSlot = ( { fillProps, clientId } ) => (
+	<Slot name={ getSlotName( clientId ) } fillProps={ fillProps }>
+		{ ( fills ) => ! isEmpty( fills ) && <>{ fills }</> }
+	</Slot>
+);
 
-const EllipsisMenuControls = ifBlockEditSelected( Fill );
+export const EllipsisMenuControls = ( props ) => {
+	const { clientId } = useContext( BlockListBlockContext );
+	return <Fill { ...props } name={ getSlotName( clientId ) } />;
+};
 
 EllipsisMenuControls.Slot = EllipsisMenuControlsSlot;
 

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -163,7 +163,7 @@ function NavigationLinkEdit( {
 			</BlockControls>
 			<BlockNavigationEllipsisMenuControls>
 				<MenuGroup>
-					<MenuItem onClick={ () => {} }>
+					<MenuItem onClick={ insertLinkBlock }>
 						{ __( 'Add submenu' ) }
 					</MenuItem>
 				</MenuGroup>

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -40,7 +40,6 @@ function DropdownMenu( {
 	icon = 'menu',
 	label,
 	popoverProps,
-	onDropdownToggle = () => {},
 	toggleProps,
 	menuProps,
 	// The following props exist for backward compatibility.
@@ -86,7 +85,6 @@ function DropdownMenu( {
 		<Dropdown
 			className={ classnames( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
-			onToggle={ onDropdownToggle }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {