メタブロックの作成
前のステップではメタフィールドを登録しました。このステップではユーザーにフィールド値を表示する新しいブロックを作成します。カスタムブロック作成の詳細については ブロックチュートリアル を参照してください。
このブロックでは 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';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'myguten/meta-block', {
title: 'Meta Block',
icon: 'smiley',
category: 'text',
edit( { setAttributes, attributes } ) {
const blockProps = useBlockProps();
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 { ...blockProps }>
<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;
var useBlockProps = wp.blockEditor.useBlockProps;
registerBlockType( 'myguten/meta-block', {
title: 'Meta Block',
icon: 'smiley',
category: 'text',
edit: function( props ) {
var blockProps = useBlockProps();
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',
blockProps,
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', 'wp-block-editor' )
);
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
これで投稿の下書きを編集し、メタブロックを追加できます。ブロックにはフィールドが表示され文字を入力することができます。下書き、あるいは公開状態で投稿を保存すると、投稿メタ値も保存されます。確認するには投稿の下書きを保存し再ロードします。リロードされたフォームには数値が入力されているはずです。データが保存されたことはデータベーステーブル wp_postmeta
を調べ、新しい投稿 ID が新しいフィールドデータを含むことでも確認できます。

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