カスタムHTMLブロック内で要素や属性が消える対策

WordPressのブロックエディタ上のカスタムHTMLブロックに入力した一部のHTMLタグや属性が、投稿を保存するタイミングで消えてしまうことがありました。この記事ではその原因と対策を解説します。

1 タグや属性が消える原因
2 解決方法

タグや属性が消える原因

WordPressがデフォルトで備えている「kses」というライブラリによって、「特権管理者」以外のユーザーが入力したHTMLタグや属性の一部がセキュリティ対策として消去してしまうのが原因です。

開発者は普段から特権管理者で作業することが多いので、下位権限のユーザーがポストした投稿が崩れているのを見るまで、この現象に遭遇しないと思います。私も初見では何が起きてるのかわかりませんでした。

解決方法

この現象は、wp_kses_allowed_htmlのフィルターフックをカスタマイズすることで解決できます。

たとえば、

・divタグのstyle属性
・sourceタグのsrcset属性
・pictureタグ

の3つを消えないようにしたければ以下のようなコードをfunctions.phpに追加します。

function set_wp_kses_allowed_html($tags, $context)
{
  if ($context === 'post') {
    $tags['div']['style'] = true;
    $tags['source']['srcset'] = true;
    $tags['picture'] = true;
  }
  return $tags;
}
add_filter('wp_kses_allowed_html', 'set_wp_kses_allowed_html', 10, 2);

このような記述を消去されたくないタグや属性に対して追記していくだけです。