メタブロックの作成

前のステップではメタフィールドを登録しました。このステップではユーザーにフィールド値を表示する新しいブロックを作成します。カスタムブロック作成の詳細については ブロックチュートリアル を参照してください。

このブロックでは HTML インプットテキストフィールドに似た、TextControl コンポーネントを使用します。その他のコンポーネントについては コンポーネント を参照してください。

メタの値を取得したり変更するにはブロックからフック useEntityProp を使用します。

以下のコードを JavaScript ファイルに追加してください。このチュートリアルではファイル名を myguten.js とします。

ESNext

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

registerBlockType( 'myguten/meta-block', {
    title: 'Meta Block',
    icon: 'smiley',
    category: 'text',

    edit( { className, setAttributes, attributes } ) {
        const postType = useSelect(
            ( select ) => select( 'core/editor' ).getCurrentPostType(),
            []
        );
        const [ meta, setMeta ] = useEntityProp(
            'postType',
            postType,
            'meta'
        );
        const metaFieldValue = meta['myguten_meta_block_field'];
        function updateMetaValue( newValue ) {
            setMeta( { ...meta, 'myguten_meta_block_field': newValue } );
        }

        return (
            <div className={ className }>
                <TextControl
                    label="Meta Block Field"
                    value={ metaFieldValue }
                    onChange={ updateMetaValue }
                />
            </div>
        );
    },

    // No information saved to the block
    // Data is saved to post meta via the hook
    save() {
        return null;
    },
} );

ES5

( function( wp ) {
    var el = wp.element.createElement;
    var registerBlockType = wp.blocks.registerBlockType;
    var TextControl = wp.components.TextControl;
    var useSelect = wp.data.useSelect;
    var useEntityProp = wp.coreData.useEntityProp;

    registerBlockType( 'myguten/meta-block', {
        title: 'Meta Block',
        icon: 'smiley',
        category: 'text',

        edit: function( props ) {
            var className = props.className;

            var postType = useSelect(
                function( select ) {
                    return select( 'core/editor' ).getCurrentPostType();
                },
                []
            );
            var entityProp = useEntityProp(
                'postType',
                postType,
                'meta'
            );
            var meta = entityProp[ 0 ];
            var setMeta = entityProp[ 1 ];

            var metaFieldValue = meta['myguten_meta_block_field'];
            function updateMetaValue( newValue ) {
                setMeta(
                    Object.assign(
                        {},
                        meta,
                        {
                            'myguten_meta_block_field': newValue,
                        }
                    )
                );
            }

            return el(
                'div',
                { className: className },
                el( TextControl, {
                    label: 'Meta Block Field',
                    value: metaFieldValue,
                    onChange: updateMetaValue,
                } )
            );
        },

        // No information saved to the block
        // Data is saved to post meta via attributes
        save: function() {
            return null;
        },
    } );
} )( window.wp );

重要: テストの前に JavaScript ファイルと依存性をエンキューする必要があります。上の例では WordPress パッケージ wp.element、wp.blocks、wp.components、wp.data、wp.coreData が使われていることに注意してください。それぞれを依存性の配列に含める必要があります。myguten-meta-block.php ファイルを更新してエンキュー関数を加えてください。

function myguten_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        plugins_url( 'myguten.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-data', 'wp-core-data' )
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

これで投稿の下書きを編集し、メタブロックを追加できます。ブロックにはフィールドが表示され文字を入力することができます。下書き、あるいは公開状態で投稿を保存すると、投稿メタ値も保存されます。確認するには投稿の下書きを保存し再ロードします。リロードされたフォームには数値が入力されているはずです。データが保存されたことはデータベーステーブル wp_postmeta を調べ、新しい投稿 ID が新しいフィールドデータを含むことでも確認できます。

投稿メタデータはテンプレートでも、あるいは別のブロックでも使用できます。次のセクションでは投稿メタデータを使用します。

最終更新日: 2020年6月5日