Add Navigation Link block variations for all item types added in cust…

…omize_nav_menu_available_item_types
WordPress · May 6, 2021 · 1007736 · 1007736
1 parent 64a62e3
commit 1007736
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
@@ -105,6 +105,13 @@ Whether to present suggestions when typing the URL.
 
 Whether to present initial suggestions immediately.
 
+### fetchSuggestions
+
+-   Type: `Function`
+-   Required: No
+
+Custom search handler for suggestions. If specified, it's passed to `LinkControlSearchInput` which later passes it to `URLInput`. Refer to [`LinkControlSearchInput` docs below](#linkcontrolsearchinput) or `URLInput`'s README.md for more details about it.
+
 ### noDirectEntry
 
 -   Type: `boolean`

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -115,6 +115,7 @@ function LinkControl( {
 	suggestionsQuery = {},
 	noURLSuggestion = false,
 	createSuggestionButtonText,
+	fetchSuggestions,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -220,6 +221,7 @@ function LinkControl( {
 							allowDirectEntry={ ! noDirectEntry }
 							showSuggestions={ showSuggestions }
 							suggestionsQuery={ suggestionsQuery }
+							fetchSuggestions={ fetchSuggestions }
 							withURLSuggestion={ ! noURLSuggestion }
 							createSuggestionButtonText={
 								createSuggestionButtonText

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -228,6 +228,7 @@ export default function NavigationLinkEdit( {
 		rel,
 		title,
 		kind,
+		suggestions = [],
 	} = attributes;
 	const link = {
 		url,
@@ -449,6 +450,22 @@ export default function NavigationLinkEdit( {
 			missingText = __( 'Add a link' );
 	}
 
+	const fetchCustomItemTypeSuggestions = ( val ) => {
+		return Promise.resolve(
+			suggestions
+				.filter(
+					( item ) =>
+						val === '' || item.title.match( new RegExp( val, 'i' ) )
+				)
+				.map( ( item ) => ( {
+					id: item.id,
+					title: item.title,
+					url: item.url,
+					type: 'URL',
+				} ) )
+		);
+	};
+
 	return (
 		<Fragment>
 			<BlockControls>
@@ -569,7 +586,11 @@ export default function NavigationLinkEdit( {
 								className="wp-block-navigation-link__inline-link-input"
 								value={ link }
 								showInitialSuggestions={ true }
-								withCreateSuggestion={ userCanCreate }
+								withCreateSuggestion={
+									suggestions.length > 0
+										? false
+										: userCanCreate
+								}
 								createSuggestion={ handleCreate }
 								createSuggestionButtonText={ ( searchTerm ) => {
 									let format;
@@ -595,6 +616,11 @@ export default function NavigationLinkEdit( {
 									type,
 									kind
 								) }
+								fetchSuggestions={
+									suggestions.length > 0
+										? fetchCustomItemTypeSuggestions
+										: null
+								}
 								onChange={ ( updatedValue ) =>
 									updateNavigationLinkBlockAttributes(
 										updatedValue,

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -322,11 +322,29 @@ function register_block_core_navigation_link() {
 		}
 	}
 
+	// Some plugins use the `customize_nav_menu_available_item_types` filter to
+	// add new menu item types.
+	$item_types        = apply_filters( 'customize_nav_menu_available_item_types', array() );
+	$filter_variations = array();
+	if ( is_array( $item_types ) ) {
+		foreach ( $item_types as $item_type ) {
+			$filter_variations[] = array(
+				'name'        => $item_type['object'],
+				'title'       => $item_type['title'],
+				'description' => '',
+				'attributes'  => array(
+					'type'        => $item_type['type'],
+					'suggestions' => apply_filters( 'customize_nav_menu_available_items', array(), $item_type['type'], $item_type['object'] ),
+				),
+			);
+		}
+	}
+
 	register_block_type_from_metadata(
 		__DIR__ . '/navigation-link',
 		array(
 			'render_callback' => 'render_block_core_navigation_link',
-			'variations'      => array_merge( $built_ins, $variations ),
+			'variations'      => array_merge( $built_ins, $variations, $filter_variations ),
 		)
 	);
 }