RichText Reference

プロパティ参照

RichTextコンポーネントに渡す可能なプロパティのリストについては、GitHubのコンポーネントドキュメントを確認してください。

RichTextコンポーネントを使用したコアブロック

RichTextコンポーネントを使用したコアブロックがいくつかあります。各ブロックにリンクされたJavaScript編集機能は、自分のブロックを作成する際のベストプラクティスの参照として使用できます。

• ボタン: RichTextはボタンのテキストを入力するために使用されます。
• 見出し: RichTextは見出しのテキストを入力するために使用されます。
• 引用: RichTextは引用文と引用元のテキストの両方に使用されます。
• 検索: RichTextは検索フィールドの上のラベルと送信ボタンのテキストの両方に使用されます。
  

例

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" // The tag here is the element output and editable in the admin
   value={ attributes.content } // Any existing content, either from the database or an attribute default
   allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow other formatting options
   onChange={ ( content ) => setAttributes( { content } ) } // Store updated content as a block attribute
   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 } />; // Saves <h2>Content added in the editor...</h2> to the database for frontend display
   }
} );

一般的な問題と解決策

RichTextコンポーネントを使用していると、いくつかの一般的な問題が発生することがあります。

HTMLフォーマットタグがコンテンツに表示される

テキストフォーマットのHTMLタグ（<strong>や<em>など）がエスケープされてサイトのフロントエンドに表示される場合、これは保存機能に問題がある可能性があります。保存機能内で、<h2>{ heading }</h2>で値を単に出力するのではなく、<RichText.Content tagName="h2" value={ heading } />（JSX）のようにコードが見えることを確認してください。

不要なフォーマットオプションがまだ表示される

先に進む前に、RichTextコンポーネントを使用することが本当に意味があるかどうかを考えてください。基本的なinputやtextarea要素を使用する方が良いでしょうか？フォーマットが可能であるべきではないと思う場合、これらのHTMLタグの方が理にかなっているかもしれません。

RichTextを使用したい場合は、withoutInteractiveFormattingプロパティを指定することで、すべてのフォーマットオプションを排除できます。

許可されるフォーマットを制限したい場合は、コード内でallowedFormatsプロパティを指定できます。詳細については、上記の例やコンポーネントドキュメントを参照してください。

エディタで特定のフォーマットタイプを無効にする

RichTextコンポーネントは、段落ブロック内の画像などのインライン要素を表示するためにフォーマットを使用します。エディタからフォーマットを無効にしたいだけの場合は、unregisterFormatType関数を使用できます。たとえば、インライン画像を無効にするには、次のようにします：

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

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