カスタムブロック作成 RichTextコンポーネント

Text Controlを使用するデメリット

• フロントエンドとエディターのセレクタが異なる
  • フロントエンド：<p>
  • エディター：<input>
• ブロックツールバーの装飾が使用不可

RichTextを使用するメリット

• 編集画面、表示画面での一貫したスタイリング
  • エディターとフロントエンドのマークアップが一致する。
  • 任意のタグが使用可能
• 他とマッチするプレースホルダーテキスト
• フォーマットオプションの制御
  • インライン装飾機能が使用可

RichTextコンポーネントを使用する

edit.jsを編集

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

export default function Edit({ attributes, setAttributes }) {
	const { message } = attributes;
	const blockProps = useBlockProps();

	return (
		<div {...blockProps}>
			{/* RichText に変更 */}
			<RichText
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
		</div>
	);
}

エディター側のタグを変更

さらにedit.jsを編集し、エディター側のマークアップをフロントエンドに近づける。

• エディター：　div > div > p
• フロントエンド：p

	return (
		<div {...useBlockProps()}>
			{/* RichText に変更 */}
			<RichText
				// フロントエンド側のタグを変更
				tagName="p"
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
		</div>
	);

エディター側のルートの<div>除去

	return (
		<RichText
			// RichText内に{...useBlockProps()}を渡す
			{...useBlockProps()}
			tagName="p"
			value={message}
			onChange={(value) => {
				setAttributes({ message: value });
			}}
		/>
	);

HTMLタグのエスケープを回避

save関数がエスケープしているため、エディターで太字にすると、フロントエンドではタグがぞのまま表示される。
Hello ＜strong＞Gutrnberg!＜/strong＞

save.jsを編集

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

export default function save({ attributes }) {
	const { message } = attributes;

	// return <p {...useBlockProps.save()}>{message}</p>;
	return (
		// 大文字始まりの.Contentを追加
		<RichText.Content
			// .saveを追加
			{...useBlockProps.save()}
			tagName="p"
			value={message}
			// save関数はマークアップを定義するのみのため、onChangeの使用機会はない
			// onChange={(value) => {
			// 	setAttributes({ message: value });
			// }}
		/>
	);
}

block.jsonを編集

htmlタグを認識させるため、block.jsonを確認する。

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

修正する。

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

さらに修正する。

	"attributes": {
		"message": {
			"type": "string",
			"default": "Hello WordPress!",
			"source": "html",
			"selector": "p"
		}
	},

プレースホルダーを表示

edit.js

	return (
		<RichText
			{...useBlockProps()}
			tagName="p"
			placeholder="Enter text..."
			value={message}
			onChange={(value) => {
				setAttributes({ message: value });
			}}
		/>
	);

インライン装飾の私用を制限

edit.js

allowedFormatsに空の配列を渡すとインライン装飾が使用できなくなる。

	return (
		<RichText
			{...useBlockProps()}
			tagName="p"
			allowedFormats={[]}
			placeholder="Enter text..."
			value={message}
			onChange={(value) => {
				setAttributes({ message: value });
			}}
		/>
	);

太字・斜体のみ許可

	return (
		<RichText
			{...useBlockProps()}
			tagName="p"
			allowedFormats={["core/bold", "core/italic"]}
			placeholder="Enter text..."
			value={message}
			onChange={(value) => {
				setAttributes({ message: value });
			}}
		/>
	);

参考

• RichText リファレンス
  https://ja.wordpress.org/team/handbook/block-editor/reference-guides/richtext/
• packages/block-editor/src/components/rich-text/README.md
  https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
• 書式ツールバー API
  https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/format-api/