入力コントロールの変更でメタフィールドを更新する

最後のステップでは入力コンテンツが変更された際にメタフィールドを更新します。これには @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 コンテンツを更新するカスタムサイドバーを作成しました。

最終更新日: