Gutenberg LinkControl suggestionsQuery not working

by

I have a link control like so:

import { __ } from "@wordpress/i18n";
import {
  __experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";
import "./editor.scss";

export default function ({ attributes, setAttributes }) {

  return (
          <LinkControl
            suggestionQuery={{
              type: "post",
              subtype: "page",
            }}
          />
  );
}

However, typing into the search input shows all post types (I want it to just show pages). The documentation says to use it as so:

suggestionsQuery

Type: Object
Required: No
Controls the query
parameters used to search for suggestions. For example, to limit a
query to just Page types use:

<LinkControl
    suggestionQuery={ {
        type: 'post',
        subtype: 'page',
    } }
/>

I think I’ve followed that pretty nicely.

The only question in my mind is, the docs also state:

Data sources

By default LinkControl utilizes the __experimentalFetchLinkSuggestions API from core/block-editor in order to retrieve search suggestions for matching post-type entities.

By default this provides no functionality and so you must implement and provide this in your own Editor instance (example).

The example:
https://github.com/WordPress/gutenberg/blob/65c752816f46a9334b84f4801d80dea00ed76fba/packages/editor/src/components/provider/use-block-editor-settings.js#L114-L115

I cannot wrap my head around. It also may not be why my code isn’t working. Would anyone be able to show how I can make this work?

1 Answer
1

However, typing into the search input shows all post types (I want it
to just show pages).

That’s most likely because your code, as well as the example in the documentation, used the wrong property name — suggestionQuery — which should actually be suggestionsQuery (note the plural “suggestions”).

So try using suggestionsQuery?

<LinkControl
    suggestionsQuery={ {
        type: 'post',
        subtype: 'page',
    } }
/>

Leave a Comment