Update: Make OffCanvasEditor use LeafMoreMenu by default. (#47844)

packages/block-library/src/navigation/leaf-more-menu.js → packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js

@@ -5,16 +5,21 @@ import { createBlock } from '@wordpress/blocks';
 import { addSubmenu, 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';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockTitle from '../block-title';
+
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
 	variant: 'toolbar',
 };
 
-export const LeafMoreMenu = ( props ) => {
+export default function LeafMoreMenu( props ) {
 	const { clientId, block } = props;
 
 	const { insertBlock, replaceBlock, removeBlocks, replaceInnerBlocks } =
@@ -90,4 +95,4 @@ export const LeafMoreMenu = ( props ) => {
 			) }
 		</DropdownMenu>
 	);
-};
+}

packages/block-editor/src/private-apis.js

@@ -5,6 +5,7 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
+import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 
 /**
  * Experimental @wordpress/block-editor APIs.
@@ -13,5 +14,6 @@ export const experiments = {};
 lock( experiments, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	LeafMoreMenu,
 	OffCanvasEditor,
 } );

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

@@ -19,7 +19,6 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenuSelector from './navigation-menu-selector';
-import { LeafMoreMenu } from '../leaf-more-menu';
 import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
@@ -34,7 +33,7 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorExperiments );
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(

packages/edit-site/src/components/navigation-inspector/navigation-menu.js

@@ -39,7 +39,7 @@ const ALLOWED_BLOCKS = {
 export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
-	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorExperiments );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
 	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
@@ -56,5 +56,11 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
+	return (
+		<OffCanvasEditor
+			blocks={ innerBlocks }
+			onSelect={ onSelect }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
 }