WIP: Navigation Link variations

WordPress · Aug 20, 2020 · daac2ce · daac2ce
1 parent 3f89946
commit daac2ce
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;