Default suggested links to pages (#54622)

* limit initial suggestions to pages * Revert "limit initial suggestions to pages" This reverts commit bedbd1f. * adds a special search options key that can override the search options for initial suggestions on link UI * Add test coverage for initial suggestions and fix bug * Rename var for consistency * Add e2e test coverage specifically for Nav block --------- Co-authored-by: Dave Smith <[email protected]>
WordPress · Oct 2, 2023 · 3e260aa · 3e260aa
1 parent a29512a
commit 3e260aa
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 20 deletions.
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
@@ -44,7 +44,15 @@ export function getSuggestionsQuery( type, kind ) {
 			if ( kind === 'post-type' ) {
 				return { type: 'post', subtype: type };
 			}
-			return {};
+			return {
+				// for custom link which has no type
+				// always show pages as initial suggestions
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+				},
+			};
 	}
 }
 

diff --git a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
@@ -85,17 +85,28 @@ const fetchLinkSuggestions = async (
 ) => {
 	const {
 		isInitialSuggestions = false,
+		initialSuggestionsSearchOptions = undefined,
+	} = searchOptions;
+
+	const { disablePostFormats = false } = settings;
+
+	let {
 		type = undefined,
 		subtype = undefined,
 		page = undefined,
 		perPage = isInitialSuggestions ? 3 : 20,
 	} = searchOptions;
 
-	const { disablePostFormats = false } = settings;
-
 	/** @type {Promise<WPLinkSearchResult>[]} */
 	const queries = [];
 
+	if ( isInitialSuggestions && initialSuggestionsSearchOptions ) {
+		type = initialSuggestionsSearchOptions.type || type;
+		subtype = initialSuggestionsSearchOptions.subtype || subtype;
+		page = initialSuggestionsSearchOptions.page || page;
+		perPage = initialSuggestionsSearchOptions.perPage || perPage;
+	}
+
 	if ( ! type || type === 'post' ) {
 		queries.push(
 			apiFetch( {

diff --git a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
@@ -231,22 +231,73 @@ describe( 'fetchLinkSuggestions', () => {
 			] )
 		);
 	} );
-	it( 'initial search suggestions limits results', () => {
-		return fetchLinkSuggestions( '', {
-			type: 'post',
-			subtype: 'page',
-			isInitialSuggestions: true,
-		} ).then( ( suggestions ) =>
-			expect( suggestions ).toEqual( [
-				{
-					id: 11,
-					title: 'Limit Case',
-					url: 'http://wordpress.local/limit-case/',
-					type: 'page',
-					kind: 'post-type',
+	describe( 'Initial search suggestions', () => {
+		it( 'initial search suggestions limits results', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'post',
+				subtype: 'page',
+				isInitialSuggestions: true,
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 11,
+						title: 'Limit Case',
+						url: 'http://wordpress.local/limit-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
+
+		it( 'should allow custom search options for initial suggestions', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'term',
+				subtype: 'category',
+				page: 11,
+				isInitialSuggestions: true,
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+					page: 11,
 				},
-			] )
-		);
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 22,
+						title: 'Page Case',
+						url: 'http://wordpress.local/page-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
+
+		it( 'should default any missing initial search options to those from the main search options', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'post',
+				subtype: 'page',
+				page: 11,
+				perPage: 20,
+				isInitialSuggestions: true,
+				initialSuggestionsSearchOptions: {
+					// intentionally missing.
+					// expected to default to those from the main search options.
+				},
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 22,
+						title: 'Page Case',
+						url: 'http://wordpress.local/page-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
 	} );
 	it( 'allows searching from a page', () => {
 		return fetchLinkSuggestions( '', {

diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -195,8 +195,8 @@ test.describe( 'Navigation block - List view editing', () => {
 		await expect( blockResultOptions.nth( 1 ) ).toHaveText( 'Custom Link' );
 
 		// Select the Page Link option.
-		const pageLinkResult = blockResultOptions.nth( 0 );
-		await pageLinkResult.click();
+		const customLinkResult = blockResultOptions.nth( 1 );
+		await customLinkResult.click();
 
 		// Expect to see the Link creation UI be focused.
 		const linkUIInput = linkControl.getSearchInput();
@@ -209,7 +209,26 @@ test.describe( 'Navigation block - List view editing', () => {
 		await expect( linkUIInput ).toBeFocused();
 		await expect( linkUIInput ).toBeEmpty();
 
+		// Provides test coverage for feature whereby Custom Link type
+		// should default to `Pages` when displaying the "initial suggestions"
+		// in the Link UI.
+		// See https://github.com/WordPress/gutenberg/pull/54622.
 		const firstResult = await linkControl.getNthSearchResult( 0 );
+		const secondResult = await linkControl.getNthSearchResult( 1 );
+		const thirdResult = await linkControl.getNthSearchResult( 2 );
+
+		const firstResultType =
+			await linkControl.getSearchResultType( firstResult );
+
+		const secondResultType =
+			await linkControl.getSearchResultType( secondResult );
+
+		const thirdResultType =
+			await linkControl.getSearchResultType( thirdResult );
+
+		expect( firstResultType ).toBe( 'Page' );
+		expect( secondResultType ).toBe( 'Page' );
+		expect( thirdResultType ).toBe( 'Page' );
 
 		// Grab the text from the first result so we can check (later on) that it was inserted.
 		const firstResultText =
@@ -573,4 +592,12 @@ class LinkControl {
 			.locator( '.components-menu-item__item' ) // this is the only way to get the label text without the URL.
 			.innerText();
 	}
+
+	async getSearchResultType( result ) {
+		await expect( result ).toBeVisible();
+
+		return result
+			.locator( '.components-menu-item__shortcut' ) // this is the only way to get the type text.
+			.innerText();
+	}
 }