【WordPress】useSelect・useDispatch の使い方｜カスタムブロックからエディターのデータを取得・更新する

import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

export default function Edit() {
    // 編集中の投稿タイトルを取り出す
    const postTitle = useSelect(
        ( select ) =>
            select( editorStore ).getEditedPostAttribute( 'title' ),
        []
    );

    return (
        <div { ...useBlockProps() }>
            <p>いまのタイトル：{ postTitle }</p>
        </div>
    );
}

import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';

select( blockEditorStore );  // 推奨
select( 'core/block-editor' ); // 動くが文字列の綴りミスに気づけない

const { postTitle, isPublished } = useSelect( ( select ) => {
    const { getEditedPostAttribute, isCurrentPostPublished } =
        select( editorStore );

    return {
        postTitle: getEditedPostAttribute( 'title' ),
        isPublished: isCurrentPostPublished(),
    };
}, [] );

export default function Edit( { attributes, clientId } ) {
    const { categoryId } = attributes;

    // 関数内で使っている categoryId を依存配列に入れる
    const category = useSelect(
        ( select ) =>
            select( coreStore ).getEntityRecord(
                'taxonomy',
                'category',
                categoryId
            ),
        [ categoryId ]
    );

    // …
}

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

export default function Edit( { attributes, setAttributes } ) {
    const categories = useSelect(
        ( select ) =>
            select( coreStore ).getEntityRecords( 'taxonomy', 'category', {
                per_page: -1,
            } ),
        []
    );

    // 取得中は undefined、取得後に配列が入る
    const options = ( categories ?? [] ).map( ( category ) => ( {
        label: category.name,
        value: String( category.id ),
    } ) );

    return (
        <>
            <InspectorControls>
                <PanelBody title="表示設定">
                    <SelectControl
                        label="カテゴリー"
                        value={ attributes.categoryId }
                        options={ options }
                        onChange={ ( value ) =>
                            setAttributes( { categoryId: value } )
                        }
                        __nextHasNoMarginBottom
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...useBlockProps() }>{ /* 表示 */ }</div>
        </>
    );
}

import { Button } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

export default function Edit() {
    const { createSuccessNotice } = useDispatch( noticesStore );

    return (
        <div { ...useBlockProps() }>
            <Button
                variant="primary"
                onClick={ () =>
                    createSuccessNotice( '設定を反映しました。', {
                        type: 'snackbar',
                    } )
                }
            >
                通知を出す
            </Button>
        </div>
    );
}

import { store as blockEditorStore } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
import { useDispatch, useSelect } from '@wordpress/data';

export default function Edit( { clientId } ) {
    const { insertBlocks } = useDispatch( blockEditorStore );

    // 自分の内側にあるブロックの数
    const innerCount = useSelect(
        ( select ) => select( blockEditorStore ).getBlockCount( clientId ),
        [ clientId ]
    );

    const addParagraph = () => {
        insertBlocks(
            createBlock( 'core/paragraph', { content: '追加された段落' } ),
            innerCount, // 挿入位置（末尾）
            clientId    // 挿入先の親ブロック
        );
    };

    // …
}

// 避けたい書き方：毎回新しい配列を返す
const titles = useSelect(
    ( select ) =>
        select( blockEditorStore )
            .getBlocks()
            .map( ( block ) => block.name ),
    []
);

// ストアからは素の値を取り、加工はコンポーネント側で行う
const blocks = useSelect(
    ( select ) => select( blockEditorStore ).getBlocks(),
    []
);
const names = blocks.map( ( block ) => block.name );

import { Spinner } from '@wordpress/components';

if ( ! categories ) {
    return (
        <div { ...useBlockProps() }>
            <Spinner />
        </div>
    );
}