From daac2ce5b54bf71db59e9b2e99889b6ba06b7acb Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 18 Aug 2020 17:58:07 +1000
Subject: [PATCH] WIP: Navigation Link variations

---
 .../src/components/link-control/index.js      |  2 +
 .../components/link-control/search-input.js   |  2 +
 .../link-control/use-search-handler.js        | 19 +++--
 .../src/navigation-link/block.json            |  8 +-
 .../block-library/src/navigation-link/edit.js | 31 +++++++-
 .../src/navigation-link/index.js              | 40 ++++++++++
 .../src/navigation-link/index.php             | 24 +++++-
 packages/block-library/src/navigation/edit.js |  7 +-
 .../block-library/src/navigation/editor.scss  |  4 +
 .../src/navigation/placeholder.js             | 79 +++++++++++++------
 .../editor/src/components/provider/index.js   | 73 +++++++++++------
 11 files changed, 224 insertions(+), 65 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 9dba8d36721f1..222602dc8b945 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -109,6 +109,7 @@ function LinkControl( {
 	createSuggestion,
 	withCreateSuggestion,
 	inputValue: propInputValue = '',
+	suggestionsQuery = {},
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -209,6 +210,7 @@ function LinkControl( {
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }
 							showSuggestions={ showSuggestions }
+							suggestionsQuery={ suggestionsQuery }
 						>
 							<div className="block-editor-link-control__search-actions">
 								<Button
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index a9852d96139ec..a4cde5b80cb8c 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/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
 		);
diff --git a/packages/block-editor/src/components/link-control/use-search-handler.js b/packages/block-editor/src/components/link-control/use-search-handler.js
index 930b5232e2fcf..64f7d1b79f84b 100644
--- a/packages/block-editor/src/components/link-control/use-search-handler.js
+++ b/packages/block-editor/src/components/link-control/use-search-handler.js
@@ -45,16 +45,18 @@ export const handleDirectEntry = ( val ) => {
 	] );
 };
 
-export const handleEntitySearch = async (
+const handleEntitySearch = async (
 	val,
-	args,
+	{ isInitialSuggestions, type, subtype },
 	fetchSearchSuggestions,
 	directEntryHandler,
 	withCreateSuggestion
 ) => {
 	let results = await Promise.all( [
 		fetchSearchSuggestions( val, {
-			...( args.isInitialSuggestions ? { perPage: 3 } : {} ),
+			...( isInitialSuggestions
+				? { perPage: 3, type, subtype }
+				: { type, subtype } ),
 		} ),
 		directEntryHandler( val ),
 	] );
@@ -65,12 +67,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 && ! isInitialSuggestions
 			? results[ 0 ].concat( results[ 1 ] )
 			: results[ 0 ];
 
 	// If displaying initial suggestions just return plain results.
-	if ( args.isInitialSuggestions ) {
+	if ( isInitialSuggestions ) {
 		return results;
 	}
 
@@ -101,6 +103,7 @@ export const handleEntitySearch = async (
 };
 
 export default function useSearchHandler(
+	{ type, subtype },
 	allowDirectEntry,
 	withCreateSuggestion
 ) {
@@ -117,12 +120,12 @@ export default function useSearchHandler(
 		: handleNoop;
 
 	return useCallback(
-		( val, args ) => {
+		( val, { isInitialSuggestions } ) => {
 			return isURLLike( val )
-				? directEntryHandler( val, args )
+				? directEntryHandler( val, { isInitialSuggestions } )
 				: handleEntitySearch(
 						val,
-						args,
+						{ isInitialSuggestions, type, subtype },
 						fetchSearchSuggestions,
 						directEntryHandler,
 						withCreateSuggestion
diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
index a4dba26451c54..7fa843fef9c40 100644
--- a/packages/block-library/src/navigation-link/block.json
+++ b/packages/block-library/src/navigation-link/block.json
@@ -17,7 +17,13 @@
 		"rel": {
 			"type": "string"
 		},
-		"id": {
+		"objectType": {
+			"type": "string"
+		},
+		"objectName": {
+			"type": "string"
+		},
+		"objectId": {
 			"type": "number"
 		},
 		"opensInNewTab": {
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 6e86c2ca81c72..f4c9c513508ce 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -58,7 +58,7 @@ function NavigationLinkEdit( {
 	mergeBlocks,
 	onReplace,
 } ) {
-	const { label, opensInNewTab, url, description, rel } = attributes;
+	const { label, opensInNewTab, url, description, rel, type } = attributes;
 	const link = {
 		url,
 		opensInNewTab,
@@ -119,8 +119,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',
 		} );
@@ -234,10 +233,32 @@ function NavigationLinkEdit( {
 								showInitialSuggestions={ true }
 								withCreateSuggestion={ userCanCreatePages }
 								createSuggestion={ handleCreatePage }
+								suggestionsQuery={ ( () => {
+									switch ( type ) {
+										case 'post':
+										case 'page':
+											return {
+												type: 'post',
+												subtype: type,
+											};
+										case 'category':
+										case 'tag':
+											return {
+												type: 'term',
+												subtype:
+													type === 'category'
+														? 'category'
+														: 'post_tag',
+											};
+										default:
+											return {};
+									}
+								} )() }
 								onChange={ ( {
 									title: newTitle = '',
 									url: newURL = '',
 									opensInNewTab: newOpensInNewTab,
+									type,
 									id,
 								} = {} ) =>
 									setAttributes( {
@@ -265,7 +286,9 @@ function NavigationLinkEdit( {
 											return escape( normalizedURL );
 										} )(),
 										opensInNewTab: newOpensInNewTab,
-										id,
+										objectType: 'post_type',
+										objectName: type,
+										objectId: id,
 									} )
 								}
 							/>
diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js
index db12c4ad8550a..7729a86628f44 100644
--- a/packages/block-library/src/navigation-link/index.js
+++ b/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: [
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index ae28e42184858..6d8c9627bef88 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -132,15 +132,33 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<a class="wp-block-navigation-link__content" ';
 
 	// Start appending HTML attributes to anchor tag.
-	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+
+	if (
+		isset( $attributes['objectType'] ) &&
+		isset( $attributes['objectName'] ) &&
+		isset( $attributes['objectId'] )
+	) {
+		if ( 'post_type' === $attributes['objectType'] ) {
+			$url = get_permalink( $attributes['objectId'] );
+		} elseif ( 'taxonomy' === $attributes['objectType'] ) {
+			$url = get_term_link( $attributes['objectId'] );
+		} elseif ( 'post_type_archive' === $attributes['objectType'] ) {
+			$url = get_post_type_archive_link( $attributes['objectName'] );
+		}
+	}
+
+	if ( ! isset( $url ) && isset( $attributes['url'] ) ) {
+		$url = $attributes['url'];
+	}
+
+	if ( isset( $url ) ) {
+		$html .= ' href="' . esc_url( $url ) . '"';
 	}
 
 	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
 		$html .= ' target="_blank"  ';
 	}
 
-	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['rel'] ) ) {
 		$html .= ' rel="' . esc_attr( $attributes['rel'] ) . '"';
 	} elseif ( isset( $attributes['nofollow'] ) && $attributes['nofollow'] ) {
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 78e8e2d85a368..f4917db06e2cd 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/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,
@@ -72,6 +72,8 @@ function Navigation( {
 		clientId
 	);
 
+	const [ isPlaceholderAllowed, setIsPlaceholderAllowed ] = useState( true );
+
 	//
 	// HANDLERS
 	//
@@ -86,12 +88,13 @@ function Navigation( {
 	}
 
 	// If we don't have existing items then show the Placeholder
-	if ( ! hasExistingNavItems ) {
+	if ( ! hasExistingNavItems && isPlaceholderAllowed ) {
 		return (
 			<Block.div>
 				<NavigationPlaceholder
 					ref={ ref }
 					onCreate={ ( blocks, selectNavigationBlock ) => {
+						setIsPlaceholderAllowed( false );
 						updateInnerBlocks( blocks );
 						if ( selectNavigationBlock ) {
 							selectBlock( clientId );
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index ee45102254148..aae60d8016e30 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -14,6 +14,10 @@ $navigation-item-height: 46px;
 }
 
 // Polish the Appender.
+.wp-block-navigation__container {
+	min-height: $navigation-item-height;
+}
+
 .wp-block-navigation .block-list-appender {
 	margin: 0;
 	display: flex;
diff --git a/packages/block-library/src/navigation/placeholder.js b/packages/block-library/src/navigation/placeholder.js
index b07f96b8a2cb2..e4b17bdb5fb99 100644
--- a/packages/block-library/src/navigation/placeholder.js
+++ b/packages/block-library/src/navigation/placeholder.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 
-import { escape } from 'lodash';
+import { escape, some } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, parse } from '@wordpress/blocks';
 import {
 	Button,
 	CustomSelectControl,
@@ -78,28 +78,63 @@ function getSelectedMenu( selectedCreateOption ) {
 /**
  * A recursive function that maps menu item nodes to blocks.
  *
- * @param {Object[]} nodes An array of menu items.
- *
+ * @param {Object[]} menuItems An array of menu items.
  * @return {WPBlock[]} An array of blocks.
  */
-function mapMenuItemsToBlocks( nodes ) {
-	return nodes.map( ( { title, type, link: url, id, children } ) => {
-		const innerBlocks =
-			children && children.length ? mapMenuItemsToBlocks( children ) : [];
+function mapMenuItemsToBlocks( menuItems ) {
+	return menuItems.map( ( menuItem ) => {
+		if ( menuItem.type === 'block' ) {
+			const [ block ] = parse( menuItem.content.raw );
 
-		return createBlock(
-			'core/navigation-link',
-			{
-				type,
-				id,
-				url,
-				label: ! title.rendered
-					? __( '(no title)' )
-					: escape( title.rendered ),
-				opensInNewTab: false,
-			},
-			innerBlocks
-		);
+			if ( ! block ) {
+				return createBlock( 'core/freeform', {
+					content: menuItem.content,
+				} );
+			}
+
+			return block;
+		}
+
+		const attributes = {
+			label: ! menuItem.title.rendered
+				? __( '(no title)' )
+				: escape( menuItem.title.rendered ),
+			opensInNewTab: menuItem.target === '_blank',
+		};
+
+		if ( menuItem.description ) {
+			attributes.description = menuItem.description;
+		}
+
+		if ( menuItem.xfn?.length && some( menuItem.xfn ) ) {
+			attributes.rel = menuItem.xfn.join( ' ' );
+		}
+
+		if ( menuItem.type ) {
+			attributes.objectType = menuItem.type;
+		}
+
+		if ( menuItem.object ) {
+			attributes.objectName = menuItem.object;
+		}
+
+		if ( menuItem.object_id ) {
+			attributes.objectId = menuItem.object_id;
+		}
+
+		if ( menuItem.classes?.length && some( menuItem.classes ) ) {
+			attributes.className = menuItem.classes.join( ' ' );
+		}
+
+		if ( menuItem.url ) {
+			attributes.url = menuItem.url;
+		}
+
+		const innerBlocks = menuItem.children?.length
+			? mapMenuItemsToBlocks( menuItem.children )
+			: [];
+
+		return createBlock( 'core/navigation-link', attributes, innerBlocks );
 	} );
 }
 
@@ -263,7 +298,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 		const { key } = selectedCreateOption;
 		switch ( key ) {
 			case CREATE_EMPTY_OPTION_VALUE: {
-				const blocks = [ createBlock( 'core/navigation-link' ) ];
+				const blocks = [];
 				onCreate( blocks );
 				return;
 			}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 98ea8db656d89..42d3e8bf87406 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -37,36 +37,59 @@ import ConvertToGroupButtons from '../convert-to-group-buttons';
  * 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 {Object} search
- * @param {number} perPage
+ * @param {string} search
+ * @param {Object} arguments
+ * @param {number} [arguments.perPage=20]
+ * @param {string} [arguments.type='post']
+ * @param {string} [arguments.subtype]
  * @return {Promise<Object[]>} List of suggestions
  */
-const fetchLinkSuggestions = async ( search, { perPage = 20 } = {} ) => {
-	const posts = apiFetch( {
-		path: addQueryArgs( '/wp/v2/search', {
-			search,
-			per_page: perPage,
-			type: 'post',
-		} ),
-	} );
+const fetchLinkSuggestions = async (
+	search,
+	{ perPage = 20, type, subtype } = {}
+) => {
+	const queries = [];
 
-	const terms = apiFetch( {
-		path: addQueryArgs( '/wp/v2/search', {
-			search,
-			per_page: perPage,
-			type: 'term',
-		} ),
-	} );
+	if ( ! type || type === 'post' ) {
+		queries.push(
+			apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					per_page: perPage,
+					type: 'post',
+					subtype,
+				} ),
+			} )
+		);
+	}
 
-	const 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 ( ! 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 ), ( post ) => ( {
 			id: post.id,
 			url: post.url,