Gutenberg RichTextを使う

こんにちは。ましじめの田村です。

GutenbergでRichTextの使いそうなところを見て行きたいと思います。

マニュアルはこちら。
RichText Reference

基本はこちら

import { RichText } from '@wordpress/block-editor';

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

const { title } = attributes;

edit :
<RichText
tagName="h2"
value={title}
onChange={nextTitle => {
  setAttributes({title: nextTitle,});
}}
/>

save: 
<RichText.Content
tagName="h2"
value={title}
/>

tagName

タグ要素を指定、インライン要素を指定できない

tagName="h2"

multiline

改行時に挿入されるタグ、デフォルトはbr

multiline== "li"

wrapperClassName

親のクラス名

wrapperClassName== "wrapper"

className

クラス名

className== "classname"

formattingControls

ボールド、イタリックなどのテキストフォーマットの表示を制御

formattingControls={[]}

以上「Gutenberg RichTextを使う」でした。
他にも使うものがあったら追記していきたいと思います。

RichTextを使う場合参考にしてみてください。

---