Navigation: Surface blocks and variations in Link UI search results

packages/block-library/src/navigation-link/link-ui/index.js

@@ -8,8 +8,15 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { LinkControl, useBlockEditingMode } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	LinkControl,
+	useBlockEditingMode,
+	store as blockEditorStore,
+	BlockIcon,
+} from '@wordpress/block-editor';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useMemo,
 	useState,
@@ -70,8 +77,28 @@ export function getSuggestionsQuery( type, kind ) {
 	}
 }
 
+const EXCLUDED = new Set( [
+	'core/navigation-link',
+	'core/navigation-submenu',
+] );
+
+function getVariationBadgeLabel( variation ) {
+	if ( variation.attributes?.kind === 'post-type' ) {
+		/* translators: %s: Post type name (e.g. "Post", "Page", "CPT", "Taxonomy"). */
+		return sprintf( __( '%s link' ), variation.attributes?.type );
+	}
+	if ( variation.attributes?.kind === 'taxonomy' ) {
+		return __( 'taxonomy' );
+	}
+	return __( 'Link' );
+}
+const matchesQuery = ( query, title = '', keywords = [] ) =>
+	title.toLowerCase().includes( query ) ||
+	keywords.some( ( kw ) => kw.toLowerCase().includes( query ) );
+
 function UnforwardedLinkUI( props, ref ) {
 	const { label, url, opensInNewTab, type, kind, id } = props.link;
+	const { onBlockInsert, onClose } = props;
 
 	const { entityRecord, hasBinding, isEntityAvailable } = props.entity || {};
 
@@ -97,11 +124,13 @@ function UnforwardedLinkUI( props, ref ) {
 	const [ initialSearchValue, setInitialSearchValue ] = useState( '' );
 	// Tracks the live search input between renders without causing re-renders.
 	const searchInputValueRef = useRef( '' );
+	const [ searchInputValue, setSearchInputValue ] = useState( '' );
 	// Call this instead of setting searchInputValueRef.current and
 	// setInitialSearchValue separately, to keep both in sync.
 	const updateSearchValue = ( value ) => {
 		searchInputValueRef.current = value;
 		setInitialSearchValue( value );
+		setSearchInputValue( value );
 	};
 	const linkControlWrapperRef = useRef();
 	const addPageButtonRef = useRef();
@@ -175,6 +204,106 @@ function UnforwardedLinkUI( props, ref ) {
 	}, [ shouldFocusPane ] );
 
 	const blockEditingMode = useBlockEditingMode();
+	const {
+		rootClientId,
+		insertionIndex,
+		allBlockTypes,
+		canInsertBlockType,
+		navigationLinkVariations,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockIndex,
+				canInsertBlockType: _canInsert,
+			} = select( blockEditorStore );
+			const { getBlockVariations } = select( blocksStore );
+			const root = getBlockRootClientId( props.clientId );
+
+			return {
+				rootClientId: root,
+				insertionIndex: getBlockIndex( props.clientId ) + 1,
+				allBlockTypes: root
+					? select( blocksStore ).getBlockTypes()
+					: [],
+				canInsertBlockType: _canInsert,
+				navigationLinkVariations: root
+					? getBlockVariations( 'core/navigation-link', 'inserter' )
+					: [],
+			};
+		},
+		[ props.clientId ]
+	);
+
+	const { insertBlock } = useDispatch( blockEditorStore );
+
+	// Filter insertable blocks by both capabilities AND the live search input in one pass.
+	// Empty query > no results (avoids flooding the UI before the user types).
+	const matchingItems = useMemo( () => {
+		const query = searchInputValue.trim().toLowerCase();
+
+		if ( ! query || ! rootClientId || ( type && url ) ) {
+			return [];
+		}
+
+		const variations = ( navigationLinkVariations ?? [] )
+			.filter(
+				( v ) =>
+					( v.title ?? '' ).toLowerCase() !== 'page link' &&
+					matchesQuery( query, v.title, v.keywords )
+			)
+			.map( ( v ) => ( {
+				key: `${ v.name }-${ v.title }`,
+				icon: v.icon ?? 'admin-links',
+				/* translators: %s: Variation title (e.g., "Category", "Posts") */
+				label: sprintf( __( 'Add %s' ), v.title ),
+				badge: getVariationBadgeLabel( v ),
+				onInsert() {
+					const block = createBlock(
+						'core/navigation-link',
+						v.attributes ?? {}
+					);
+					insertBlock( block, insertionIndex, rootClientId );
+					onBlockInsert?.( block );
+					onClose?.();
+				},
+			} ) );
+
+		const blocks = allBlockTypes
+			.filter(
+				( bt ) =>
+					! EXCLUDED.has( bt.name ) &&
+					canInsertBlockType( bt.name, rootClientId ) &&
+					matchesQuery( query, bt.title, bt.keywords )
+			)
+			.map( ( bt ) => ( {
+				key: bt.name,
+				icon: bt.icon,
+				/* translators: %s: Block title (e.g., "Site Logo") */
+				label: sprintf( __( 'Add %s Block' ), bt.title ),
+				badge: __( 'Block' ),
+				onInsert() {
+					const block = createBlock( bt.name );
+					insertBlock( block, insertionIndex, rootClientId );
+					onBlockInsert?.( block );
+					onClose?.();
+				},
+			} ) );
+
+		return [ ...variations, ...blocks ];
+	}, [
+		searchInputValue,
+		navigationLinkVariations,
+		allBlockTypes,
+		canInsertBlockType,
+		rootClientId,
+		insertionIndex,
+		insertBlock,
+		onBlockInsert,
+		onClose,
+		type,
+		url,
+	] );
 
 	return (
 		<Popover
@@ -214,6 +343,7 @@ function UnforwardedLinkUI( props, ref ) {
 							// Observe the input value so we can pass the value to the page creator
 							// and restore it on back button click
 							searchInputValueRef.current = value;
+							setSearchInputValue( value );
 						} }
 						inputValue={ initialSearchValue }
 						onRemove={ props.onRemove }
@@ -243,6 +373,7 @@ function UnforwardedLinkUI( props, ref ) {
 									canAddBlock={
 										blockEditingMode === 'default'
 									}
+									matchingItems={ matchingItems }
 								/>
 							);
 						} }
@@ -292,16 +423,36 @@ const LinkUITools = ( {
 	setAddingPage,
 	canAddPage,
 	canAddBlock,
+	matchingItems = [],
 } ) => {
 	const blockInserterAriaRole = 'listbox';
 
 	// Don't render anything if neither button should be shown
-	if ( ! canAddPage && ! canAddBlock ) {
+	if ( ! canAddPage && ! canAddBlock && matchingItems.length === 0 ) {
 		return null;
 	}
 
 	return (
 		<VStack spacing={ 0 } className="link-ui-tools">
+			{ canAddPage &&
+				canAddBlock &&
+				matchingItems.map( ( item ) => (
+					<Button
+						__next40pxDefaultSize
+						key={ item.key }
+						icon={ <BlockIcon icon={ item.icon } /> }
+						onClick={ ( e ) => {
+							e.preventDefault();
+							item.onInsert();
+						} }
+						aria-haspopup={ blockInserterAriaRole }
+					>
+						{ item.label }
+						<span className="link-ui-suggestion-item__badge">
+							{ item.badge }
+						</span>
+					</Button>
+				) ) }
 			{ canAddPage && (
 				<Button
 					__next40pxDefaultSize
@@ -316,7 +467,7 @@ const LinkUITools = ( {
 					{ __( 'Create page' ) }
 				</Button>
 			) }
-			{ canAddBlock && (
+			{ canAddBlock && matchingItems.length === 0 && (
 				<Button
 					__next40pxDefaultSize
 					ref={ addBlockButtonRef }

packages/block-library/src/navigation-link/style.scss

@@ -31,3 +31,19 @@
 	margin-left: $grid-unit-10;
 	text-transform: uppercase;
 }
+
+.link-ui-suggestion-item__badge {
+	font-size: 10px;
+	font-weight: 500;
+	text-transform: uppercase;
+	color: $gray-600;
+	background-color: $gray-100;
+	padding: 2px 4px;
+	border-radius: 2px;
+	flex-shrink: 0;
+	margin-left: auto;
+	max-width: 30%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}