Replace block settings menu with a custom menu in off canvas editor

packages/block-editor/src/components/off-canvas-editor/block.js

@@ -6,11 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createBlock, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
@@ -86,8 +85,7 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { insertBlock, replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const block = useSelect(
@@ -128,7 +126,8 @@ function ListViewBlock( {
 		[ selectBlock ]
 	);
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+		useListViewContext();
 
 	const toggleExpanded = useCallback(
 		( event ) => {
@@ -237,6 +236,10 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	const MoreMenuComponent = LeafMoreMenu
+		? LeafMoreMenu
+		: BlockSettingsDropdown;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -352,61 +355,26 @@ function ListViewBlock( {
 						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
 					>
 						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockSettingsDropdown
-								clientIds={ dropdownClientIds }
-								icon={ moreVertical }
-								label={ settingsAriaLabel }
-								toggleProps={ {
-									ref,
-									className:
-										'block-editor-list-view-block__menu',
-									tabIndex,
-									onFocus,
-								} }
-								disableOpenOnArrowDown
-								__experimentalSelectBlock={ updateSelection }
-							>
-								{ ( { onClose } ) => (
-									<MenuItem
-										onClick={ () => {
-											const newLink = createBlock(
-												'core/navigation-link'
-											);
-											if (
-												block.name ===
-												'core/navigation-submenu'
-											) {
-												const updateSelectionOnInsert = false;
-												insertBlock(
-													newLink,
-													block.innerBlocks.length,
-													clientId,
-													updateSelectionOnInsert
-												);
-											} else {
-												// Convert to a submenu if the block currently isn't one.
-												const newSubmenu = createBlock(
-													'core/navigation-submenu',
-													block.attributes,
-													block.innerBlocks
-														? [
-																...block.innerBlocks,
-																newLink,
-														  ]
-														: [ newLink ]
-												);
-												replaceBlock(
-													clientId,
-													newSubmenu
-												);
-											}
-											onClose();
-										} }
-									>
-										{ __( 'Add submenu item' ) }
-									</MenuItem>
-								) }
-							</BlockSettingsDropdown>
+							<>
+								<MoreMenuComponent
+									clientIds={ dropdownClientIds }
+									block={ block }
+									clientId={ clientId }
+									icon={ moreVertical }
+									label={ settingsAriaLabel }
+									toggleProps={ {
+										ref,
+										className:
+											'block-editor-list-view-block__menu',
+										tabIndex,
+										onFocus,
+									} }
+									disableOpenOnArrowDown
+									__experimentalSelectBlock={
+										updateSelection
+									}
+								/>
+							</>
 						) }
 					</TreeGridCell>
 				</>

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

@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers     Flag to enable block movers
  * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
- * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism.
+ * @param {Object}  props.LeafMoreMenu        Optional more menu substitution.
  * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
@@ -70,6 +71,7 @@ function __ExperimentalOffCanvasEditor(
 		showBlockMovers = false,
 		isExpanded = false,
 		selectBlockInCanvas = true,
+		LeafMoreMenu,
 	},
 	ref
 ) {
@@ -188,8 +190,16 @@ function __ExperimentalOffCanvasEditor(
 			expandedState,
 			expand,
 			collapse,
+			LeafMoreMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			LeafMoreMenu,
+		]
 	);
 
 	return (

packages/block-library/src/navigation/edit/menu-inspector-controls.js

@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
  */
 import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
+import { LeafMoreMenu } from '../leaf-more-menu';
 
 const MenuInspectorControls = ( {
 	clientId,
@@ -88,6 +89,7 @@ const MenuInspectorControls = ( {
 								blocks={ clientIdsTree }
 								isExpanded={ true }
 								selectBlockInCanvas={ false }
+								LeafMoreMenu={ LeafMoreMenu }
 							/>
 						) }
 					</>

packages/block-library/src/navigation/leaf-more-menu.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore, BlockTitle } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+export const LeafMoreMenu = ( props ) => {
+	const { clientId, block } = props;
+
+	const { insertBlock, replaceBlock, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						onClick={ () => {
+							const newLink = createBlock(
+								'core/navigation-link'
+							);
+							if ( block.name === 'core/navigation-submenu' ) {
+								const updateSelectionOnInsert = false;
+								insertBlock(
+									newLink,
+									block.innerBlocks.length,
+									clientId,
+									updateSelectionOnInsert
+								);
+							} else {
+								// Convert to a submenu if the block currently isn't one.
+								const newSubmenu = createBlock(
+									'core/navigation-submenu',
+									block.attributes,
+									block.innerBlocks
+										? [ ...block.innerBlocks, newLink ]
+										: [ newLink ]
+								);
+								replaceBlock( clientId, newSubmenu );
+							}
+							onClose();
+						} }
+					>
+						{ __( 'Add submenu item' ) }
+					</MenuItem>
+					<MenuItem
+						onClick={ () => {
+							removeBlocks( [ clientId ], false );
+							onClose();
+						} }
+					>
+						{ label }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+};