[ 解決済 ] 枠線ボックスや見出し(h2)の下部にあったスペースが無くなった。

[VWSカスタマー]

■ WordPress のバージョン
6.7.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.29.4

■ Pro Unit のバージョン
0.29.2

■ スキンの種類
プレーン

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
元のスペースに戻してほしい。

■ 自分で試した事
独自で追加したCSSの削除。

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
「VK Blocks・Pro」のプラグインを最新に更新後、枠線ボックスや見出し(h2)の下部にあったスペースが無くなりました。

「枠線ボックス」は別のスタイルに変更してもスペースは変わりません。
「見出し(h2)」は『Lightning デザイン設定』から『小さい下線』を指定しています。

添付した画像を確認していただくと分かりやすいです。
お手数をおかけしますが、ご確認の程、よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

お世話になっております。ベクトルの石川でございます。

本件状況調査に時間がかかり返信が遅くなりまして恐れ入ります。

まず、今回の問題については、VK Blocks Pro では該当部分に変更は入っていませんので、別の要因であると考えられます。

現状、theme.json が存在するテーマで、theme.json の中で blockGap:true; に指定されている場合、WordPressが標準で、

body .is-layout-flow > * + * {
    margin-block-start: 24px;
    margin-block-end: 0;
}

や

body .is-layout-constrained > * + * {
    margin-block-start: 24px;
    margin-block-end: 0;
}

というCSSを出力するようになっています。

この影響で、Outerブロックやグループブロック内の該当箇所で下部の余白が打ち消される現象が発生するようになってしまいます。

おそらく初期構築時は 外観 > カスタマイズ > Lightning 機能設定 で theme.json が有効でなかったけれども、どこかのタイミングで後から有効にされたために今回の現象が発生したのではないかなと考えています。

—

【補足】

    margin-block-start: 24px;
    margin-block-end: 0;

も勝手に追加されると困るので、Lightning G3 では unset で打ち消すCSSを追加しています。

—

ですので、

外観 > カスタマイズ > Lightning 機能設定 で theme.json を無効に切り替える

という操作をすれば “もとの余白の状態” には戻ると思います。

ただし、無効にするとカラムブロックの間隔や、その他の余白設定項目が効かなくなってしまいますので、theme.json が有効なモードでの使用をおすすめしています。

“theme.json が有効な状態でなおかつ無効と同じ余白” というのは WordPressの仕様上実現が難しい（ロジックに無理がある）ため、できませんので一番確実なのはブロック側でマージンを指定したり、該当箇所にスペーサーブロックを配置して上下のブロックにはマージン0指定をする事です。

WordPressの仕様でグループなどで要素をラップするかしないかで余白がばらついたり、テーマによって余白の指定が異なったりしますが、手動でマージンを指定したりスペーサーで余白を追加&必要に応じてブロックにマージン0指定をすれば、WordPressやテーマの仕様変更、使う場所（ラップの有無）などによる影響を受けずに安定した余白を確保する事ができます。

余白の指定方法につきましては下記で案内しておりますので、一度ご確認くださいませ。

余白をコントロールするには？ -WordPressのブロックエディター

よろしくお願いいたします。

[VWSカスタマー]

お忙しい中、調査していただき、感謝します。
アドバイスしていただいた内容を参考に、スペーサーで空白を調整します。

ありがとうございました。

[投稿者]

投稿