ワードプレス公式チュートリアルでブロックを作成③【テキスト入力機能をつける】
『ブロックを自作したい』
『ブロックをカスタマイズしたい』
そう考えてワードプレス公式ページのブロック作成チュートリアルに取り組んでみたけれども、わかりにくくて途中で挫折した。
そんなあなたに向けて贈る記事の第三弾です。公式サイトのチュートリアルを参考にして記事第二弾で作成したブロックの雛形をベースにしてカスタマイズしていきます。
カスタマイズ後のブロックでは、以下のようにテキストの入力欄が配置されます。

『ワードプレス公式チュートリアルでブロックを作成』の過去2回の記事は以下の通りです。
記事①
記事②
テキスト入力欄の配置の手順概要
記事②で作成したブロック雛形では設定されたテキストが表示されるだけでしたが、テキスト入力できるブロックにカスタマイズしていきます。
手順概要は以下の通りです。
- block.jsonにattibutesを追加する
- edit.jsにTextControlコンポーネントを導入する
- save.jsを入力したテキストを出力するように書き換える
①block.jsonにattributesを追加する
attributesというのはブロックの属性です。ブロックに保存されるデータの情報と理解しておくとよいでしょう。
記事②で作成済の雛形のようにあらかじめ決められたテキストを表示するブロックと違って、今回作成するブロックのようにユーザーが入力した情報を保存・表示するためにはblock.jsonにattrbutesが必要となります。
block.jsonに以下の記述を追加します。
"attributes": {
"message": {
"type": "string",
"source": "text",
"selector": "div",
"default": ""
}
},
変更前
{
"$schema": "https://json.schemastore.org/block.json",
"apiVersion": 2,
"name": "create-block/gutenpride",
"version": "0.1.0",
"title": "Gutenpride",
"category": "widgets",
"icon": "smiley",
"description": "Example block written with ESNext standard and JSX support – build step required.",
"supports": {
"html": false
},
"textdomain": "gutenpride",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
}
変更後
{
"$schema": "https://json.schemastore.org/block.json",
"apiVersion": 2,
"name": "create-block/gutenpride",
"version": "0.1.0",
"title": "Gutenpride",
"category": "widgets",
"icon": "smiley",
"description": "Example block written with ESNext standard and JSX support – build step required.",
"supports": {
"html": false
},
"textdomain": "gutenpride",
"attributes": {
"message": {
"type": "string",
"source": "text",
"selector": "div",
"default": ""
}
},
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
}
このようにattributesを記述することでブロックのロード時に、divタグ内のtext 部分を取り出し、コンテンツとして attributes.message
変数に保存します。
- コンテンツを保存した場所であるselectorを探す
("selector": “div" と記述したので今回はdivタグを探す) - そのselector内のsourceからコンテンツを取り出す
("source": “text" と記述したので、divタグを含まず内部のテキストのみ取り出す) - 取り出したコンテンツがtypeで指定した型どおりであることを照合
("type": “string" としたので、文字列であること) - コンテンツをオブジェクトattributes.messageに保存
attributesをedit.jsやsave.jsの関数で引数として渡してやることで、attributesで指定した情報にしたがってedit.jsおよびsave.jsを実行していきます。
②edit.jsの変更(TextControlの導入)
テキスト入力ができるように以下の変更をします。
- TextControlコンポーネントをimport
- Edit関数の引数を { attributes, setAttributes } とする
- return( )内を<div>に囲まれた<TextControl>タグとする
TextControlコンポーネントを導入することで、ブロック内でテキスト(一行だけのショートメッセージ)の入力が可能となります。
引数にはattributesだけでなくsetAttributesメソッドも渡します。setAttributesメソッドで属性を更新することができます。
setAttributes({ 更新したいattributesのキー: 新しい値, … });
block.jsonのattributesで指定した"selector": “div" どおり、ブロック全体をdivタグで囲っておきます。divタグ内には"apiVersion": 2 では必須となる {…useBlockProps( )} を記述しておきます(記事②参照)。
変更前
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit() {
return (
<p {...useBlockProps()}>
{__('Gutenpride – hello from the editor!', 'gutenpride')}
</p>
);
}
変更後
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';
import './editor.scss';
export default function Edit({ attributes, setAttributes }) {
return (
<div { ...useBlockProps() }>
<TextControl
label={ __( 'Message', 'gutenpride' ) }
value={ attributes.message }
onChange={ ( val ) => setAttributes( { message: val } ) }
/>
</div>
);
}
TextControlによるattributes更新のしくみ
TextControlのようなコンポーネントは HTML タグと同じように記述します。
TextControlタグの属性としてvalue
とonChange関数を記述します。valueに attributes.message
をセットし、onChange
関数に setAttributes
を使用して message 属性の値を更新することができます。
<TextControl
value={ attributes.message }
onChange={ ( val ) =>
setAttributes( { message: val } )
}
/>
③save.jsの変更
- Edit関数の引数を { attributes } とする
- return( )内を<div>に囲まれた{ attributes.message } とする
save.jsではedit.jsと違ってattributesの更新をすることはないのでsetAttributesは必要ありません。出力部となるreturn( )内に、コンテンツが保存されたattributes.messageオブジェクトを記述するだけでOKです。
変更前
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save() {
return (
<p {...useBlockProps.save()}>
{__('Gutenpride – hello from the saved content!', 'gutenpride')}
</p>
);
}
変更後
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save({ attributes }) {
return (
<div { ...useBlockProps.save() }>
{ attributes.message }
</div>
);
}
ブロックの表示
以上の変更後ビルドを実施してブロックを表示すると以下の通りとなります。
ブロックエディター側
テキスト入力欄が出来上がります。

テキスト入力欄の上に"message"と記述されるのは、edit.jsのTextControlで指定したLabel通りの表示です。
試しにテキストを入力して更新しておきましょう。更新するとsave.jsで記述したように情報がデータベースに登録されます。

web表示側
web表示させると入力したテキストが表示されます。

CSSを変更してみる
試しにCSSを変更してフォントサイズを変更してみます。
style.scssに次の記述を追記します。
.wp-block-create-block-gutenpride {
font-size: 64px;
}
ビルドしてブロックを表示すると次の通りです。

まとめ
私自身Reactにはなじみがないため、JSX形式のコードの書き方にとまどうところもありましたが、公式チュートリアルと関連ページを見ながら私なりに解説を加えてみました。