Fix: Show UI to update custom links on the sidebar navigation.

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

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
 import { updateAttributes } from './update-attributes';
 import { LinkUI } from './link-ui';
 import { useInsertedBlock } from './use-inserted-block';
+import { useListViewContext } from './context';
 
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
@@ -90,6 +91,8 @@ const ListViewBlockContents = forwardRef(
 			hasExistingLinkValue,
 		] );
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -107,6 +110,7 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
 				{ isLinkUIOpen && (
 					<LinkUI
 						clientId={ lastInsertedBlockClientId }

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

@@ -54,17 +54,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {string}  props.parentClientId  The client id of the parent block.
- * @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 {Object}  props.LeafMoreMenu    Optional more menu substitution.
- * @param {string}  props.description     Optional accessible description for the tree grid component.
- * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
- * @param {string}  props.showAppender    Flag to show or hide the block appender.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}   props                         Components props.
+ * @param {string}   props.id                      An HTML element id for the root element of ListView.
+ * @param {string}   props.parentClientId          The client id of the parent block.
+ * @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 {Object}   props.LeafMoreMenu            Optional more menu substitution.
+ * @param {string}   props.description             Optional accessible description for the tree grid component.
+ * @param {string}   props.onSelect                Optional callback to be invoked when a block is selected.
+ * @param {string}   props.showAppender            Flag to show or hide the block appender.
+ * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Object}   ref                           Forwarded ref.
  */
 function OffCanvasEditor(
 	{
@@ -77,6 +78,7 @@ function OffCanvasEditor(
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -200,6 +202,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			isMounted.current,
@@ -208,6 +211,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		]
 	);
 

packages/edit-site/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
+		"@wordpress/dom": "file:../dom",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",

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

@@ -6,17 +6,48 @@ 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 { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
 import { NavigationMenuLoader } from './loader';
 
+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>
+	);
+}
+
 export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { clientIdsTree, isLoading } = useSelect(
 		( select ) => {
@@ -35,6 +66,29 @@ 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 ]
+	);
+
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
@@ -48,11 +102,22 @@ 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 ]
+		[
+			onSelect,
+			__unstableMarkNextChangeAsNotPersistent,
+			replaceBlock,
+			setIsCustomLinkEditPopoverOpenId,
+		]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -66,6 +131,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					onSelect={ offCanvasOnselect }
 					LeafMoreMenu={ LeafMoreMenu }
 					showAppender={ false }
+					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
 			<div style={ { visibility: 'hidden' } }>