入力コントロールの初期化

エディターストア内でフィールドが利用可能になりました。これで 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!' } }
);

入力コンポーネントのコンテンツが変更されることを確認してください。

最終更新日: