Gutenberg でブロックを作る際に登場する attribute とは、一言で言うとブロック内で保持される『データ』のことです。段落ブロックであれば段落内の文章、画像ブロックであれば画像のURLやリンク先URLなどをさします。
そしてブロックを開発する際に attributes オブジェクトと言うものを作る必要があります。名前からも分かる通り上述の attribute に関連するものです。これは一体なんでしょうか？ この記事では attributes オブジェクトについて見ていきたいと思います。
まず知っておかなくてはならないのは、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 -->
これを Gutenberg エディタで開いた場面を想像してください。この画面では保存されたHTMLがブロックとして表示される必要があります。これはHTMLをそのまま表示すればいいというわけではありません。閲覧者がブラウザで表示するのとは違い、投稿者として修正できる状態でなければならないからです。
エディタ画面でのブロックの出力は edit 関数が担っています。であれば保存されたHTMLをそのまま edit 関数に渡せば修正可能なブロックを出力してくれるかというと、そうはいきません。edit 関数はデータを加工してブロックを出力するという処理のみ行うからです。
ここでいうデータとは、上の例でいう画像のURLや、画像をクリックした時のリンク先URLなどことです。
つまり edit 関数を呼び出すには、HTMLからそういったデータを抽出するという処理を行う必要があります。この抽出処理に必要になるのが attributes オブジェクトです。
以下は画像ブロックの attributes の中の、画像URLについての部分です。
url: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
},
type は抽出データのデータ型、source はデータの抽出場所の分類、selector と attribute はデータの抽出場所を示しています。つまり言い換えると、「データは属性値から取得する。取得場所は <img> の src 属性で、string 型として取得し、urlと言う attribute に格納する」ということになります。
このように attributes オブジェクトは、データ（attribute）の取得方法を定義するためのオブジェクトです。Gutenberg のブロックを動かす上でとても重要な役割を持っています。
