From 975a416efdfc74c5f9f895695783f09f72e75cad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 19 May 2020 15:59:56 +0200
Subject: [PATCH] Explicitly specify additional ellipsis menu options

---
 .../src/components/block-navigation/block.js  | 13 +++--
 .../block-navigation/ellipsis-menu.js         | 51 +++++++++++++++++++
 .../components/block-settings-menu/index.js   |  3 +-
 packages/block-editor/src/components/index.js |  1 +
 .../block-library/src/navigation-link/edit.js |  7 +++
 5 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-navigation/ellipsis-menu.js

diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
index 5e778d1d175e0..af97589107826 100644
--- a/packages/block-editor/src/components/block-navigation/block.js
+++ b/packages/block-editor/src/components/block-navigation/block.js
@@ -22,6 +22,7 @@ import DescenderLines from './descender-lines';
 import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsMenu from '../block-settings-menu';
 import { useBlockNavigationContext } from './context';
+import EllipsisMenu from './ellipsis-menu';
 
 export default function BlockNavigationBlock( {
 	block,
@@ -118,10 +119,14 @@ export default function BlockNavigationBlock( {
 			{ withEllipsisMenu && level > 1 && (
 				<TreeGridCell className={ ellipsisMenuClassName }>
 					{ ( props ) => (
-						<BlockSettingsMenu
-							clientIds={ [ clientId ] }
-							{ ...props }
-						/>
+						<>
+							<BlockSettingsMenu
+								clientIds={ [ clientId ] }
+								{ ...props }
+							>
+								<EllipsisMenu.Slot bubblesVirtually />
+							</BlockSettingsMenu>
+						</>
 					) }
 				</TreeGridCell>
 			) }
diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js
new file mode 100644
index 0000000000000..9c45422ebed9c
--- /dev/null
+++ b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	__experimentalToolbarContext as ToolbarContext,
+	createSlotFill,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( 'EllipsisMenu' );
+
+function EllipsisMenuSlot( props ) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+	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 );
+
+EllipsisMenu.Slot = EllipsisMenuSlot;
+
+export default EllipsisMenu;
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index ef235038e6f16..a80bf0cbe4007 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -36,7 +36,7 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-export function BlockSettingsMenu( { clientIds } ) {
+export function BlockSettingsMenu( { children, clientIds } ) {
 	const blockClientIds = castArray( clientIds );
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
@@ -86,6 +86,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 							>
 								{ ( { onClose } ) => (
 									<>
+										{ children }
 										<MenuGroup>
 											<__experimentalBlockSettingsMenuFirstItem.Slot
 												fillProps={ { onClose } }
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index f8e37a7f4c5cf..1283a19b8eb47 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -18,6 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents';
+export { default as __experimentalEllipsisMenu } from './block-navigation/ellipsis-menu';
 export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index d5ec274a05470..1a7d10be492d7 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -13,6 +13,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import {
 	ExternalLink,
 	KeyboardShortcuts,
+	MenuItem,
 	PanelBody,
 	Popover,
 	TextareaControl,
@@ -30,6 +31,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalBlock as Block,
 	__experimentalBlockNavigationEditor as BlockNavigationEditor,
+	__experimentalEllipsisMenu as BlockNavigationEllipsisMenu,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
@@ -158,6 +160,11 @@ function NavigationLinkEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
+			<BlockNavigationEllipsisMenu>
+				<MenuItem onClick={ () => {} }>
+					{ __( 'Add submenu' ) }
+				</MenuItem>
+			</BlockNavigationEllipsisMenu>
 			<InspectorControls>
 				<PanelBody title={ __( 'SEO settings' ) }>
 					<ToggleControl