WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)

1. はじめに

WordPress の記事編集画面 (Gutenberg) では、いろいろなブロックが用意されていますが、その中の1つである「カスタムHTML」ブロックでの問題点について書きます。

2. カスタムHTMLでの問題点

困った現象というのは、以下の現象です。

1. カスタムHTMLブロック内で、何かしらHTMLタグを書く。
2. そのとき、タグの属性値に HTMLの「数値文字参照」もしくは「文字実体参照」を使う。
3. 一旦、記事を保存して閉じる。
   • データベースには、「数値文字参照」もしくは「文字実体参照」がそのまま保存される。
4. 再度その記事を編集する（編集画面を開く）。
5. 先程の「数値文字参照」もしくは「文字実体参照」を記述した部分が、「参照したい文字」に置き換わって表示される。
6. その状態でもう一度記事を保存すると、データベースには「数値文字参照」もしくは「文字実体参照」ではなく、「参照したい文字」が保存されてしまう。
7. その記事を閲覧する際、意図しないHTMLが出力されてしまう。

具体的な例をあげてみます。

(1) カスタムHTMLに以下を記述します。

<p class="&gt;">Hello!</p>

この記事をプレビューすると、この部分は「Hello!」と表示されます。

(2) この記事を保存して、再度編集を開きます。

すると、先程の カスタムHTML ブロックは以下のように表示されます。

<p class=">">Hello!</p>

(3) 再度保存します。

(4) この記事を閲覧します。

すると、「Hello!」が表示されません。意図しない HTML が出力されたからです。

本来、「Hello!」が出力されるはずだった部分のHTMLには以下が出力されます。

つまり、「>」が「>」になったことで、この部分が「閉じタグ」だと解釈されてしまいました。

3. どんな時に困るのか？

実際、HTMLの属性値に 「数値文字参照」もしくは「文字実体参照」が必要になるような文字を入力するようなことはなかなかないと思いますが、例えば <a> タグの href 属性に JavaScript コードを記述する場合に困ります。アロー関数「() => { ... }」を書こうとして、「>」の部分を「>」と書いた場合に、今回の問題が発生します。if の条件で大小関係を書く場合も同様です。あと、title 属性で > などを使いたい場合も困ります。

<a href="javascript:(()=>{let a = 2; if (a > 1) alert(1);})()">Test</a>

4. 未解決

今のところ、未解決です。

何か解決策がありましたら教えて頂きたいです。