Gutenberg(ブロックエディタ)メモ -ハンドブックでわからないところ2

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

WordPressのGutenbergに関しての「わからないところ1」に引き続き、2です。

詳細は1の方を確認してください。

都度場当たり的に書いているので、1を含めて内容や順番は今後変える可能性があります。

attributes

attributesに関して。

個人的な理解として「attributesに値を保存できればあとは楽」というのがありまして、editとsaveの両方で同じ変数名と値をやり取りできるというイメージです。

逆に、attributesにいれられない場合は難度が跳ね上がるように感じました。実際にはその状態に応じた手法が用意されていると思うのですが、その方法がわからない場合はかなり厳しいです。

children


{
    content: {
        source: 'children',
        selector: 'p'
    }
}
// {
//   "content": [
//     "Vestibulum eu ",
//     { "type": "strong", "children": "tortor" },
//     " vel urna."
//   ]
// }

上記はハンドブックのchildrenのサンプルコードですが、初見でコメントアウト部分の説明用サンプル自体がよくわかりませんでした。
ここは以下ように元の分がわかると理解しやすいかもしれません。


<p>Vestibulum eu <strong>tortor</srong> vel urna.</p>

上記をattributesに記述したcontentのchildrenのpで取得すると、サンプルのように以下状態でカンマ区切りの3分割になるという流れだと思います(実際にカンマ区切りで扱われているのかはしらべきれていません)。

  1. 空白を含むpタグ内のテキスト(“Vestibulum eu “)
  2. strongタグに囲まれた部分({ “type”: “strong”, “children”: “tortor” })
  3. 空白を含むpタグ内のテキスト(” vel urna.”)

sourceとseletor

上記URLで説明されています。

あまり訳に自信が無いので記載できませんが、sourceはその有無で動作が変わるので、基本的な動きをさせたい場合はsourceを記載した方がよいです。
serectorも同様です。

withState

あくまで個人的な見解ではありますが、以下のwithStateとは以下のようなものではと考えています。

  • withStateは、投稿画面内で何かを操作する際に使われる
  • withStateの値は保存する必要がない(カスタムHTMLのプレビュー切替のような用途)

上記の認識が正ければ、RadioControlやToggleControlのサンプルコードにwithStateが含まれている時点で、それらの状態を保存するための用途で書かれたサンプルではないと考えられます。

つまり、RadioControlの値をsaveに渡して出力内容を変える、という用途を想定していないコードになります。

であるなら、「ToggleControlにはwithStateが必須だ」とは考えずに、ここから一工夫で値を利用できるようにしたり、withStateが不要な作り方に変えるということで良いのかもしれません。

Templates

テンプレートとは、エディタの入力欄にひな形的にブロックを設定できる機能です。

エディタはビジュアルとコードエディタのどちらも対象として有効ですので、その点は問題ありません。

詳細は以下のページに記載しています。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄