Navigation: Experiment with adding navigation link variations

packages/block-library/src/navigation-link/block.json

@@ -10,6 +10,9 @@
 		"type": {
 			"type": "string"
 		},
+	  	"objectType": {
+			"type": "string"
+	  	},
 		"description": {
 			"type": "string"
 		},

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

@@ -109,9 +109,10 @@ const useIsDraggingWithin = ( elementRef ) => {
  * /wp/v2/search.
  *
  * @param {string} type Link block's type attribute.
+ * @param {string} objectType Link block's object type attribute. (post-type|taxonomy)
  * @return {{ type?: string, subtype?: string }} Search query params.
  */
-function getSuggestionsQuery( type ) {
+function getSuggestionsQuery( type, objectType ) {
 	switch ( type ) {
 		case 'post':
 		case 'page':
@@ -121,6 +122,12 @@ function getSuggestionsQuery( type ) {
 		case 'tag':
 			return { type: 'term', subtype: 'post_tag' };
 		default:
+			if ( objectType === 'taxonomy' ) {
+				return { type: 'term', subtype: type };
+			}
+			if ( objectType === 'post-type' ) {
+				return { type: 'post', subtype: type };
+			}
 			return {};
 	}
 }
@@ -152,6 +159,7 @@ function NavigationLinkEdit( {
 		description,
 		rel,
 		title,
+		objectType,
 	} = attributes;
 	const link = {
 		url,
@@ -406,7 +414,10 @@ function NavigationLinkEdit( {
 								} }
 								noDirectEntry={ !! type }
 								noURLSuggestion={ !! type }
-								suggestionsQuery={ getSuggestionsQuery( type ) }
+								suggestionsQuery={ getSuggestionsQuery(
+									type,
+									objectType
+								) }
 								onChange={ ( {
 									title: newTitle = '',
 									url: newURL = '',

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

@@ -8,6 +8,10 @@ import {
 	postTitle as postIcon,
 	tag as tagIcon,
 } from '@wordpress/icons';
+
+import apiFetch from '@wordpress/api-fetch';
+import { registerBlockVariation } from '@wordpress/blocks';
+
 const variations = [
 	{
 		name: 'link',
@@ -16,34 +20,6 @@ const variations = [
 		description: __( 'A link to a URL.' ),
 		attributes: {},
 	},
-	{
-		name: 'post',
-		icon: postIcon,
-		title: __( 'Post Link' ),
-		description: __( 'A link to a post.' ),
-		attributes: { type: 'post' },
-	},
-	{
-		name: 'page',
-		icon: pageIcon,
-		title: __( 'Page Link' ),
-		description: __( 'A link to a page.' ),
-		attributes: { type: 'page' },
-	},
-	{
-		name: 'category',
-		icon: categoryIcon,
-		title: __( 'Category Link' ),
-		description: __( 'A link to a category.' ),
-		attributes: { type: 'category' },
-	},
-	{
-		name: 'tag',
-		icon: tagIcon,
-		title: __( 'Tag Link' ),
-		description: __( 'A link to a tag.' ),
-		attributes: { type: 'tag' },
-	},
 ];
 
 /**
@@ -57,4 +33,65 @@ variations.forEach( ( variation ) => {
 		blockAttributes.type === variationAttributes.type;
 } );
 
+const ICON_MAP = {
+	post: postIcon,
+	page: pageIcon,
+	tag: tagIcon,
+	category: categoryIcon,
+};
+
+Promise.all( [
+	apiFetch( {
+		path: '/wp/v2/types?context=edit&per_page=-1&show_in_nav_menus=true',
+		type: 'GET',
+	} ),
+	apiFetch( {
+		path:
+			'/wp/v2/taxonomies?context=edit&per_page=-1&show_in_nav_menus=true',
+		type: 'GET',
+	} ),
+] ).then( function ( [ postTypes, taxonomies ] ) {
+	const postTypeKeys = Object.keys( postTypes );
+	for ( const type of postTypeKeys ) {
+		const postType = postTypes[ type ];
+		//customizer actually sets type = 'post-type', and 'object' = $post_type->name
+		registerBlockVariation( 'core/navigation-link', {
+			name: postType.slug, //TODO: can this be trusted to be unique?
+			attributes: { type: postType.slug, objectType: 'post-type' },
+			title: postType?.labels?.menu_name, //TODO: should this be passed through as a new type.label for description
+			...( ICON_MAP[ postType.slug ] && {
+				icon: ICON_MAP[ postType.slug ],
+			} ), //TODO: what about custom post type/taxonomy icons?
+		} );
+	}
+	const taxonomyKeys = Object.keys( taxonomies );
+	for ( const taxonomyKey of taxonomyKeys ) {
+		//customizer actually sets type = 'taxonomy', and 'object' = $taxonomy->name
+		//it also has a custom hook for: $item_types = apply_filters( 'customize_nav_menu_available_item_types', $item_types );
+		//TODO needs research for data structure choices, we likely need taxonomy|post_type and name, or term/post_type id
+		const taxonomy = taxonomies[ taxonomyKey ];
+		//tag is post_tag
+		if ( taxonomyKey === 'post_tag' ) {
+			registerBlockVariation( 'core/navigation-link', {
+				name: 'tag',
+				attributes: { type: 'tag', objectType: 'taxonomy' },
+				title: taxonomy?.labels?.menu_name,
+				icon: ICON_MAP.tag,
+			} );
+		} else {
+			registerBlockVariation( 'core/navigation-link', {
+				name: taxonomy.slug, //TODO: can this be trusted to be unique?
+				attributes: {
+					type: taxonomy.slug,
+					objectType: 'taxonomy',
+				},
+				title: taxonomy?.labels?.menu_name,
+				...( ICON_MAP[ taxonomy.slug ] && {
+					icon: ICON_MAP[ taxonomy.slug ],
+				} ),
+			} );
+		}
+	}
+} );
+
 export default variations;