attributesってなんだ

Gutenberg でブロックを作る際に登場する attribute とは、一言で言うとブロック内で保持される『データ』のことです。段落ブロックであれば段落内の文章、画像ブロックであれば画像のURLやリンク先URLなどをさします。

そしてブロックを開発する際に attributesattributes オブジェクトと言うものを作る必要があります。名前からも分かる通り上述の attribute に関連するものです。これは一体なんでしょうか？　この記事では attributesattributes オブジェクトについて見ていきたいと思います。

まず知っておかなくてはならないのは、Gutenberg のブロックは最終的にはHTMLとして保存されるということです。当たり前といえば当たり前ですが、これはとても重要です。例えば以下は画像ブロックの例です。

<!-- wp:image -->
<figure class="wp-block-image">
  <a href="https://hysryt.com/linkurl">
    <img src="https://hysryt.com/ebi.jpg" alt=""/>
  </a>
</figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image">
  <a href="https://hysryt.com/linkurl">
    <img src="https://hysryt.com/ebi.jpg" alt=""/>
  </a>
</figure>
<!-- /wp:image -->

これを Gutenberg エディタで開いた場面を想像してください。この画面では保存されたHTMLがブロックとして表示される必要があります。これはHTMLをそのまま表示すればいいというわけではありません。閲覧者がブラウザで表示するのとは違い、投稿者として修正できる状態でなければならないからです。

エディタ画面でのブロックの出力は editedit 関数が担っています。であれば保存されたHTMLをそのまま editedit 関数に渡せば修正可能なブロックを出力してくれるかというと、そうはいきません。editedit 関数はデータを加工してブロックを出力するという処理のみ行うからです。

ここでいうデータとは、上の例でいう画像のURLや、画像をクリックした時のリンク先URLなどことです。

つまり editedit 関数を呼び出すには、HTMLからそういったデータを抽出するという処理を行う必要があります。この抽出処理に必要になるのが attributesattributes オブジェクトです。

以下は画像ブロックの attributesattributes の中の、画像URLについての部分です。

url: {
  type: 'string',
  source: 'attribute',
  selector: 'img',
  attribute: 'src',
},

url: {
  type: 'string',
  source: 'attribute',
  selector: 'img',
  attribute: 'src',
},

typetype は抽出データのデータ型、sourcesource はデータの抽出場所の分類、selectorselector と attributeattribute はデータの抽出場所を示しています。つまり言い換えると、「データは属性値から取得する。取得場所は <img><img> の srcsrc 属性で、stringstring 型として取得し、urlurlと言う attribute に格納する」ということになります。

このように attributesattributes オブジェクトは、データ（attribute）の取得方法を定義するためのオブジェクトです。Gutenberg のブロックを動かす上でとても重要な役割を持っています。