[ CSS微修正 ] グループの横並び要素にスタイルが誤って適用される問題を修正

[mtdkei]

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

https://vws.vektor-inc.co.jp/forums/topic/%e3%82%ab%e3%83%95%e3%82%a7%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e8%a1%a8_%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3

どういう変更をしたか？

横並び要素（is-layout-flex）を持つブロックには指定のマージンを適用しないように、スタイルを調整しました。
微修正なので1人で大丈夫かと思います。

スクリーンショットまたは動画

変更前 Before

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

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

• 書けそうなテストは書いたか？
  CSSのみなのでスキップ

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

以下のCSSを編集画面にコピペし、p(ブレンドコーヒー)、ul(aaaなどliをブロック)、ol(あああliをブロック)、dl( dl > dt などを囲うブロック)の下に余白がつかないことを確認しました。

<!-- wp:group {"metadata":{"name":"タイトル"},"style":{"spacing":{"blockGap":"10px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" id="drink"><!-- wp:vk-blocks/icon {"faIcon":"\u003ci class=\u0022fa-solid fa-mug-hot\u0022\u003e\u003c/i\u003e","iconSize":1.8,"iconSizeUnit":"rem","iconMargin":0,"iconType":"2","iconColor":"black","className":"vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-icon vk_icon vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top"><div class="vk_icon_frame is-style-noline"><div class="vk_icon_border has-text-color has-black-color" style="width:calc(1.8rem + 0px);height:calc(1.8rem + 0px)"><i style="font-size:1.8rem" class="fa-solid vk_icon_font fa-mug-hot"></i></div></div></div>
<!-- /wp:vk-blocks/icon -->

<!-- wp:heading {"textAlign":"center","className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top","style":{"typography":{"letterSpacing":"2px","lineHeight":"1.1","fontSize":"1.75rem"}}} -->
<h2 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top" style="font-size:1.75rem;letter-spacing:2px;line-height:1.1">Drink</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">ドリンク</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">ドリンク</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"right":"25px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" style="padding-right:25px"><!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>aaa</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>iii</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>あああ</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>いいい</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:html -->
<dl>
<dt>dl > dt</dt>
<dd>dl > dd</dd>
</dl>
<!-- /wp:html -->

<!-- wp:paragraph {"className":"vk_block-margin-0\u002d\u002dmargin-bottom vk_block-margin-0\u002d\u002dmargin-top"} -->
<p class="vk_block-margin-0--margin-bottom vk_block-margin-0--margin-top">上下にマージン0をつけてます</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

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

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

実装者と同じ確認を行ってください。

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

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

[kurudrive]

@mtdkei ありがとうございます。
Cc: @goutetsuguma @sysbird

:not 指定する時は強くなりすぎるので :where() をつけるようにしてください。
でないと、CSSカスタマイズしてた人が効かなくなる可能性があるため

例） 追加CSSに以下を追加

.wp-block-column,
.wp-block-group {
	&[class*=wp-container-] > :is( p,ul,ol,dl ) {
		border:1px solid #00f;
	}
}

もとのmasterブランチなら 青線になってるはず

ここで _common-theme-json.scss に :not 指定で

.wp-block-column,
.wp-block-group:not(.is-layout-flex) { // 6.0 で追加された is-layout-flex は除外
	&[class*=wp-container-] > :is( p,ul,ol,dl ) {
		border:1px solid #f00;
	}
}

になると、上書きされて赤線になってしまう。

しかし、下記のように :where(:not()) 指定だと詳細度は上がらないので、上書きされない

.wp-block-column,
.wp-block-group:where(:not(.is-layout-flex)) { // 6.0 で追加された is-layout-flex は除外
	&[class*=wp-container-] > :is( p,ul,ol,dl ) {
		border:1px solid #f00;
	}
}

[mtdkei]

@kurudrive
ご確認いあただきありがとうございます。次回よりそのようにいたします。