追記：WordPressのバージョンは5.8です。
@asako08 さん
はじめまして。
想定されているブロックのツリー構造ですが、以下であっていますか？
group（section）
- columns
- column
- group（div）
- column
- group(div)
グループブロックですが、デフォルトのスタイルでは、タグ要素によってCSSを切り替えるような記述は入っていません。
また、カラムブロック（Columns）は子要素のカラムがもともと横並びになる仕様なので、正しい挙動のように思います。
一度デフォルトテーマで確認いただき、再現するようであれば、改めて詳しいブロック構造を教えていただけないでしょうか。
@wildworks 様、ご返信ありがとうございます。
ご説明が足りず、申し訳ありませんでした。
CSSによりおかしくなるのでは無く、タグの出力がおかしくなってしまうようです。
親のグループが div の場合は以下のようになり、表示に問題はありません。
（※ columns を上下で連続して2つ並べたい）
group（div）
- columns
- columns
- column
- column
- group(div)
親のグループを section に変更した場合は以下のようになり、1つ目の columns に2つ目の columns が内包されてしまっています。
ですので、表示側では１列に4カラム並んだようになってしまいます。
group（section）
- columns
- column
- column
- columns
- column
- column
- group(div)
尚、編集画面では問題はなく、表示側だけでおかしくなってしまいます。
テーマは Twenty Twenty-Oneバージョン: 1.4 です。
大変お手数ですが、一度お試しいただけるとありがたいです。。
どうぞ宜しくお願い致します。
こんにちは。
一番上のGroupブロックのタグをSectionにした時に、子のcolumnsブロックのすぐ下にcolumnsブロックが入ってしまうという事でしょうか。
※改めてツリーを記載します
group（section）
- columns
- column
- column
- columns ←ここに入ってしまう
- column
- column
- group(div)
仕様として、columnsブロックが子として持てるのはcolumnブロックなので、columnsブロックが子として入る事は考えにくいです。
一度ブラウザの開発ツール等で、フロントエンド側のDOM構造が本当にそのように変わってしまっているのか確認いただけないでしょうか。
通常であれば、以下のようなDOM構造で正常に出力されるはずです。
<section class="wp-block-group has-dark-background-color has-background">
<div class="wp-block-columns">
<div class="wp-block-column"></div>
<div class="wp-block-column"></div>
</div>
<div class="wp-block-columns">
<div class="wp-block-column"></div>
<div class="wp-block-column">
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<div class="wp-block-group__inner-container"></div>
</div>
</div>
</div>
</div>
</section>
ただし、最深部のGroupブロックでwp-block-group__inner-containerが二重に出力されてしまっており、これに関してはGutenberg側の不具合かもしれません。
ありがとうございます。
一番上のGroupブロックのタグをSectionにした時に、子のcolumnsブロックのすぐ下にcolumnsブロックが入ってしまうという事でしょうか。
こちらのご認識で間違いないです。
Googleの検証ツールで確認すると、以下のように出力されています。
<section class="wp-block-group">
<div class="wp-block-columns">
<div class="wp-block-column">
<p>アアア</p>
</div>
<div class="wp-block-column">
<p>aaa</p>
<div class="wp-block-group"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container">
<p>aaa</p>
</div></div>
</div>
</div>
<div class="wp-block-columns">
<div class="wp-block-column">
<p>アアア</p>
</div>
<div class="wp-block-column">
<p>aaa</p>
</div>
</div></div>
</section>
どうぞ宜しくお願いします。
@asako08 さん
情報ありがとうございます。
私の方でも再現出来ました。
おそらくですが、1つ目のcolumnsブロック > 2つめのcolumnブロック > groupブロックについて、.wp-block-group__inner-containerの閉じタグが表示側で正しい位置で出力されていないため、DOM構造が崩れてしまっているように思います。
Gutenberg本体の不具合だと思いますが、Gutenbergプラグインを入れても再現したので、開発バージョンでも修正されていないと思われます。
.wp-block-group__inner-containerが複数回表示される件についてはissueを立てていますので、こちらが改善すれば今回の不具合もあわせて改善される可能性があります。
Group block: child group block has multiple inner container div #34404
取り急ぎの解決手段としては、親のGroupブロックを使わないか、使うのであればdivタグのままにしておくしか方法はないと思います。
@wildworks 様、お忙しい中検証いただきありがとうございました！
issueと解決方法もありがとうございます。
現状、ページの構成上、親ブロックの section は維持したかったので、その直下にdivのGroupブロックを作成し、その中に columns を入れるようにしました。
Gutenberg本体で解消されるのを待ちたいと思います。
