useState 風味に WordPressのカスタムフィールドを扱うやつ

useMeta.js

import { Fragment, useCallback } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';

const useMeta = ( key ) => {
	const meta = useSelect( ( select ) => {
		const { getEditedPostAttribute } = select( 'core/editor' );
		const values = getEditedPostAttribute( 'meta' ) || {};
		return values[ key ] || '';
	}, [] );

	const { editPost } = useDispatch( 'core/editor' );
	const setMeta = useCallback( ( value ) => {
		editPost( {
			meta: { [ key ]: value },
		} );
	}, [] );

	return [ meta, setMeta ];
};

useMeta.ts

import { Fragment, useCallback } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';

const useMeta = <T extends any>( key: string ): [ T, ( v: T ) => void ] => {
	const meta = useSelect( ( select ) => {
		const { getEditedPostAttribute } = select( 'core/editor' );
		const metas: { [ key: string ]: T } = getEditedPostAttribute( 'meta' ) || {};
		return metas[ key ];
	}, [] );

	const { editPost } = useDispatch( 'core/editor' );
	const setMeta = useCallback( ( value ) => {
		editPost( {
			meta: { [ key ]: value },
		} );
	}, [] );

	return [ meta, setMeta ];
};