Gutenberg RichTextを使う

以前のブログはこちら

広告

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

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

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

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を使う場合参考にしてみてください。


関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから