RichText リファレンス

開発者は RichText コンポーネントを使用して contenteditable 入力 をレンダーできます。ユーザーはブロックコンテンツを太字、斜体、リンク、その他のオプションでフォーマットできます。

RickText コンポーネントは非常にパワフルで、他のコンポーネントにはない以下の組み込み機能があります。

• 編集画面、表示画面での一貫したスタイリング: 任意のブロックレベル要素、たとえば div、h2、p タグに編集可能なコンテナを設定できます。より簡単に style.css のスタイルをフロントエンドでの表示と編集画面に適用できます。editor.css でリライトする必要はありません。
• 他とマッチするプレースホルダーテキスト: ユーザーがコンテンツを書く前に、ブロックエディターの他の部分とマッチしたスタイルでプレースホルダーテキストを配置できます。
• フォーマットオプションの制御: RichTest フィールドででのフォーマットオプションを許可するか正確に指定できます。たとえばユーザーにテキストの太字、斜体、その両方を許可するかどうかを設定できます。

コンポーネントリファレンス セクション内の他のコンポーネントと異なり RichText は個別に存在します。これはブロックエディター内のみで意味があり、WordPress のその他の領域では意味がないためです。

RickText コンポーネントに渡すことができるプロパティのリストについては GitHub 内のコンポーネントのドキュメントを参照してください。

多くのコアブロックが RickText コンポーネントを使用します。以下のリンク先の各ブロックの JavaScript の edit 関数はベストプラクティスとして、ブロック作成の際の参考になります。

• Button: ボタンテキストの入力で使用します。
• Heading: 見出しテキストの入力で使用します。
• Quote: quotation と citation の２つの引用で使用します。
• Search: 検索フィールドの上のラベルと「検索」ボタンテキストの2か所で使用します。

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			type: 'string',
			source: 'html',
			selector: 'h2',
		},
	},

	edit( { attributes, setAttributes } ) {
		const blockProps = useBlockProps();

		return (
			<RichText
				{ ...blockProps }
				tagName="h2" // このタグは要素の出力。編集画面で編集可能
				value={ attributes.content } // データベースから、または属性デフォルトからの任意の既存コンテンツ
				allowedFormats={ [ 'core/bold', 'core/italic' ] } // コンテンツは太字、斜体にできるが、他のフォーマットオプションは許可されない
				onChange={ ( content ) => setAttributes( { content } ) } // 更新したコンテンツはブロック属性として保存
				placeholder={ __( 'Heading...' ) } // Display this text before any content has been added by the user
			/>
		);
	},

	save( { attributes } ) {
		const blockProps = useBlockProps.save();

		return <RichText.Content { ...blockProps } tagName="h2" value={ attributes.content } />; // フロントエンド表示用に <h2>ユーザーが入力したコンテンツ</h2> をデータベースに保存

	}
} );

RichText コンポーネントを使用すると共通の問題がしばしば発生します。

<strong> や <em> などのテキストフォーマットの HTML タグがエスケープされてサイトのフロントエンド側に表示される場合は恐らく save 関数の問題です。save 関数のコードが <RichText.Content tagName="h2" value={ heading } /> (JSX の場合) のようになっていることを確認してください。単純な出力 <h2>{ heading }</h2> は誤りです。

先に進む前に RichText コンポーネントが本当に必要か考え直してください。基本的な input や textarea 要素を使用したほうが良いかもしれません。フォーマットが一切必要ないならば、これらの HTML タグのほうが良いでしょう。

それでも RichText が使いたければ、withoutInteractiveFormatting プロパティを指定することですべてのフォーマットオプションを削除できます。

利用可能なフォーマットを制限するには、コード内で allowedFormats プロパティを使用して指定してください。サンプルについては上の例、または詳細について コンポーネントのドキュメント を参照してください。

RichText コンポーネントはフォーマットを使用してインライン要素を表示します。例: 段落ブロック内の画像。エディターから単にフォーマットを無効化する場合は、unregisterFormatType 関数を使えます。たとえばインライン画像を無効化するには、

wp.richText.unregisterFormatType( 'core/image' );

適用するには、プラグインやテーマで上のスクリプトをエンキューする必要があります。JavaScript チュートリアルの「WordPress で JavaScript をロードする方法」を参照してください。

原文

最終更新日: 2023年11月18日