グループブロックで section にした際の表示崩れ

asako
(@asako08)

2年、 7ヶ月前

以下の条件時、表示崩れがおこります。

1. グループブロックで、HTML要素に section を選択
2. その中にカラム（カラム数:2）を連続して2つ作成
3. カラム内でグループを作成。HTML要素はデフォルトのdiv

上記設定にすると、連続して作成した2つのカラムが横並びになってしまいます。
改善お願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)

トピック投稿者 asako
(@asako08)

2年、 7ヶ月前

追記：WordPressのバージョンは5.8です。
Aki Hamano
(@wildworks)

2年、 7ヶ月前
@asako08 さん

はじめまして。
想定されているブロックのツリー構造ですが、以下であっていますか？
```
group（section）
　- columns
　　- column
　　　- group（div）
　　- column
　　　- group(div)
```
グループブロックですが、デフォルトのスタイルでは、タグ要素によってCSSを切り替えるような記述は入っていません。
また、カラムブロック（Columns）は子要素のカラムがもともと横並びになる仕様なので、正しい挙動のように思います。

一度デフォルトテーマで確認いただき、再現するようであれば、改めて詳しいブロック構造を教えていただけないでしょうか。
- この返信は2年、 7ヶ月前にAki Hamanoが編集しました。
トピック投稿者 asako
(@asako08)

2年、 7ヶ月前
@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 です。
大変お手数ですが、一度お試しいただけるとありがたいです。。
どうぞ宜しくお願い致します。
Aki Hamano
(@wildworks)

2年、 7ヶ月前
こんにちは。

一番上の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側の不具合かもしれません。
トピック投稿者 asako
(@asako08)

2年、 7ヶ月前
ありがとうございます。

一番上の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>
```
どうぞ宜しくお願いします。
Aki Hamano
(@wildworks)

2年、 7ヶ月前
@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タグのままにしておくしか方法はないと思います。
- この返信は2年、 7ヶ月前にAki Hamanoが編集しました。
トピック投稿者 asako
(@asako08)

2年、 7ヶ月前

@wildworks 様、お忙しい中検証いただきありがとうございました！
issueと解決方法もありがとうございます。

現状、ページの構成上、親ブロックの section は維持したかったので、その直下にdivのGroupブロックを作成し、その中に columns を入れるようにしました。

Gutenberg本体で解消されるのを待ちたいと思います。

7件の返信を表示中 - 1 - 7件目 (全7件中)

トピック「グループブロックで section にした際の表示崩れ」には新たに返信することはできません。

トピックタグ

表示