リストブロックに対するCSSセレクタ検討

[goutetsuguma]

WP6.2 の環境で確認しました。（自分のローカルやVektor inc のサイトで確認しました） Lightningテーマでは「リストアイコンの色」の項目があるのですが、X-T9に変更したら「リストアイコンの色」が表示されないようでした。なにか設定の問題でしょうか？

一旦issue をたてておきます　

[shimotmk]

@goutetsuguma 現状は色がカラーパレットの値に依存しているのでVK Blocks側の仕様です。 ただ、style_engineやWP_HTML_Tag_Processorが出てきたので独自のカラーパレットにも対応できるかもしれないです。

[goutetsuguma]

@shimotmk 調べていただきありがとうございます🙇‍♂️ VK Blocks側の仕様とのことで承知しました！

[shimotmk]

@kurudrive これ対応しようとしているのですが、リストブロックにvk_list_のクラスを追加するとXT-9の場合ul[class*="vk_"][class*="list"]のCSSが当たってしまうのですが、これはテーマ側の意図的なものですか？ https://github.com/vektor-inc/x-t9/blob/c5b05f5ae49424ce63919e93a70dad95f1aac9af/assets/_scss/_block.scss#L59

ブランチ https://github.com/vektor-inc/vk-blocks-pro/pull/1634 コード

<!-- wp:heading -->
<h2 class="wp-block-heading">vk_list_クラスありUL</h2>
<!-- /wp:heading -->

<!-- wp:list {"backgroundColor":"cyan-bluish-gray","className":"is-style-vk-frown-mark  vk_block-margin-sm\u002d\u002dmargin-top my-additional-list-class","color":"#34319f"} -->
<ul class="is-style-vk-frown-mark vk_block-margin-sm--margin-top my-additional-list-class has-cyan-bluish-gray-background-color has-background"><!-- wp:list-item -->
<li>リスト1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>リスト2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">vk_list_クラスありOL</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"backgroundColor":"cyan-bluish-gray","className":"is-style-vk-frown-mark  vk_block-margin-sm\u002d\u002dmargin-top my-additional-list-class","color":"#34319f"} -->
<ol class="is-style-vk-frown-mark vk_block-margin-sm--margin-top my-additional-list-class has-cyan-bluish-gray-background-color has-background"><!-- wp:list-item -->
<li>リスト1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>リスト2</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">vk_list_クラスなしUL</h2>
<!-- /wp:heading -->

<!-- wp:list {"backgroundColor":"cyan-bluish-gray","className":"is-style-vk-frown-mark vk_block-margin-sm\u002d\u002dmargin-top"} -->
<ul class="is-style-vk-frown-mark vk_block-margin-sm--margin-top has-cyan-bluish-gray-background-color has-background"><!-- wp:list-item -->
<li>リスト1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>リスト2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading">vk_list_クラスなしOL</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true,"backgroundColor":"cyan-bluish-gray","className":"is-style-vk-frown-mark vk_block-margin-sm\u002d\u002dmargin-top"} -->
<ol class="is-style-vk-frown-mark vk_block-margin-sm--margin-top has-cyan-bluish-gray-background-color has-background"><!-- wp:list-item -->
<li>リスト1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>リスト2</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

[kurudrive]

@shimotmk 現状意図的な処理なのですが、先日目次ブロックで干渉したし、今回も干渉するしで "list" をセレクタに含めると干渉しやすいので、x-t9 側でこの指定に対するセレクタ変更します。

[shimotmk]

@kurudrive わかりました。それではVK Blocksはこのまま行こうと思います

[kurudrive]

@shimotmk おや？あ、X-T9だとアイコンの色の選択UI自体が表示されないのね。 このリストアイコンの色の機能は独自実装のカラーパレットに依存するから現状の仕様では X-T9 だとアイコンの色の選択UIも表示されないという事？

[shimotmk]

@kurudrive 現状では指定したカラーパレット以外には対応していないです。 なので、このissuesでX-T9などの独自のカラーパレットに対応しようということです。

そのためにはvk_list_番号クラスが必要でX-T9ではul[class*="vk_"][class*="list"]のCSSが当たることはプラグイン側で対応しないということで行こうということです。

[kurudrive]

@shimotmk 了解でございますー。引き続きよろしくお願いいたします。

[kurudrive]

done