[カスタム CSS] メディアクエリ演算子を保持

[mtdkei]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

#1088

どういう変更をしたか？

個別投稿や固定ページのカスタム CSS 、VK All in One Expansion Unit CSSカスタマイズでメディアクエリで使用する比較演算子の>、<、>=、<=をエスケープしないようにしました。

ソースコードについて

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• 関数名 / 変数名 / クラス名 / 保存値名 はそれだけで内容が想像できるものになっているか？紛らわしい命名になっていないか？
• 関数名 / 変数名 / クラス名 / 保存値名 は既存のコードの命名規則に沿ったものになっているか？

デザイン・UI

• 初見のユーザーが予備知識無しで使っても使いやすいようになっているか？
• 情報意味を考慮した意味グルーピング・余白になっているか？
• アラートの表示など追加した場合は他の同様の表示と同じデザインになっているか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。
書いていない場合は書かない理由を記載してください。

• 書けそうなテストは書いたか？
• 表示要素が仕様通りに表示されない不具合の修正ではない or 表示要素に関する不具合修正の場合テストは書いたか？

その他

• readme.txt に変更内容は書いたか？
• Files changed (変更ファイル)の内容は目視でちゃんと確認したか？
• このチェック項目を機械的にチェックするのではなく本当にちゃんと確認をしたか？
• レビュワーが確認しないでリリースしてしまっても問題ないレベルまでちゃんと作りこみ・確認をしたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

個別の投稿、固定ページ

1. ブロックエディターでテキストを入力。
2. カスタムCSSで以下を追加し「公開」をクリック。

@media (width >= 1000px) {
  p { color: red; }
}

@media (width <= 1000px) {
  p { color: blue; }
}

3. フロントエンドで画面の幅を変えてcolorが変わることを確認。
4. 編集画面に戻り、カスタムCSSで以下に置き換え「更新」をクリック。

@media (width > 1000px) {
  p { color: green; }
}

@media (width < 1000px) {
  p { color: orange; }
}

5 . フロントエンドで画面の幅を変えてcolorが変わることを確認。

VK All in One Expansion Unit CSSカスタマイズ

1. ダッシュボードから [ExUnit] > [カスタマイズCSS] に移動。
2. フォームに以下を追加し「CSSを保存する」をクリック。

@media (width >= 1000px) {
  p { color: red; }
}

@media (width <= 1000px) {
  p { color: blue; }
}

3. フロントエンドで画面の幅を変えてcolorが変わることを確認。
4. カスタマイズCSSに戻り、フォームに以下を置き換え「CSSを保存する」をクリック。

@media (width > 1000px) {
  p { color: green; }
}

@media (width < 1000px) {
  p { color: orange; }
}

5 . フロントエンドで画面の幅を変えてcolorが変わることを確認。

確認URL

（　どこかのデモサイトかテストサーバーにデプロイ済みなどで確認できる場合はそのURL　）

レビュワーの確認方法・確認する内容など

実装者と同じ方法で確認してください。

レビュワーに回す前の確認事項

• このテンプレートのチェック項目をちゃんと確認してチェックしたか？

---

レビュワー向け

確認して変更が反映されていない場合の確認事項

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？

[sysbird]

@mtdkei
確認しています

• 個別の投稿、固定ページの (2) で <= がエスケープされているように見えます
• VK All in One Expansion Unit CSSカスタマイズ は解決されているのを確認しました

※ キャッシュは都度消してます

[mtdkei]

@sysbird
ありがとうございます。ご指摘の点を確認しました。
修正いたします。

[mtdkei]

@sysbird
ただいま修正しました。お手数ですが今一度ご確認をお願いいたします。

[sysbird]

個別の投稿、固定ページでも解決されているのを確認しました
ありがとうございます

[kurudrive]

@mtdkei これは元々実施していたテストなので、入れ替えると今度はいつの間にかこの条件での動作がおかしくなるかもしれないので残したまま追加が望ましいです。

[kurudrive]

@mtdkei ここもイキの上で追加でよろしくお願いいたします (￣人￣)

[kurudrive]

@mtdkei あ、無理言ってたらすみません。

ちなみに、元々のテストで
'correct' => 'div > h1 {color:red;}',
みたいに省略できるスペースもあったりするので、correct の値の中にあるスペースを省いた方がテスト通しやすいとかだったら省けるスペースは省いて結構です (￣人￣)

[mtdkei]

@kurudrive
ご確認ありがとうございます。
空白を取った方がテストを通せたのでそのように変更しました。