サイドバースタイルの調整とコントロールの追加

サイドバーが起動できたら次のステップとして必要なコンポーネントと基本的なスタイルを追加します。

メタフィールド値の表示や編集には入力コンポーネントを使用します。@wordpress/components パッケージには再利用可能な多くのコンポーネントがあり、特に TextControl は入力フィールドの作成を目的とします。

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

    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( Text, {
                        label: 'Meta Block Field',
                        value: 'Initial value',
                        onChange: function( content ) {
                            console.log( 'content changed to ', content );
                        },
                    } )
                )
            );
        }
    } );
} )( window.wp );

plugin-sidebar.js をこのコードで更新します。@wordpress/components パッケージの新しいユーティリティ wp.components を使用していることに注意してください。PHP ファイルの依存性配列に wp-components を追加してください。

その他に前のセクションから以下の変更があります。

  • スタイルを追加できるよう div 要素に CSS クラス plugin-sidebar-content を追加
  • 元の Meta field テキストを div 要素で囲んだ TextControl コンポーネントで置換

新しい CSS クラスが利用可能になったためサイドバーに少し手を入れられます。プラグインディレクトリに新しいファイル plugin-sidebar.css を作成し次のコードを追加してください。

.plugin-sidebar-content {
    padding: 16px;
}

WordPress がエディター画面、そして実際の表示画面でこのスタイルシートをロードするには enqueue_block_editor_assets アクションフックを使用してエンキューする必要があります。

これらの変更後、PHP コードは以下のようになります。

<?php

/*
Plugin Name: Sidebar example
*/

function sidebar_plugin_register() {
    wp_register_script(
        'plugin-sidebar-js',
        plugins_url( 'plugin-sidebar.js', __FILE__ ),
        array(
            'wp-plugins',
            'wp-edit-post',
            'wp-element',
            'wp-components'
        )
    );
    wp_register_style(
        'plugin-sidebar-css',
        plugins_url( 'plugin-sidebar.css', __FILE__ )
    );
}
add_action( 'init', 'sidebar_plugin_register' );

function sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );

function sidebar_plugin_style_enqueue() {
    wp_enqueue_style( 'plugin-sidebar-css' );
}
add_action( 'enqueue_block_assets', 'sidebar_plugin_style_enqueue' );

エディターをリロードし、サイドバーを開いてください。

スタイルとコントロールのあるサイドバー

入力コントロールとスタイルでサイドバーの見た目が良くなりました。ただしユーザーの入力したテキストはまだ保存も取得もされません。次のステップでどのようにメタブロックフィールドと接続するかに焦点を当てます。

最終更新日: