Render MenuGroup correctly in the ellipsis menu

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

@@ -22,7 +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 EllipsisMenu from './ellipsis-menu';
+import EllipsisMenuControls from './ellipsis-menu-controls';
 
 export default function BlockNavigationBlock( {
 	block,
@@ -130,7 +130,7 @@ export default function BlockNavigationBlock( {
 							} }
 							{ ...props }
 						>
-							<EllipsisMenu.Slot bubblesVirtually />
+							<EllipsisMenuControls.Slot bubblesVirtually />
 						</BlockSettingsDropdown>
 					) }
 				</TreeGridCell>

packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( 'EllipsisMenu' );
+
+const EllipsisMenuControlsSlot = ( { fillProps } ) => {
+	return (
+		<Slot fillProps={ { ...fillProps } }>
+			{ ( fills ) => ! isEmpty( fills ) && <>{ fills }</> }
+		</Slot>
+	);
+};
+
+const EllipsisMenuControls = ifBlockEditSelected( Fill );
+
+EllipsisMenuControls.Slot = EllipsisMenuControlsSlot;
+
+export default EllipsisMenuControls;

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

@@ -18,7 +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 __experimentalBlockNavigationEllipsisMenuControls } from './block-navigation/ellipsis-menu-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,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import {
 	ExternalLink,
 	KeyboardShortcuts,
+	MenuGroup,
 	MenuItem,
 	PanelBody,
 	Popover,
@@ -31,7 +32,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalBlock as Block,
 	__experimentalBlockNavigationEditor as BlockNavigationEditor,
-	__experimentalEllipsisMenu as BlockNavigationEllipsisMenu,
+	__experimentalBlockNavigationEllipsisMenuControls as BlockNavigationEllipsisMenuControls,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
@@ -160,11 +161,13 @@ function NavigationLinkEdit( {
 					/>
 				</ToolbarGroup>
 			</BlockControls>
-			<BlockNavigationEllipsisMenu>
-				<MenuItem onClick={ () => {} }>
-					{ __( 'Add submenu' ) }
-				</MenuItem>
-			</BlockNavigationEllipsisMenu>
+			<BlockNavigationEllipsisMenuControls>
+				<MenuGroup>
+					<MenuItem onClick={ () => {} }>
+						{ __( 'Add submenu' ) }
+					</MenuItem>
+				</MenuGroup>
+			</BlockNavigationEllipsisMenuControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'SEO settings' ) }>
 					<ToggleControl