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

エディターストア内でフィールドが利用可能になりました。これで 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 にはエディタストアからのデータを操作するユーティリティがいくつかありますが、最初に使用するのは恐らく useSelect でしょう。

useSelect は、現在のコンポーネントのデータの取得や、元のデータが変更された際のデータの更新に使用されます。useSelect を使用してコードを更新します。

( function ( wp ) {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginSidebar = wp.editPost.PluginSidebar;
    var el = wp.element.createElement;
    var Text = wp.components.TextControl;
    var useSelect = wp.data.useSelect;

    var MetaBlockField = function () {
        var metaFieldValue = useSelect( function ( select ) {
            return select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ 'sidebar_plugin_meta_block_field' ];
        }, [] );

        return el( Text, {
            label: 'Meta Block Field',
            value: metaFieldValue,
            onChange: function ( content ) {
                console.log( 'content has 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 );

このコードを JavaScript ファイルにコピーしてください。ここで @wordpress/data パッケージにある wp.data.useSelect ユーティリティを使用していることに注意してください。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!' } } );

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

原文

最終更新日: