飴屋

Gutenberg/日記005

Attributesについて

ちゃんと調べないでなぁなぁのままのままできてしまった部分を少し補完していこうと思います。Gutenbergのブロックで入力された値を扱うにあたって attributes というプロパティを設けましたが、あれの正体がちゃんとわかっていなかったのですが、いくつかブロックを実装していく中で少し見えてきた気がします。

attributes: {
content: {
source: 'children',
selector: 'p'
}
},

リッチテキストの入力欄を設けたとき↑上記のようなcontentというアトリビュートを設けました。これは実装の参考にしたサイトを見よう見まねでやってみただけで、なんとなくchildrenからpタグを取得するのだろうなと理解しただけでした。childrenって何だよって話です。ちなみにアトリビュートは自分の感覚だと日本語で「属性」なので、content属性って呼ぶのでいいのでしょうか？HTMLのタグの中の「hoge="fuga"」の部分もattributeですね。今どきは何て呼称するんでしょう？

RichTextコンポーネントの中身を見たことがないので、このコンポーネントはsourceに「children」と指定すると中身を渡してくれるのだろうなと勝手に考えていたのですが、後々この考えを改めることになりました。RichTextはあくまでも編集用のUIコンポーネントであって、編集されたデータの実体と切り離して考えるのがよさそうです。

<!-- wp:ameya/hoge-->
<section id="hoge" class="wp-block-ameya-hoge">
<div class="fuga">
<p>RichTextで編集した内容。</p>
</div>
</section>
<!-- /wp:ameya/hoge-->

Wordpressの記事編集画面で Ctrl+Shift+Alt+M キーを押してコードエディタを呼び出すと、ブロックがどのように記録されているか見ることができますが、RichTextで編集されたpタグは本当にpタグとして記録されているだけで、RichTextが何をどうしたというようなことはコードには記載されていません。どうもattributesの設定値はこの該当ブロックのコードに対して意味を持っているようです。では改めて、content属性の「source: 'children'」が何を指しているか考えてみます。これはどうも node.childnodes のことのようです。jQuery風なら$(node).children() かな。selectorで指定された要素の子ノードが属性値としての保存対象であることを明示しているということになります。

<RichText.Content tagName="p" value={ props.attributes.content } />

saveメソッドではRichText.Contentというコンポーネントが登場しましたが、これは「tagNameで指定されたタグの中に、先ほどcontent属性に格納した子ノード(value)を入れて出力する」役割を持ったものなのですね。

ではsourceに指定できる他の値にはどんなものがあるのでしょう？

  • children
  • text
  • html
  • attribute
  • meta
  • query

ザっと見かけたのはこんな感じでした。最近、脱jQueryな案件も多いですが、jQuery風に書いてみます。childrenはさっきの通り。

// content:{selector:'p',source:'children'}
content = $(block).find(selector).children()

textとhtmlもjQuery風に書くとそのまんまです。

// content:{selector:'p',source:'text'}
content = $(block).find(selector).text();

// content:{selector:'p',source:'html'}
content = $(block).find(selector).html();

attributeは属性名も一緒に設定します。

// content:{selector:'img',source:'attribute',attribute:'src'}
content = $(block).find(selector).attr(attribute);

metaはちょっと特殊で、WordpressのGutenbergでは投稿記事のmeta情報を取得できます。詳細は省きますが、カスタムフィールドとの合わせ技に使えますね。

queryは保存対象を複雑に指定したいときに使うもののようです。例えば、imgタグのsrc属性とalt属性をペアで取得する場合は以下の感じだそうです。

content:{
source: 'query'
selector: 'img',
query: {
src: { source: 'attribute', attribute: 'src' },
alt: { source: 'attribute', attribute: 'alt' },
}
}

typeも指定できる

source, selectorの他にtypeという指定もできるようです。

  • string
  • number
  • array

よくみかけたのは↑この辺です。属性値の種別(type)を指定するもののようですね。arrayは複数の値を配列にして取得するものでしょうか。selectorで指定した条件に複数のタグが該当した場合に、複数の値を取得できるのでしょう。通常はテキスト情報を扱うことが多いので、string（文字列）を利用することになるのでしょうが、入力された数値を計算に使いたいときなどはnumber（数値）を指定するのでしょう。

日記一覧