最近、ReactでGutenbergのオリジナルブロックを作っているのですが、ブロックを呼び出した時には正常に動作するのに、一度保存してから編集画面を開き直すとブロックが壊れるという現象が発生しました。

最初、なんで？って思っていたんですが、やっと理由がわかりました。

Gutenbergのオリジナルブロックとは

WordPressではバージョン5.0くらいから、『Gutenberg』というブロックエディタでページの編集ができるようになりました。

バージョン5.0まではビジュアルエディタというMicrosoftのWordみたいな編集方法だったのですが、Gutenbergの登場でもっと自由なレイアウトが可能になりました。

Gutenbergのブロックの開発にはReactが使用されており、Reactを使うことで、オリジナルのブロックが開発できます。

Gutenbergのオリジナルブロックが壊れた理由

Reactによるオリジナルブロックの開発情報はあまり情報がないので、なぜ壊れたのか、いや、逆になぜ最初はうまく動くのに、開き直すと壊れるのかわかりませんでした。

作っていたのは、2枚の画像を比較表示するブロック
左右に画像を2枚配置する構成です。

コードを見返していると、おまじないだと思っていたが、意味がよくわからない部分がありました。
それが以下のコードの部分

attributes: {
    beforeMediaID:  { type: 'number', default: 0 },
    beforeMediaURL: { type: 'string', source: 'attribute', selector: 'img', attribute: 'src', default: '' },
    afterMediaID:   { type: 'number', default: 0 },
    afterMediaURL:  { type: 'string', source: 'attribute', selector: 'img', attribute: 'src', default: '' },
},

attributesはそのブロックで使う変数みたいな物の一覧で、selectorが何をしているのかよく理解していなかった。
このselectorについて詳しく説明している日本語ドキュメントが見つけられなかったので、海外のリファレンスを読んでいると、なんかタグ名以外にもidやclassでも指定が出来るらしい。

そして、ようやく気付いた。

WordPressのGutenbergは編集用データを保持していない。

Gutenbergでは、ブロックエディタで作られたページを編集画面で開く際、ページの内容を解析して、プロパティ値を変数に格納し直していたんだっ！

その変数をブロック内のどの要素から抽出してくるのかを指定するのに、selectorは使われていたということがわかった！

だから、ここのselectorに該当する物がブロック内存在しない場合には、値を格納することが出来ず、saveで出力されるデータが異なるために、エラーを発生させるということのよう