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

最後のステップでは入力コンテンツが変更された際にメタフィールドを更新します。これには @wordpress/data パッケージから別のユーティリティ useDispatch を使用します。

useDispatch は、唯一の引数としてストア名を取り、ストアの更新に利用可能なメソッドを返します。

( 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 useDispatch = wp.data.useDispatch;

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

        var editPost = useDispatch( 'core/editor' ).editPost;

        return el( Text, {
            label: 'Meta Block Field',
            value: metaFieldValue,
            onChange: function ( content ) {
                editPost( {
                    meta: { sidebar_plugin_meta_block_field: 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 );

前のセクションからコードは以下のように変わりました。

  • コンポーネントは useDispatch フックから返された editPost 関数を使用しています。この関数はまた アクション としても呼ばれます。
  • ユーザーが入力コントロール内で何か入力するたびに editPost を呼ぶことで、各キーストロークごとにエディターストアを効果的に更新しています。

この新しいコードを 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 コンテンツを更新するカスタムサイドバーを作成しました。

原文

最終更新日: