Remove all edit functionality from Navigation in Browse Mode (#50788)

* Remove Add Submenu option

* Remove Link UI entirely

Author: getdave

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -1,13 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import {
-	addSubmenu,
-	chevronUp,
-	chevronDown,
-	moreVertical,
-} from '@wordpress/icons';
+
+import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -19,67 +14,6 @@ const POPOVER_PROPS = {
 	variant: 'toolbar',
 };
 
-const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
-
-function AddSubmenuItem( { block, onClose, expandedState, expand } ) {
-	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
-					);
-				}
-				if ( ! expandedState[ block.clientId ] ) {
-					expand( block.clientId );
-				}
-				onClose();
-			} }
-		>
-			{ __( 'Add submenu link' ) }
-		</MenuItem>
-	);
-}
-
 export default function LeafMoreMenu( props ) {
 	const { block } = props;
 	const { clientId } = block;
@@ -131,13 +65,6 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
-						<AddSubmenuItem
-							block={ block }
-							onClose={ onClose }
-							expanded
-							expandedState={ props.expandedState }
-							expand={ props.expand }
-						/>
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -6,12 +6,10 @@ import {
 	store as blockEditorStore,
 	BlockList,
 	BlockTools,
-	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { Popover, VisuallyHidden } from '@wordpress/components';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { VisuallyHidden } from '@wordpress/components';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -21,33 +19,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { unlock } from '../../private-apis';
 import LeafMoreMenu from './leaf-more-menu';
 
-function CustomLinkAdditionalBlockUI( { block, onClose } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { label, url, opensInNewTab } = block.attributes;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
-	return (
-		<Popover placement="bottom" shift onClose={ onClose }>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				value={ link }
-				onChange={ ( updatedValue ) => {
-					updateBlockAttributes( block.clientId, {
-						label: updatedValue.title,
-						url: updatedValue.url,
-						opensInNewTab: updatedValue.opensInNewTab,
-					} );
-					onClose();
-				} }
-				onCancel={ onClose }
-			/>
-		</Popover>
-	);
-}
 // Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
 const MAX_PAGE_COUNT = 100;
 const PAGES_QUERY = [
@@ -102,29 +73,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
-		useState( false );
-
-	const renderAdditionalBlockUICallback = useCallback(
-		( block ) => {
-			if (
-				customLinkEditPopoverOpenId &&
-				block.clientId === customLinkEditPopoverOpenId
-			) {
-				return (
-					<CustomLinkAdditionalBlockUI
-						block={ block }
-						onClose={ () => {
-							setIsCustomLinkEditPopoverOpenId( false );
-						} }
-					/>
-				);
-			}
-			return null;
-		},
-		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
-	);
-
 	// Delay loading stop by 50ms to avoid flickering.
 	useEffect( () => {
 		let timeoutId;
@@ -156,22 +104,11 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else if (
-				block.name === 'core/navigation-link' &&
-				block.attributes.kind === 'custom' &&
-				block.attributes.url
-			) {
-				setIsCustomLinkEditPopoverOpenId( block.clientId );
 			} else {
 				onSelect( block );
 			}
 		},
-		[
-			onSelect,
-			__unstableMarkNextChangeAsNotPersistent,
-			replaceBlock,
-			setIsCustomLinkEditPopoverOpenId,
-		]
+		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -188,7 +125,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
-					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
 			<VisuallyHidden aria-hidden="true">