RichText リファレンス

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

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

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

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

プロパティリファレンス プロパティリファレンス

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

Top ↑

RichText コンポーネントを使用するコアのブロック RichText コンポーネントを使用するコアのブロック

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

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

Top ↑

ESNext

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> をデータベースに保存

    }
} );

ES5

wp.blocks.registerBlockType( /* ... */, {
    // ...

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

    edit: function( props ) {
        var blockProps = wp.blockEditor.useBlockProps();

        return wp.element.createElement( wp.blockEditor.RichText, Object.assign( blockProps, {
            tagName: 'h2',  // このタグは要素の出力。編集画面で編集可能
            value: props.attributes.content, // データベースから、または属性デフォルトからの任意の既存コンテンツ
            allowedFormats: [ 'core/bold', 'core/italic' ], // コンテンツは太字、斜体にできるが、他のフォーマットオプションは許可されない
            onChange: function( content ) {
                props.setAttributes( { content: content } ); // 更新したコンテンツはブロック属性として保存
            },
            placeholder: __( 'Heading...' ), // ユーザーに追加された任意のコンテツの前にこのテキストを表示
        } ) );
    },

    save: function( props ) {
        var blockProps = wp.blockEditor.useBlockProps.save();

        return wp.element.createElement( wp.blockEditor.RichText.Content, Object.assign( blockProps, {
            tagName: 'h2', value: props.attributes.content // 表示用に <h2>ユーザーが入力したコンテンツ</h2> をデータベースに保存
        } ) );
    }
} );

Top ↑

よくある問題と解決策 よくある問題と解決策

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

Top ↑

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

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

Top ↑

それでも予期しないフォーマットオプションが表示される それでも予期しないフォーマットオプションが表示される

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

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

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

Top ↑

エディター内で特定のフォーマットを無効化する エディター内で特定のフォーマットを無効化する

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

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

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

原文

最終更新日: