【WordPress】ComboboxControl・FormTokenField の使い方｜カスタムブロックに検索付きセレクトとタグ入力UIを追加する

import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { ComboboxControl } from '@wordpress/components';

const AREA_OPTIONS = [
    { label: '北海道', value: 'hokkaido' },
    { label: '東京都', value: 'tokyo' },
    { label: '大阪府', value: 'osaka' },
    { label: '沖縄県', value: 'okinawa' },
];

function AreaPicker() {
    const [ area, setArea ] = useState();

    return (
        <ComboboxControl
            __next40pxDefaultSize
            __nextHasNoMarginBottom
            label={ __( 'エリア', 'my-blocks' ) }
            value={ area }
            options={ AREA_OPTIONS }
            onChange={ ( value ) => setArea( value ) }
        />
    );
}

onChange={ ( value ) =>
    setAttributes( {
        // null（リセット）のときは属性を未設定に戻す
        selectedPostId: value ? Number( value ) : undefined,
    } )
}

import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { FormTokenField } from '@wordpress/components';

const SUGGESTIONS = [ 'HTML', 'CSS', 'JavaScript', 'PHP', 'WordPress' ];

function KeywordField() {
    // トークンは「文字列の配列」で管理する
    const [ keywords, setKeywords ] = useState( [] );

    return (
        <FormTokenField
            __nextHasNoMarginBottom
            label={ __( 'キーワード', 'my-blocks' ) }
            value={ keywords }
            suggestions={ SUGGESTIONS }
            onChange={ ( tokens ) => setKeywords( tokens ) }
        />
    );
}

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-blocks/related-post",
  "title": "関連記事",
  "category": "widgets",
  "icon": "admin-links",
  "textdomain": "my-blocks",
  "attributes": {
    "selectedPostId": {
      "type": "number"
    },
    "tags": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "default": []
    }
  },
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

import { __ } from '@wordpress/i18n';
import { useState, useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
    PanelBody,
    ComboboxControl,
    FormTokenField,
} from '@wordpress/components';

export default function Edit( { attributes, setAttributes } ) {
    const { selectedPostId, tags } = attributes;
    const blockProps = useBlockProps();

    // 入力中の文字。サーバー側の検索に使う
    const [ search, setSearch ] = useState( '' );

    const { posts, terms } = useSelect(
        ( select ) => {
            const { getEntityRecords } = select( coreStore );

            return {
                posts: getEntityRecords( 'postType', 'post', {
                    per_page: 20,
                    status: 'publish',
                    search,            // 空文字なら最新の20件が返る
                    _fields: 'id,title',
                } ),
                terms: getEntityRecords( 'taxonomy', 'post_tag', {
                    per_page: -1,
                    _fields: 'id,name',
                } ),
            };
        },
        [ search ]
    );

    // { label, value } の配列に変換する。取得前は undefined なので空配列にしておく
    const postOptions = useMemo(
        () =>
            ( posts ?? [] ).map( ( post ) => ( {
                label: post.title.rendered || __( '(タイトルなし)', 'my-blocks' ),
                value: String( post.id ),   // value は文字列に揃える
            } ) ),
        [ posts ]
    );

    // FormTokenField の候補は「文字列の配列」
    const tagSuggestions = useMemo(
        () => ( terms ?? [] ).map( ( term ) => term.name ),
        [ terms ]
    );

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( '関連記事の設定', 'my-blocks' ) }>
                    <ComboboxControl
                        __next40pxDefaultSize
                        __nextHasNoMarginBottom
                        label={ __( '紹介する投稿', 'my-blocks' ) }
                        help={ __( 'タイトルの一部を入力して絞り込めます', 'my-blocks' ) }
                        value={
                            selectedPostId ? String( selectedPostId ) : null
                        }
                        options={ postOptions }
                        onFilterValueChange={ ( value ) => setSearch( value ) }
                        onChange={ ( value ) =>
                            setAttributes( {
                                selectedPostId: value
                                    ? Number( value )
                                    : undefined,
                            } )
                        }
                    />
                    <FormTokenField
                        __nextHasNoMarginBottom
                        label={ __( '表示するタグ', 'my-blocks' ) }
                        value={ tags }
                        suggestions={ tagSuggestions }
                        maxLength={ 5 }
                        onChange={ ( tokens ) =>
                            setAttributes( { tags: tokens } )
                        }
                    />
                </PanelBody>
            </InspectorControls>

            <div { ...blockProps }>
                { selectedPostId
                    ? __( '選択中の投稿ID: ', 'my-blocks' ) + selectedPostId
                    : __( 'サイドバーから投稿を選んでください', 'my-blocks' ) }
            </div>
        </>
    );
}

<?php
$post_id = isset( $attributes['selectedPostId'] ) ? (int) $attributes['selectedPostId'] : 0;
$tags    = isset( $attributes['tags'] ) ? (array) $attributes['tags'] : array();

// 投稿が選ばれていなければ何も出力しない
if ( ! $post_id ) {
	return;
}
?>
<div <?php echo get_block_wrapper_attributes(); ?>>
	<a href="<?php echo esc_url( get_permalink( $post_id ) ); ?>">
		<?php echo esc_html( get_the_title( $post_id ) ); ?>
	</a>
	<?php if ( $tags ) : ?>
		<ul class="related-post__tags">
			<?php foreach ( $tags as $tag ) : ?>
				<li><?php echo esc_html( $tag ); ?></li>
			<?php endforeach; ?>
		</ul>
	<?php endif; ?>
</div>

// 名前から ID を引ける Map を作っておく
const termIdByName = useMemo( () => {
    const map = new Map();
    ( terms ?? [] ).forEach( ( term ) => map.set( term.name, term.id ) );
    return map;
}, [ terms ] );

<FormTokenField
    __nextHasNoMarginBottom
    label={ __( '表示するタグ', 'my-blocks' ) }
    // 保存済みの ID を表示用の名前に戻す
    value={ tagIds.map(
        ( id ) =>
            ( terms ?? [] ).find( ( term ) => term.id === id )?.name ?? ''
    ) }
    suggestions={ tagSuggestions }
    onChange={ ( tokens ) =>
        setAttributes( {
            // 候補にない入力は Map に無いので取り除く
            tagIds: tokens
                .map( ( token ) => termIdByName.get( token ) )
                .filter( ( id ) => id !== undefined ),
        } )
    }
/>