Allow explicitly specifying additional block navigation menu options in block edit function

packages/block-editor/src/components/block-navigation/block.js

@@ -22,6 +22,7 @@ import DescenderLines from './descender-lines';
 import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useBlockNavigationContext } from './context';
+import ItemSettingsControls from './item-settings-controls';
 
 export default function BlockNavigationBlock( {
 	block,
@@ -48,10 +49,10 @@ export default function BlockNavigationBlock( {
 		{ 'is-visible': hasVisibleMovers }
 	);
 	const {
-		__experimentalWithEllipsisMenu: withEllipsisMenu,
-		__experimentalWithEllipsisMenuMinLevel: ellipsisMenuMinLevel,
+		__experimentalWithItemSettings: withItemSettings,
+		__experimentalWithItemSettingsMinLevel: itemSettingsMinLevel,
 	} = useBlockNavigationContext();
-	const ellipsisMenuClassName = classnames(
+	const itemSettingsClassName = classnames(
 		'block-editor-block-navigation-block__menu-cell',
 		{ 'is-visible': hasVisibleMovers }
 	);
@@ -116,14 +117,19 @@ export default function BlockNavigationBlock( {
 				</>
 			) }
 
-			{ withEllipsisMenu && level >= ellipsisMenuMinLevel && (
-				<TreeGridCell className={ ellipsisMenuClassName }>
+			{ withItemSettings && level >= itemSettingsMinLevel && (
+				<TreeGridCell className={ itemSettingsClassName }>
 					{ ( props ) => (
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
 							icon={ moreVertical }
 							{ ...props }
-						/>
+						>
+							<ItemSettingsControls.Slot
+								clientId={ clientId }
+								bubblesVirtually
+							/>
+						</BlockSettingsDropdown>
 					) }
 				</TreeGridCell>
 			) }

packages/block-editor/src/components/block-navigation/context.js

@@ -5,8 +5,8 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const BlockNavigationContext = createContext( {
 	__experimentalWithBlockNavigationSlots: false,
-	__experimentalWithEllipsisMenu: false,
-	__experimentalWithEllipsisMenuMinLevel: 0,
+	__experimentalWithItemSettings: false,
+	__experimentalWithItemSettingsMinLevel: 0,
 } );
 
 export const useBlockNavigationContext = () =>

packages/block-editor/src/components/block-navigation/dropdown.js

@@ -56,7 +56,7 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
 function BlockNavigationDropdown( {
 	isDisabled,
 	__experimentalWithBlockNavigationSlots,
-	__experimentalWithEllipsisMenu,
+	__experimentalWithItemSettings,
 } ) {
 	const hasBlocks = useSelect(
 		( select ) => !! select( 'core/block-editor' ).getBlockCount(),
@@ -80,8 +80,8 @@ function BlockNavigationDropdown( {
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots
 					}
-					__experimentalWithEllipsisMenu={
-						__experimentalWithEllipsisMenu
+					__experimentalWithItemSettings={
+						__experimentalWithItemSettings
 					}
 				/>
 			) }

packages/block-editor/src/components/block-navigation/index.js

@@ -21,8 +21,8 @@ function BlockNavigation( {
 	selectedBlockClientId,
 	selectBlock,
 	__experimentalWithBlockNavigationSlots,
-	__experimentalWithEllipsisMenu,
-	__experimentalWithEllipsisMenuMinLevel,
+	__experimentalWithItemSettings,
+	__experimentalWithItemSettingsMinLevel,
 } ) {
 	if ( ! rootBlocks || rootBlocks.length === 0 ) {
 		return null;
@@ -43,11 +43,11 @@ function BlockNavigation( {
 					blocks={ [ rootBlock ] }
 					selectedBlockClientId={ selectedBlockClientId }
 					selectBlock={ selectBlock }
-					__experimentalWithEllipsisMenu={
-						__experimentalWithEllipsisMenu
+					__experimentalWithItemSettings={
+						__experimentalWithItemSettings
 					}
-					__experimentalWithEllipsisMenuMinLevel={
-						__experimentalWithEllipsisMenuMinLevel
+					__experimentalWithItemSettingsMinLevel={
+						__experimentalWithItemSettingsMinLevel
 					}
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots
@@ -60,11 +60,11 @@ function BlockNavigation( {
 					blocks={ rootBlocks }
 					selectedBlockClientId={ selectedBlockClientId }
 					selectBlock={ selectBlock }
-					__experimentalWithEllipsisMenu={
-						__experimentalWithEllipsisMenu
+					__experimentalWithItemSettings={
+						__experimentalWithItemSettings
 					}
-					__experimentalWithEllipsisMenuMinLevel={
-						__experimentalWithEllipsisMenuMinLevel
+					__experimentalWithItemSettingsMinLevel={
+						__experimentalWithItemSettingsMinLevel
 					}
 					__experimentalWithBlockNavigationSlots={
 						__experimentalWithBlockNavigationSlots

packages/block-editor/src/components/block-navigation/item-settings-controls.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BlockListBlockContext } from '../block-list/block';
+
+const getSlotName = ( clientId ) => `BlockNavigationItemSettings-${ clientId }`;
+const { Fill, Slot } = createSlotFill( 'ItemSettings' );
+
+const ItemSettingsControlsSlot = ( { fillProps, clientId } ) => (
+	<Slot name={ getSlotName( clientId ) } fillProps={ fillProps }>
+		{ ( fills ) => ! isEmpty( fills ) && <>{ fills }</> }
+	</Slot>
+);
+
+export const ItemSettingsControls = ( props ) => {
+	const { clientId } = useContext( BlockListBlockContext );
+	return <Fill { ...props } name={ getSlotName( clientId ) } />;
+};
+
+ItemSettingsControls.Slot = ItemSettingsControlsSlot;
+
+export default ItemSettingsControls;

packages/block-editor/src/components/block-navigation/tree.js

@@ -21,23 +21,23 @@ import { BlockNavigationContext } from './context';
  */
 export default function BlockNavigationTree( {
 	__experimentalWithBlockNavigationSlots,
-	__experimentalWithEllipsisMenu,
-	__experimentalWithEllipsisMenuMinLevel,
+	__experimentalWithItemSettings,
+	__experimentalWithItemSettingsMinLevel,
 	...props
 } ) {
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalWithBlockNavigationSlots,
-			__experimentalWithEllipsisMenu,
-			__experimentalWithEllipsisMenuMinLevel:
-				typeof __experimentalWithEllipsisMenuMinLevel === 'number'
-					? __experimentalWithEllipsisMenuMinLevel
+			__experimentalWithItemSettings,
+			__experimentalWithItemSettingsMinLevel:
+				typeof __experimentalWithItemSettingsMinLevel === 'number'
+					? __experimentalWithItemSettingsMinLevel
 					: 0,
 		} ),
 		[
 			__experimentalWithBlockNavigationSlots,
-			__experimentalWithEllipsisMenu,
-			__experimentalWithEllipsisMenuMinLevel,
+			__experimentalWithItemSettings,
+			__experimentalWithItemSettingsMinLevel,
 		]
 	);
 

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 }

packages/block-editor/src/components/index.js

@@ -1,3 +1,4 @@
+/*
 /*
  * Block Creation Components
  */
@@ -18,6 +19,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 __experimentalBlockNavigationItemSettingsControls } from './block-navigation/item-settings-controls';
 export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';

packages/block-library/src/navigation-link/edit.js

@@ -13,6 +13,8 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import {
 	ExternalLink,
 	KeyboardShortcuts,
+	MenuGroup,
+	MenuItem,
 	PanelBody,
 	Popover,
 	TextareaControl,
@@ -30,6 +32,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalBlock as Block,
 	__experimentalBlockNavigationEditor as BlockNavigationEditor,
+	__experimentalBlockNavigationItemSettingsControls as BlockNavigationItemSettingsControls,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
@@ -158,6 +161,13 @@ function NavigationLinkEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
+			<BlockNavigationItemSettingsControls>
+				<MenuGroup>
+					<MenuItem onClick={ insertLinkBlock }>
+						{ __( 'Add submenu' ) }
+					</MenuItem>
+				</MenuGroup>
+			</BlockNavigationItemSettingsControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'SEO settings' ) }>
 					<ToggleControl

packages/block-library/src/navigation/edit.js

@@ -86,6 +86,7 @@ function Navigation( {
 
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
 		clientId,
+		true,
 		true
 	);
 

packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js

@@ -26,8 +26,8 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) {
 						selectedBlockClientId={ selectedBlockClientIds[ 0 ] }
 						selectBlock={ selectBlock }
 						__experimentalWithBlockNavigationSlots
-						__experimentalWithEllipsisMenu
-						__experimentalWithEllipsisMenuMinLevel={ 2 }
+						__experimentalWithItemSettings
+						__experimentalWithItemSettingsMinLevel={ 2 }
 						showNestedBlocks
 						showAppender
 						showBlockMovers

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -79,7 +79,7 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
 			<BlockNavigationDropdown
 				isDisabled={ isTextModeEnabled }
-				__experimentalWithEllipsisMenu
+				__experimentalWithItemSettings
 			/>
 			{ displayBlockToolbar && (
 				<div className="edit-post-header-toolbar__block-toolbar">