vektor-inc / vk-all-in-one-expansion-unit

wordpress plugin of powerful support
https://ja.wordpress.org/plugins/vk-all-in-one-expansion-unit/
GNU General Public License v2.0
7 stars 1 forks source link

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

Closed mtdkei closed 3 months ago

mtdkei commented 4 months ago

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

1088

どういう変更をしたか?

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

ソースコードについて

デザイン・UI

プログラムの変更の場合

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

その他

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

個別の投稿、固定ページ

  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 )

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

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

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

- [x] このテンプレートのチェック項目をちゃんと確認してチェックしたか?

---

## レビュワー向け

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

* プルしたか?
* ビルドしたか?
* ビルドしたディレクトリは正しいか(別の開発環境のディレクトリを見ていないか)?
* npm install したか?
* composer install したか?
sysbird commented 4 months ago

@mtdkei 確認しています

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

mtdkei commented 4 months ago

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

mtdkei commented 4 months ago

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

sysbird commented 4 months ago

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

kurudrive commented 3 months ago

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

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

mtdkei commented 3 months ago

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