Navigation: Add Post, Page, Category and Tag variations to Link

Adds Post, Page, Category and Tag variations to the Navigation Link
block. Each variation sets the type attribute which in turn causes
LinkControl to filter its results using the /wp/v2/search API's type and
subtype params.

packages/block-editor/src/components/link-control/index.js

@@ -88,6 +88,7 @@ import { ViewerFill } from './viewer-slot';
  * @property {boolean=}                             showSuggestions        Whether to present suggestions when typing the URL.
  * @property {boolean=}                             showInitialSuggestions Whether to present initial suggestions immediately.
  * @property {boolean=}                             withCreateSuggestion   Whether to allow creation of link value from suggestion.
+ * @property {Object=}                              suggestionsQuery       Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  */
 
 /**
@@ -109,6 +110,7 @@ function LinkControl( {
 	createSuggestion,
 	withCreateSuggestion,
 	inputValue: propInputValue = '',
+	suggestionsQuery = {},
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -209,6 +211,7 @@ function LinkControl( {
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }
 							showSuggestions={ showSuggestions }
+							suggestionsQuery={ suggestionsQuery }
 						>
 							<div className="block-editor-link-control__search-actions">
 								<Button

packages/block-editor/src/components/link-control/search-input.js

@@ -38,10 +38,12 @@ const LinkControlSearchInput = forwardRef(
 			fetchSuggestions = null,
 			allowDirectEntry = true,
 			showInitialSuggestions = false,
+			suggestionsQuery = {},
 		},
 		ref
 	) => {
 		const genericSearchHandler = useSearchHandler(
+			suggestionsQuery,
 			allowDirectEntry,
 			withCreateSuggestion
 		);

packages/block-editor/src/components/link-control/use-search-handler.js

@@ -45,17 +45,15 @@ export const handleDirectEntry = ( val ) => {
 	] );
 };
 
-export const handleEntitySearch = async (
+const handleEntitySearch = async (
 	val,
-	args,
+	suggestionsQuery,
 	fetchSearchSuggestions,
 	directEntryHandler,
 	withCreateSuggestion
 ) => {
 	let results = await Promise.all( [
-		fetchSearchSuggestions( val, {
-			...( args.isInitialSuggestions ? { perPage: 3 } : {} ),
-		} ),
+		fetchSearchSuggestions( val, suggestionsQuery ),
 		directEntryHandler( val ),
 	] );
 
@@ -65,12 +63,12 @@ export const handleEntitySearch = async (
 	// just for good measure. That way once the actual results run out we always
 	// have a URL option to fallback on.
 	results =
-		couldBeURL && ! args.isInitialSuggestions
+		couldBeURL && ! suggestionsQuery.isInitialSuggestions
 			? results[ 0 ].concat( results[ 1 ] )
 			: results[ 0 ];
 
 	// If displaying initial suggestions just return plain results.
-	if ( args.isInitialSuggestions ) {
+	if ( suggestionsQuery.isInitialSuggestions ) {
 		return results;
 	}
 
@@ -101,6 +99,7 @@ export const handleEntitySearch = async (
 };
 
 export default function useSearchHandler(
+	suggestionsQuery,
 	allowDirectEntry,
 	withCreateSuggestion
 ) {
@@ -117,12 +116,12 @@ export default function useSearchHandler(
 		: handleNoop;
 
 	return useCallback(
-		( val, args ) => {
+		( val, { isInitialSuggestions } ) => {
 			return isURLLike( val )
-				? directEntryHandler( val, args )
+				? directEntryHandler( val, { isInitialSuggestions } )
 				: handleEntitySearch(
 						val,
-						args,
+						{ ...suggestionsQuery, isInitialSuggestions },
 						fetchSearchSuggestions,
 						directEntryHandler,
 						withCreateSuggestion

packages/block-library/src/navigation-link/edit.js

@@ -92,6 +92,27 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
+/**
+ * Given the Link block's type attribute, return the query params to give to
+ * /wp/v2/search.
+ *
+ * @param {string} type Link block's type attribute.
+ * @return {{ type?: string, subtype?: string }} Search query params.
+ */
+function getSuggestionsQuery( type ) {
+	switch ( type ) {
+		case 'post':
+		case 'page':
+			return { type: 'post', subtype: type };
+		case 'category':
+			return { type: 'term', subtype: 'category' };
+		case 'tag':
+			return { type: 'term', subtype: 'post_tag' };
+		default:
+			return {};
+	}
+}
+
 function NavigationLinkEdit( {
 	attributes,
 	hasDescendants,
@@ -111,7 +132,7 @@ function NavigationLinkEdit( {
 	mergeBlocks,
 	onReplace,
 } ) {
-	const { label, opensInNewTab, url, description, rel } = attributes;
+	const { label, type, opensInNewTab, url, description, rel } = attributes;
 	const link = {
 		url,
 		opensInNewTab,
@@ -179,8 +200,7 @@ function NavigationLinkEdit( {
 	}
 
 	async function handleCreatePage( pageTitle ) {
-		const type = 'page';
-		const page = await saveEntityRecord( 'postType', type, {
+		const page = await saveEntityRecord( 'postType', 'page', {
 			title: pageTitle,
 			status: 'publish',
 		} );
@@ -300,6 +320,7 @@ function NavigationLinkEdit( {
 								showInitialSuggestions={ true }
 								withCreateSuggestion={ userCanCreatePages }
 								createSuggestion={ handleCreatePage }
+								suggestionsQuery={ getSuggestionsQuery( type ) }
 								onChange={ ( {
 									title: newTitle = '',
 									url: newURL = '',

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

@@ -18,16 +18,56 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Link' ),
+
 	icon,
+
 	description: __( 'Add a page, link, or another item to your navigation.' ),
+
+	variations: [
+		{
+			name: 'link',
+			isDefault: true,
+			title: __( 'Link' ),
+			description: __( 'A link to a URL.' ),
+			attributes: {},
+		},
+		{
+			name: 'post',
+			title: __( 'Post' ),
+			description: __( 'A link to a post.' ),
+			attributes: { type: 'post' },
+		},
+		{
+			name: 'page',
+			title: __( 'Page' ),
+			description: __( 'A link to a page.' ),
+			attributes: { type: 'page' },
+		},
+		{
+			name: 'category',
+			title: __( 'Category' ),
+			description: __( 'A link to a category.' ),
+			attributes: { type: 'category' },
+		},
+		{
+			name: 'tag',
+			title: __( 'Tag' ),
+			description: __( 'A link to a tag.' ),
+			attributes: { type: 'tag' },
+		},
+	],
+
 	__experimentalLabel: ( { label } ) => label,
+
 	merge( leftAttributes, { label: rightLabel = '' } ) {
 		return {
 			...leftAttributes,
 			label: leftAttributes.label + rightLabel,
 		};
 	},
+
 	edit,
+
 	save,
 
 	deprecated: [

packages/block-library/src/navigation/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import {
 	InnerBlocks,
 	InspectorControls,
@@ -48,7 +48,13 @@ function Navigation( {
 	// HOOKS
 	//
 	const ref = useRef();
+
+	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
+		! hasExistingNavItems
+	);
+
 	const { selectBlock } = useDispatch( 'core/block-editor' );
+
 	const { TextColor, BackgroundColor, ColorPanel } = __experimentalUseColors(
 		[
 			{ name: 'textColor', property: 'color' },
@@ -85,13 +91,17 @@ function Navigation( {
 		};
 	}
 
-	// If we don't have existing items then show the Placeholder
-	if ( ! hasExistingNavItems ) {
+	//
+	// RENDER
+	//
+
+	if ( isPlaceholderShown ) {
 		return (
 			<Block.div>
 				<NavigationPlaceholder
 					ref={ ref }
 					onCreate={ ( blocks, selectNavigationBlock ) => {
+						setIsPlaceholderShown( false );
 						updateInnerBlocks( blocks );
 						if ( selectNavigationBlock ) {
 							selectBlock( clientId );
@@ -107,7 +117,6 @@ function Navigation( {
 		'is-vertical': attributes.orientation === 'vertical',
 	} );
 
-	// UI State: rendered Block UI
 	return (
 		<>
 			<BlockControls>

packages/block-library/src/navigation/editor.scss

@@ -28,6 +28,11 @@ $navigation-item-height: 46px;
 	padding: $grid-unit-20;
 }
 
+// Ensure that an empty block has space around the appender.
+.wp-block-navigation__container {
+	min-height: $navigation-item-height;
+}
+
 // Ensure sub-menus stay open and visible when a nested block is selected.
 .wp-block-navigation__container.is-parent-of-selected-block {
 	visibility: visible;

packages/block-library/src/navigation/placeholder.js

@@ -245,8 +245,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 	const createFromMenu = useCallback( () => {
 		// If an empty menu was selected, create an empty block.
 		if ( ! menuItems.length ) {
-			const blocks = [ createBlock( 'core/navigation-link' ) ];
-			onCreate( blocks );
+			onCreate( [] );
 			return;
 		}
 
@@ -263,8 +262,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 		const { key } = selectedCreateOption;
 		switch ( key ) {
 			case CREATE_EMPTY_OPTION_VALUE: {
-				const blocks = [ createBlock( 'core/navigation-link' ) ];
-				onCreate( blocks );
+				onCreate( [] );
 				return;
 			}
 

packages/edit-navigation/src/index.js

@@ -34,53 +34,69 @@ function disableInsertingNonNavigationBlocks( settings, name ) {
 /**
  * Fetches link suggestions from the API. This function is an exact copy of a function found at:
  *
- * wordpress/editor/src/components/provider/index.js
+ * packages/editor/src/components/provider/index.js
  *
  * It seems like there is no suitable package to import this from. Ideally it would be either part of core-data.
  * Until we refactor it, just copying the code is the simplest solution.
  *
  * @param {string} search
  * @param {Object} [searchArguments]
- * @param {number} [searchArguments.perPage=20]
+ * @param {number} [searchArguments.isInitialSuggestions]
+ * @param {number} [searchArguments.type]
+ * @param {number} [searchArguments.subtype]
  * @param {Object} [editorSettings]
  * @param {boolean} [editorSettings.disablePostFormats=false]
  * @return {Promise<Object[]>} List of suggestions
  */
 const fetchLinkSuggestions = (
 	search,
-	{ perPage = 20 } = {},
+	{ isInitialSuggestions, type, subtype } = {},
 	{ disablePostFormats = false } = {}
 ) => {
-	const posts = apiFetch( {
-		path: addQueryArgs( '/wp/v2/search', {
-			search,
-			per_page: perPage,
-			type: 'post',
-		} ),
-	} );
+	const perPage = isInitialSuggestions ? 3 : 20;
 
-	const terms = apiFetch( {
-		path: addQueryArgs( '/wp/v2/search', {
-			search,
-			per_page: perPage,
-			type: 'term',
-		} ),
-	} );
+	const queries = [];
+
+	if ( ! type || type === 'post' ) {
+		queries.push(
+			apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					per_page: perPage,
+					type: 'post',
+					subtype,
+				} ),
+			} )
+		);
+	}
 
-	let formats;
-	if ( disablePostFormats ) {
-		formats = Promise.resolve( [] );
-	} else {
-		formats = apiFetch( {
-			path: addQueryArgs( '/wp/v2/search', {
-				search,
-				per_page: perPage,
-				type: 'post-format',
-			} ),
-		} );
+	if ( ! type || type === 'term' ) {
+		queries.push(
+			apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					per_page: perPage,
+					type: 'term',
+					subtype,
+				} ),
+			} )
+		);
+	}
+
+	if ( ! disablePostFormats && ( ! type || type === 'post-format' ) ) {
+		queries.push(
+			apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					per_page: perPage,
+					type: 'post-format',
+					subtype,
+				} ),
+			} )
+		);
 	}
 
-	return Promise.all( [ posts, terms, formats ] ).then( ( results ) => {
+	return Promise.all( queries ).then( ( results ) => {
 		return map( flatten( results ).slice( 0, perPage ), ( result ) => ( {
 			id: result.id,
 			url: result.url,