OffCanvasEditor: Only allow some blocks to be converted to submenus

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

@@ -19,11 +19,68 @@ const POPOVER_PROPS = {
 	variant: 'toolbar',
 };
 
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( { block, onClose } ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					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
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
 export default function LeafMoreMenu( props ) {
 	const { clientId, block } = props;
 
-	const { insertBlock, replaceBlock, removeBlocks, replaceInnerBlocks } =
-		useDispatch( blockEditorStore );
+	const { removeBlocks } = useDispatch( blockEditorStore );
 
 	const label = sprintf(
 		/* translators: %s: block name */
@@ -42,47 +99,7 @@ export default function LeafMoreMenu( props ) {
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
-					<MenuItem
-						icon={ addSubmenu }
-						onClick={ () => {
-							const updateSelectionOnInsert = false;
-							const newLink = createBlock(
-								'core/navigation-link'
-							);
-							if ( block.name === 'core/navigation-submenu' ) {
-								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
-								);
-
-								// The following must happen as two independent actions.
-								// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
-								// selector to determine which block is "active". As the UX needs the newLink to be
-								// the "active" block it must be the last block to be inserted.
-								// Therefore the Submenu is first created and **then** the newLink is inserted
-								// thus ensuring it is the last inserted block.
-								replaceBlock( clientId, newSubmenu );
-
-								replaceInnerBlocks(
-									newSubmenu.clientId,
-									[ newLink ],
-									updateSelectionOnInsert
-								);
-							}
-							onClose();
-						} }
-					>
-						{ __( 'Add submenu link' ) }
-					</MenuItem>
+					<AddSubmenuItem block={ block } onClose={ onClose } />
 					<MenuItem
 						onClick={ () => {
 							removeBlocks( [ clientId ], false );