Gutenbergのカスタムブロック作成でimgを使う際にハマった件
コアな部分には詳しくないので何とも原因がよく分からないんですが、CTA用の簡単なブロック追加をしている時に少しハマった話です。
問題となったのが、JSXで書いてある次の２種類のコードです。
<img className="cta-img" alt={ title } src={ mediaSrc } /><img className="cta-img" src={ mediaSrc } alt={ title } />両方同じようにimgを使って同じプロパティを使用し、それぞれのプロパティに同じ値を与えているのですが、これを保存してページをリフレッシュすると、前者で問題が発生するというものです。
訂正： 別の環境で試したら上記の後者でも同様にフィルターされてしまいましたので、結局CTAはイメージブロックを採用してInnerBlocksを使用することに。。。
Image用のコンポーネントではなく、自分でimgを使ったコンポーネントを作成する時に起こったものです。
問題となったのは、ブロックを保存するメソッド「save」内での現象で、ワードプレスのフィルターフックによるものだと思われるのですが、「figure」タグが保存する値に自動挿入されてしまいますので、AJAXによる非同期保存を行なっている段階ではブロックのエラーが確認できないのですが、ページをリフレッシュするとフィルターを加えて保存された値を元に再生されますから、そこでブロックで予想される値と異なるということで、エラーが生じてしまうんです。
原因が分からなくて以前に作成したチャットブロックを見直してみると、属性「src」と属性「alt」の書く順番がCTA用のブロックとは異なっていたので、エラーの起こっていないチャットブロックに合わせて（冒頭の例の後者のように）順番を変更するとエラーが起こらなくなりました。
ちなみにfigureタグを自分で入れたら重複させられました。
納得はいっていませんので、また時間がある時にでも調べます。
コアのコードを見たわけじゃありませんが、保存する時にフィルターを掛けてタグを自動挿入されているので、クラシックエディタ用のフィルターが働いてしまっているのかもしれません。
クラス「wp-block-image」とかの特定のラッパーで囲っていないと自動的にフィルターがかかるのかもしれませんが、後者のような順でプロパティを書いたら大丈夫でしたしね。
探したら例外適用するコードとかあったのかもしれませんし、知っている方がいらっしゃったら教えて欲しいです。
そういえば、RawHTMLはまだ試していませんでした。
