サイドバースタイルの調整とコントロールの追加
サイドバーが起動できたら次のステップとして必要なコンポーネントと基本的なスタイルを追加します。
メタフィールド値の表示や編集には入力コンポーネントを使用します。@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' );
エディターをリロードし、サイドバーを開いてください。

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