ローカル環境作成したカスタムブロックの雛形はテキストの編集ができません。入力と保存に対応した段落ブロックとしてカスタマイズしてみましょう。

block.jsonを編集

attributes入力値を保存する

ユーザーの入力を検知して保管する箱として、attributesを使用できるように、block.jsonでattributesを定義します。attributes プロパティには、ブロックに必要なカスタムデータとデータベースへの保存方法を記述できます。

{
	"attributes": {
		"message": {
			"type": "string",
			"default": "Hello WordPress!",
			"source": "text"
		}
	},
}

これにより、messageと名付けたデータの保管先が確保されました。3点のブロック属性も設定しています。

edit.jsを編集

edit.jsは最初、次のようになっています。

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			{__("My Block – hello from the editor!", "my-block")}
		</p>
	);
}

まず、翻訳対応は行わないため、importと翻訳関数__()を削除します。

import { useBlockProps } from "@wordpress/block-editor";

export default function Edit() {
	return <p {...useBlockProps()}>{"My Block – hello from the editor!"}</p>;
}

エディターにMy Blockブロックを挿入してみますが、デフォルトのテキストが表示され、削除したり編集したりできません。入力を何も受け付けない状態です。

エディターから入力値を受け取る

入力テキストをattributesで受け取れるようにedit.jsを編集します。

import { useBlockProps } from "@wordpress/block-editor";

// 1. Edit関数の引数にattributesを分割代入
export default function Edit({ attributes, setAttributes }) {

	// 2. attributesを { message } に代入
	const { message } = attributes;
	return <p {...useBlockProps()}>{"My Block – hello from the editor!"}</p>;
}

TextControlコンポーネントをインポート

入力値を受け入れられるTextControlコンポーネントをインポートします。

Component Referenceを開き、TextControlを探してリファレンスを確認します。

edit.jsを編集します。

import { useBlockProps } from "@wordpress/block-editor";
// 1. TextControlコンポーネントをインポート
import { TextControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const { message } = attributes;
	return (
		<p {...useBlockProps()}>
			{/* 2. エディター表示コンテンツをTextControlコンポーネントに置換 */}
			<TextControl
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
		</p>
	);
}

ここまでで、エディターのブロックはテキスト編集できるようになっています。テキストの初期値は、block.jsonで”default”に定義した値である「Hello WordPress!」が入ります。

この段階ではテキストを編集して保存し、ブラウザをリロードすると表示が「My Block – hello from the saved content!」にもどってしまいます。またフロントエンド表示も同様です。これは、save.jsを読み込んだためです。

save.jsを編集する

save.jsは次のようになっています。

import { useBlockProps } from "@wordpress/block-editor";

export default function save() {
	return (
		<p {...useBlockProps.save()}>
			{"My Block – hello from the saved content!"}
		</p>
	);
}

edit.jsでattributesに保管した入力値をsave.jsで受け取れるように編集していきます。

import { useBlockProps } from "@wordpress/block-editor";

// 1. save関数の引数にattributesを分割代入
export default function save({ attributes }) {

	// 2. attributesを{ message }に代入
	const { message } = attributes;

	// 3. <p>のコンテンツとして{ message }を表示
	return <p {...useBlockProps.save()}>{message}</p>;
}

エディターの入力テキストを保存できるようになりました。

block.jsonを編集

ブロック作成の仕上げとして、エディターUIから指定を許可するスタイルをblock.jsonに定義します。次の例では、水平方向の設定、背景色、背景色のグラデーションカラー、リンク色、文字色に加え、フォントサイズとmargin、paddingの変更を許可しています。

{
	"supports": {
		"html": false,
		"align": true,
		"color": {
			"background": true,
			"gradients": true,
			"link": true,
			"text": true
		},
		"typography": {
			"fontSize": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"attributes": {
		"message": {
			"type": "string",
			"default": "Hello WordPress!",
			"source": "text"
		}
	},
}

エディターのUIから文字色をピンク、背景色を灰色、paddingを設定してフロントエンドのコードを確認すると、classとインラインスタイルが適用されていることがわかります。

<p 
class="
wp-block-my-blocks-my-block 
has-accent-2-color 
has-accent-4-background-color 
has-text-color has-background has-link-color 
wp-elements-611bd44dd85a6c972b6a0c0d4138e699" 
style="
padding-top:var(--wp--preset--spacing--30);
padding-right:var(--wp--preset--spacing--30);
padding-bottom:var(--wp--preset--spacing--30);
padding-left:var(--wp--preset--spacing--30)">
	Change WordPress!
</p>

コードの確認

edit.jsの初期コード

<!-- wp:my-blocks/my-block -->
<p class="wp-block-my-blocks-my-block">My Block – hello from the saved content!</p>
<!-- /wp:my-blocks/my-block -->

edit.jsにTextControlを有効後

<!-- wp:my-blocks/my-block -->
<p class="wp-block-my-blocks-my-block">Hello WordPress!</p>
<!-- /wp:my-blocks/my-block -->

edit.jsを編集して保存

<!-- wp:my-blocks/my-block -->
<p class="wp-block-my-blocks-my-block">Change WordPress!</p>
<!-- /wp:my-blocks/my-block -->

フロントエンド

<p class="wp-block-my-blocks-my-block">Change WordPress!</p>

カスタムブロックのカスタマイズの基本

カスタムブロック作成時には基本的にblock.jsonとスクリプト、必要であればスタイルを編集します。

• block.json
• edit.js
• save.js
• style.scss

テキストを編集可能なフィールドに変更したい場合は、TextControlコンポーネントを使用しましょう。