入力コントロールの初期化
エディターストア内でフィールドが利用可能になりました。これで UI を作成できます。まず最初の手順として入力コントロールを別の関数に分離します。コードをクリーンにしたまま機能を拡張できます。
( function( wp ) {
var registerPlugin = wp.plugins.registerPlugin;
var PluginSidebar = wp.editPost.PluginSidebar;
var el = wp.element.createElement;
var Text = wp.components.TextControl;
var MetaBlockField = function() {
return el( Text, {
label: 'Meta Block Field',
value: 'Initial value',
onChange: function( content ) {
console.log( 'content changed to ', content );
},
} );
}
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( MetaBlockField )
)
);
}
} );
} )( window.wp );
こここからは MetaBlockField
コンポーネントのみに集中できます。ゴールは sidebar_plugin_meta_block_field
値による初期化と、同時に値が変更された場合の更新の維持です。
WordPress にはエディターストアからのデータを操作するユーティリティがいくつかありますが、最初に使用するのは恐らく withSelect でしょう。シグニチャーは以下です。
withSelect(
// `select` を入力として取り、
// データを含むオブジェクトを返す関数
)(
// 上のデータを入力として取り、
// コンポーネントを返す関数
);
withSelect
はデータを他のコンポーネントに渡し、オリジナルのデータの変更を反映するために使用されます。コードを以下のように更新します。
( 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 mapSelectToProps = function( select ) {
return {
metaFieldValue: select( 'core/editor' )
.getEditedPostAttribute( 'meta' )
[ 'sidebar_plugin_meta_block_field' ]
}
}
var MetaBlockField = function( props ) {
return el( Text, {
label: 'Meta Block Field',
value: props.metaFieldValue,
onChange: function( content ) {
console.log( 'content has changed to ', content );
},
} );
}
var MetaBlockFieldWithData = withSelect( mapSelectToProps )( MetaBlockField );
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( MetaBlockFieldWithData )
)
);
}
} );
} )( window.wp );
このコードを JavaScript ファイルにコピーしてください。ここで @wordpress/data
パッケージにある wp.data.withSelect
ユーティリティを使用していることに注意してください。PHP スクリプトの依存性に wp-data
を追加してください。
前のセクションからコードは以下のように変わりました。
MetaBlockField
関数は入力としてprops
引数を取るようになりました。引数はmapSelectToProps
関数から返されたデータオブジェクトを含み、value プロパティの初期化に使用されます。div
要素内にレンダリングされていたコンポーネントも更新され、プラグインはMetaBlockFieldWithData
を使用します。オリジナルデータが変更されるたびに更新されます。- getCurrentPost の代わりに getEditedPostAttribute を使用してデータを取得します。まだ保存されていないユーザーが編集中のものも含め最新の値が返されます。
コードを更新しサイドバーを開いていください。入力コントロールのコンテンツはこれまでの Initial value
ではなく空白文字列になります。まだ値を入力することはできませんが、エディターストアの値を変更するとコンポーネントが更新されます。ブラウザーのコンソールを開き、次のコードを実行してください。
wp.data.dispatch( 'core/editor' ).editPost(
{ meta: { sidebar_plugin_meta_block_field: 'hello world!' } }
);
入力コンポーネントのコンテンツが変更されることを確認してください。
最終更新日: