block editor – Forestall FormTokenField element to simply accept random entries

The validation function is at the moment flagged as “experimental,” which signifies that it could change at any level with out warning and should require the Gutenberg plugin to make use of. When you do select to make use of it, you will need to preserve an eye fixed out for updates on the standing of the interface.

It is uncovered by means of the __experimentalValidateInput prop which is handed a callback. The callback receives a newly enter worth as an argument, and should return a truthy worth to simply accept the enter or a falsey worth to disclaim it. You may use it as such:

import { FormTokenField } from '@wordpress/parts'
import { useSelect } from '@wordpress/knowledge';

// A a number of Submit-Kind choice management applied on prime of FormTokenField.
const PostTypesControl = ( props ) => {
  const { worth = [], onChange } = props;

  const sorts = useSelect(
    ( choose ) =>  ( choose( 'core' ).getPostTypes() ?? [] ).map( ( { slug, identify } ) => ( { worth: slug, title: identify } ) ),
    []
  );

  const tokenIsValid = ( title ) => sorts.some( sort => sort.title === title );
  const titleToValue = ( title ) => title ? sorts.discover( sort => sort.title === title )?.worth || '' : '';

  return (
    <FormTokenField
      worth={ worth }
      onChange={ onChange }
      options={ sorts.map( sort => sort.title ) }
      saveTransform={ titleToValue }
      __experimentalValidateInput={ tokenIsValid }
    />
  );
};

is there another element that would do that – enable customers to pick out a number of objects from predefined lists of choices?

<SelectControl> with a number of enabled involves thoughts, however there could also be others.