Gutenberg RichText コンポーネント和訳

このページは Gutenberg の RichText コンポーネントのリファレンス 2019年11月25日版を和訳したものです。

RichText

リッチで contenteditable な入力欄 をレンダリングし、ユーザがコンテンツをフォーマットすることが可能です。

プロパティ

value: String

必須
編集対象の HTML 文字列。 HTML は整合性がとれている( valid な)必要があります。tagName を指定した場合はその中の HTML が valid な必要があります。

onChange( value: String ): Function

必須
値の変更時に呼び出されます。

tagName: String

デフォルト値: div
編集可能要素のタグ名。インライン表示要素はサポートされません。

placeholder: String

任意
フィールドが空のときのプレースホルダテキスト。input や textarea の同名属性 と似た動作。

keepPlaceholderOnFocus: Boolean

任意
コンテンツが未記入の場合、ブロックを選択・フォーカスしてもプレースホルダ文字を表示し続けるかを指定します。

multiline: Boolean | String

任意
デフォルトでは、Enter で改行が挿入されます。
このプロパティを設定すると、編集可能フィールドが複数の段落を持てるようになり、Enter で新しい段落が生成されます。

onSplit( value: String ): Function

任意
コンテンツが分割可能なときに呼び出されます。value には分割したコンテンツが指定されます。この内容で新しいブロックを生成してリターンします。
これが動作するためには、onReplace も同時に指定する必要があります。

onReplace( blocks: Array ): Function

任意
RichText のインスタンスが指定したブロックで置き換えできるときに呼び出されます。

onMerge( forward: Boolean ): Function

任意
ブロックをマージできるときに呼び出されます。次のブロックとマージできるときは forward が true に、手前のブロックとマージできるときは false になります。

onRemove( forward: Boolean ): Function

任意
ブロックが削除可能なときに呼び出されます。選択箇所が次のブロックに移動できる場合 forward が true に、手前のブロックと移動できる場合は false になります。

allowedFormats: Array

任意
デフォルトでは、登録された全フォーマットが使用できます。この設定により使用可能なフォーマットを微調整できます。例: [ 'core/bold', 'core/link' ]

withoutInteractiveFormatting: Boolean

任意
デフォルトでは、全てのフォーマット操作が表示されます。この設定はコンテンツをインタラクティブにするフォーマット操作を削除するのに使用します。
これは、

isSelected: Boolean

任意
フォーマット操作を表示するため、入力欄の選択状態を表示するかを指定します。デフォルトではブロックを選択したとき、操作部を表示します。

autocompleters: Array<Completer>

任意
デフォルト設定の代わりに、autocompleters が使用するリスト。

preserveWhiteSpace: Boolean

任意
value 内の空白文字を保持するかどうかを指定します。通常、タブ文字、ニューライン文字、スペース文字が一つのスペースにまとめられます。オンにすると、ソフト改行は改行要素ではなく、ニューライン文字として保存されます。

RichText.Content

RichText.Content はブロックの save 関数でリッチテキストのコンテンツを正しく保存するために使います。

使用例

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

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

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

	edit( { className, attributes, setAttributes } ) {
		return (
			<div className={ className }>
				<RichText
					tagName="h2"
					value={ attributes.content }
					onChange={ ( content ) => setAttributes( { content } ) }
				/>
			</div>
		);
	},

	save( { attributes } ) {
		return (
			<div>
				<RichText.Content tagName="h2" value={ attributes.content } />
			</div>
		);
	}
} );

RichTextToolbarButton

フォーマットツールバーの拡張スロット。フォーマットを UI に引き上げるための registerFormatType のコールの edit 関数で使用します。

使用例

import { registerFormatType } from 'wp-rich-text';
import { richTextToolbarButton } from 'wp-editor';

registerFormatType( /* ... */, {
	/* ... */
	edit( { isActive } ) {
		return (
			<RichTextToolbarButton
				icon={ 'editor-code' }
				title={ 'My formatting button' }
				onClick={ /* ... */ }
				isActive={ isActive }
				/>
		);
	},
	/* ... */
} );