入力コントロールの変更でメタフィールドを更新する
最後のステップでは入力コンテンツが変更された際にメタフィールドを更新します。これには @wordpress/data
パッケージから別のユーティリティ withDispatch を使用します。
withDispatch
は withSelect
と同様に動作し、2つの関数を取ります。最初の関数はデータのオブジェクトを返し、2番めの関数はそのデータオブジェクトを引数として取り新しい UI コンポーネントを返します。以下の例を参照してください。
( function( wp ) {
var registerPlugin = wp.plugins.registerPlugin;
var PluginSidebar = wp.editPost.PluginSidebar;
var el = wp.element.createElement;
var Text = wp.components.TextControl;
var withSelect = wp.data.withSelect;
var withDispatch = wp.data.withDispatch;
var mapSelectToProps = function( select ) {
return {
metaFieldValue: select( 'core/editor' )
.getEditedPostAttribute( 'meta' )
[ 'sidebar_plugin_meta_block_field' ],
}
}
var mapDispatchToProps = function( dispatch ) {
return {
setMetaFieldValue: function( value ) {
dispatch( 'core/editor' ).editPost(
{ meta: { sidebar_plugin_meta_block_field: value } }
);
}
}
}
var MetaBlockField = function( props ) {
return el( Text, {
label: 'Meta Block Field',
value: props.metaFieldValue,
onChange: function( content ) {
props.setMetaFieldValue( content );
},
} );
}
var MetaBlockFieldWithData = withSelect( mapSelectToProps )( MetaBlockField );
var MetaBlockFieldWithDataAndActions = withDispatch( mapDispatchToProps )( MetaBlockFieldWithData );
registerPlugin( 'my-plugin-sidebar', {
render: function() {
return el( PluginSidebar,
{
name: 'my-plugin-sidebar',
icon: 'admin-post',
title: 'My plugin sidebar',
},
el( 'div',
{ className: 'plugin-sidebar-content' },
el( MetaBlockFieldWithDataAndActions )
)
);
}
} );
} )( window.wp );
前のセクションからコードは以下のように変わりました。
- 新しい関数
mapDispatchToProps
を追加しました。この関数はwithDispatch
に渡されます。dispatch
を引数として取り、エディターの内部データ構造を更新する関数を含むオブジェクトを返します。これらの関数は アクション としても知られます。 - ユーザーが入力コントロール内で何か入力するたびに
setMetaFieldValue
を呼ぶことで、各キーストロークごとにエディターストアを効果的に更新しています。 MetaBlockField
コンポーネントのprops
引数にはmapSelectToProps
から渡されたデータとmapDispatchToProps
から渡されたアクションが含まれます。
この新しいコードを JavaScript ファイルにコピーしてサイドバーを再ロードし、タイプするたびに入力値が更新されることを確認してください。内部データ構造が更新されることも確認してください。確認には入力コントロールで何か入力し、次の命令をブラウザーのコンソールで実行します。
wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )[
'sidebar_plugin_meta_block_field'
];
入力コントロールにタイプしたメッセージが表示されるはずです。
何文字か入力したら「下書き保存」または「公開する」をクリックし、エディターページをリロードしてください。ブラウザーは新しいコンテンツを開き、データベースから更新します。タイプした文字列がデータベースに正しく保存され、現在の投稿データ構造にリロードされたことを確認します。サイドバーを開き、入力コントロールがタイプした最後の値で初期化されることを確認してください。
最後のチェックです。この時点ではまだ入力を編集していませんので、現在の投稿と編集された属性は同じはずです。次のコードをブラウザーのコンソールで実行し確認してください。
wp.data.select( 'core/editor' ).getCurrentPost()[ 'meta' ][
'sidebar_plugin_meta_block_field'
];
wp.data.select( 'core/editor' ).getEditedPostAttribute( 'meta' )[
'sidebar_plugin_meta_block_field'
];
以上です ! post_meta
コンテンツを更新するカスタムサイドバーを作成しました。
最終更新日: