サイドバーに表示されるカスタム設定を追加したい。
カスタムブロックの追加については前項までを参照。
なお、ここからの記述はネットの情報を断片的にかき集めてなんとか動くようにしたものなので、コードとして正しいかは不明。項目追加の流れについての理解をする資料程度にとどめたい。
block.js
block.jsを以下のように変更
(function (blocks, element) {
var el = element.createElement;
var RichText = wp.blockEditor.RichText;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextareaControl = wp.components.TextareaControl;
blocks.registerBlockType('my-gutenberg/my-sample00', {
title: 'My Gutenberg Sample',
icon: 'format-aside',
category: 'layout',
attributes: {
ctitle: {
default: 'タイトル',
},
myText: {
default: ''
}
},
edit: function (props) {
return el(
'div',
{
className: props.className
},
el(
InspectorControls,
{key: 'controls' },
el(
PanelBody,
{
title: 'panel test',
initialOpen: true,
children: el(
TextareaControl,
{
label: 'Text',
hideLabelFromVision: true,
help: 'Enter some text',
value: props.attributes.myText,
onChange: function (event) {
props.setAttributes({
myText: event
});
}
}
)
},
),
),
el(
RichText,
{
tagName: 'p',
value: props.attributes.ctitle,
onChange: function (event) {
props.setAttributes({
ctitle: event
});
},
}
),
);
},
save: function (props) {
return el(
'div',
{
className: props.className
},
el(
RichText.Content,
{
tagName: 'p',
className: 'my-gutenberg-title',
value: props.attributes.ctitle
}
)
);
},
});
}(
window.wp.blocks,
window.wp.element
));
変更点は以下の通り
コンポーネントの追加
サイドパネルの設定に必要なコンポーネントを追加
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextareaControl = wp.components.TextareaControl;attributesの追加
設定した値を保存する変数を追加。
前項まででctitleという変数を設定しており、本項にてmyTextという変数を追加。前項まで使用していたcontentは面倒なのでここでは削った。
attributes: {
ctitle: {
default: 'タイトル',
},
myText: {
default: ''
}
},editへの設定パネル定義の追加
editに設定パネルを表示する記述を追加。
ブロックに表示するhtmlの記述のためのエレメントと並列して表記するが、こっちはちゃんとサイドバーに表示される。
el(
InspectorControls,
{key: 'controls' },
el(
PanelBody,
{
title: 'panel test',
initialOpen: true,
children: el(
TextareaControl,
{
label: 'Text',
hideLabelFromVision: true,
help: 'Enter some text',
value: props.attributes.myText,
onChange: function (event) {
props.setAttributes({
myText: event
});
}
}
)
},
),
),
設定パネルとその中身の記述はコンポーネント化されていて、仕様に基づいて記述する。
まずInspectorControlsエレメントを設定して、その中身としてPanelBodyコンポーネントを入れ子エレメントの形で設定する。
PanelBodyのtitleに設定した内容がパネルのタイトルとして表示され、開閉トグルのクリックエリアとしても機能する。
設定パネルの本体はPanelBodyのchildrenに記述する。今回は例としてテキストエリアを設定するものとして、TextaeraControlコンポーネントを使用。TextaeraControlコンポーネントのvalueをprops.attributes.myTextと紐付け、onChangeでアップデートするように記述する。
設定パネルの追加、表示と設定項目の保存については以上。