Term selector

edit.js

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ComboboxControl } from '@wordpress/components';
import { useEntityRecords } from '@wordpress/core-data';

export default function Edit( {
	attributes: { blockTaxonomyTerm },
	setAttributes,
} ) {
	const taxonomyRequest = useEntityRecords( 'taxonomy', 'category' );
	return (
		<>
			<p { ...useBlockProps() }>
				{ __(
					'Term Selector – hello from the editor!',
					'term-selector'
				) }
			</p>
			<InspectorControls>
				<PanelBody
					title={ __( 'Term Selector Settings', 'term-selector' ) }
				>
					{ taxonomyRequest.isResolving ? (
						<div>LOADING....</div>
					) : (
						<ComboboxControl
							label="Choose a term"
							value={ blockTaxonomyTerm }
							onChange={ ( term_slug ) => {
								console.log( term_slug );
								setAttributes( {
									blockTaxonomyTerm: term_slug,
								} );
							} }
							options={ taxonomyRequest?.records?.map(
								( term ) => {
									return {
										label: term.name,
										value: term.slug,
									};
								}
							) }
						/>
					) }
				</PanelBody>
			</InspectorControls>
		</>
	);
}