ブロックの追加自体は前項を参照。
上記で設定したブロックを編集可能となるよう書き直す。
block.js
block.jsを以下のように変更。
サイトにより書いてある内容も異なるので、最低限動作した内容のみに抜粋。ネットの知見によればもっと色々と細かく記述があるので、理解でき次第さかのぼって加筆のこと。
(function (blocks, element) {
var el = element.createElement;
var RichText = wp.editor.RichText;
blocks.registerBlockType('my-gutenberg/my-sample00', {
title: 'My Gutenberg Sample',
icon: 'format-aside',
category: 'layout',
attributes: {
ctitle: {
default: 'タイトル',
},
content: {
default: 'コンテンツテキスト',
},
},
edit: function (props) {
return el(
'div', {
className: props.className
},
el(
RichText,
{
tagName: 'p',
value: props.attributes.ctitle,
onChange: function (event) {
props.setAttributes({
ctitle: event
});
},
}
),
el(
RichText,
{
tagName: 'p',
value: props.attributes.content,
onChange: function (event) {
props.setAttributes({
content: event
});
},
}
)
);
},
save: function (props) {
return el(
'div',
{
className: props.className
},
el(
'p',
{
class: 'my-gutenberg-title'
},
props.attributes.ctitle
),
el(
'p',
{},
props.attributes.content
),
);
},
});
}(
window.wp.blocks,
window.wp.element
));以下、変更点を抜粋して説明
attributes
attributesとして保存する値を指定する。今回はctitle,contentという変数を指定。ここで指定した変数はprops.attributes.xxxという形で扱う
attributes: {
ctitle: {
default: 'タイトル',
},
content: {
default: 'コンテンツテキスト',
},
},edit
固定値（前項で’テスト’）を設定していた部分をelとして動的に表示するように変更。
tagName(=使用するHTMLタグ）にpタグを指定、value（=表示する値）にprops.attributes.ctitleを指定。onChangeで値の変更に応じてctitleの中身を入力内容に書き換えるように指定。
el(
RichText,
{
tagName: 'p',
value: props.attributes.ctitle,
onChange: function (event) {
props.setAttributes({
ctitle: event
});
},
}
),contentについても同様に指定する
el(
RichText,
{
tagName: 'p',
value: props.attributes.content,
onChange: function (event) {
props.setAttributes({
content: event
});
},
}
)save
こちらの値部分についても固定値をelで動的に表示するよう変更
el(
'p',
{
class: 'my-gutenberg-title'
},
props.attributes.ctitle
),
el(
'p',
{},
props.attributes.content
),
2つめのオブジェクトにclassなど指定。必須なので空の場合でも{}などとカッコだけ書く。
値としてprops.attributes.xxxの値を表示するように指定
編集可能ブロックの設定については以上。