Simplify EllipsisMenu slot/fill mechanics

WordPress · May 21, 2020 · 18700c9 · 18700c9
1 parent 586e3da
commit 18700c9
Show file tree

Hide file tree

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

diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,7 +9,6 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalToolbarContext as ToolbarContext,
 	createSlotFill,
-	ToolbarGroup,
 } from '@wordpress/components';
 
 /**
@@ -25,26 +23,7 @@ function EllipsisMenuSlot( props ) {
 	return <Slot { ...props } fillProps={ accessibleToolbarState } />;
 }
 
-function EllipsisMenuFill( { controls, children } ) {
-	return (
-		<Fill>
-			{ ( fillProps ) => {
-				// Children passed to EllipsisMenuFill will not have access to any
-				// React Context whose Provider is part of the EllipsisMenuSlot tree.
-				// So we re-create the Provider in this subtree.
-				const value = ! isEmpty( fillProps ) ? fillProps : null;
-				return (
-					<ToolbarContext.Provider value={ value }>
-						<ToolbarGroup controls={ controls } />
-						{ children }
-					</ToolbarContext.Provider>
-				);
-			} }
-		</Fill>
-	);
-}
-
-const EllipsisMenu = ifBlockEditSelected( EllipsisMenuFill );
+const EllipsisMenu = ifBlockEditSelected( Fill );
 
 EllipsisMenu.Slot = EllipsisMenuSlot;
 

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -34,7 +34,7 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockSettingsDropdown( { clientIds, ...props } ) {
+export function BlockSettingsDropdown( { clientIds, children, ...props } ) {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
@@ -145,6 +145,7 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) {
 									/>
 								) }
 							</MenuGroup>
+							{ children }
 							<BlockSettingsMenuControls.Slot
 								fillProps={ { onClose } }
 								clientIds={ clientIds }

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