From 7469f26a42081de9c41d15c9b02e62b5a80a052c Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 8 Mar 2023 19:04:04 +0000
Subject: [PATCH] Fix: Show UI to update custom links on the sidebar
 navigation.

---
 .../off-canvas-editor/block-contents.js       |  4 ++
 .../src/components/off-canvas-editor/index.js |  3 +
 packages/edit-site/package.json               |  1 +
 .../navigation-menu-content.js                | 65 ++++++++++++++++++-
 4 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/off-canvas-editor/block-contents.js b/packages/block-editor/src/components/off-canvas-editor/block-contents.js
index 77922df8441ea0..796240b0a143cc 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-contents.js
+++ b/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 }
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index b0f18c56176967..e5292ea88d4eb1 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -77,6 +77,7 @@ function OffCanvasEditor(
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
 		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -200,6 +201,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			isMounted.current,
@@ -208,6 +210,7 @@ function OffCanvasEditor(
 			expand,
 			collapse,
 			LeafMoreMenu,
+			renderAdditionalBlockUI,
 		]
 	);
 
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 5208c81fe066d7..246f30eb33f6e9 100644
--- a/packages/edit-site/package.json
+++ b/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",
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
index ccc0b92a211ba2..ed2b9adf18b000 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -6,10 +6,14 @@ 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';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,6 +21,34 @@ import { useCallback } from '@wordpress/element';
 import { unlock } from '../../private-apis';
 import { NavigationMenuLoader } from './loader';
 
+function renderAdditionalBlockUI( 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 +67,23 @@ 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 renderAdditionalBlockUI( block, () => {
+					setIsCustomLinkEditPopoverOpenId( false );
+				} );
+			}
+		},
+		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
+	);
+
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
@@ -48,11 +97,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 +126,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					onSelect={ offCanvasOnselect }
 					LeafMoreMenu={ LeafMoreMenu }
 					showAppender={ false }
+					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
 			<div style={ { visibility: 'hidden' } }>