From 18700c9bb13725885ea26f6a8da75636ea7d80e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 20 May 2020 13:20:55 +0200
Subject: [PATCH] Simplify EllipsisMenu slot/fill mechanics

---
 .../src/components/block-navigation/block.js  |  5 ++++
 .../block-navigation/ellipsis-menu.js         | 23 +------------------
 .../block-settings-dropdown.js                |  3 ++-
 .../components/src/dropdown-menu/index.js     |  2 ++
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
index 17ec109b0ea10..96a778deb01ef 100644
--- 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
index 9c45422ebed9c..47ce1824747cc 100644
--- 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
index e9e3ae9b235a9..687cc129d149b 100644
--- 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
index 288ea6f72d9d4..0715ab865a768 100644
--- 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 ) {