カバーブロックの中にカラムを作り幅広以上に設定にした時、レイアウトが右にずれる

[YukinobuAsakawa]

概要

タイトル通りですが、Lightning（G3含む）で、カバーブロックの中にカラムを作り幅広設定にした時、レイアウトが右にずれる現象を確認しました。（添付画面参照）

再現手順

1. WordPress の環境（Lightningインストール済み）の状態で、固定ページ（あるいは投稿）を新規作成。
2. カバーブロックを挿入、幅広（あるいは全幅）に設定
3. カバーブロックの中にカラムブロックを追加、 幅広（あるいは全幅）に設定

動作環境

・WordPress: version: 6.3.1
・Lightning: 15.11.0

・検証時にインストールしているプラグイン

• WP Multibyte Patch
• Lightning G3 Pro Unit
• VK All in One Expansion Unit
• VK Block Patterns
• VK Blocks Pro

お忙しいところ申し訳ありませんが、ご確認いただけますと幸いです。

[kurudrive]

@YukinobuAsakawa 下記に調整版の zip ファイルがありますのでご確認よろしくお願いいたします (￣人￣)
#1069

[YukinobuAsakawa]

お返事が遅くなって申し訳ありません。試してみます。

[YukinobuAsakawa]

@kurudrive

調整版の Zip ファイルのテーマをインストールして同様の設定を行いましたが、やはり幅広に設定した時には右にずれてしまうようです。

[kurudrive]

@YukinobuAsakawa 確認ありがとうございます。
恐らく手順通りの下記の状態だと特に問題ないと思いますがいかがでしょう？

<!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":209,"minHeightUnit":"px","isDark":false,"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light" style="min-height:209px"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full","style":{"border":{"width":"1px"}}} -->
<div class="wp-block-columns alignfull" style="border-width:1px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>全幅カバー &gt; 全幅カラム</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":50,"isDark":false,"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light" style="min-height:50px"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide","style":{"border":{"width":"1px"}}} -->
<div class="wp-block-columns alignwide" style="border-width:1px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>全幅カバー &gt; 幅広カラム</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

この設定から何か変更すると再現するのだと思いますので、問題が発生するコードを貼り付けていただけると確認しやすいので助かります。
よろしくお願いいたします。

[YukinobuAsakawa]

@kurudrive
返信が遅くなって申し訳ないです。問題のあるコードは以下です。

`

<!-- wp:heading -->
<h2 class="wp-block-heading">カバー・カラム・幅広</h2>
<!-- /wp:heading -->

<!-- wp:cover {"overlayColor":"cyan-bluish-gray","isDark":false,"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide is-light"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://lightningdemo3.local/wp-content/uploads/2023/09/27600614_m-1024x683.jpg" alt="" class="wp-image-9"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://lightningdemo3.local/wp-content/uploads/2023/09/27600614_m-1024x683.jpg" alt="" class="wp-image-9"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":9,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://lightningdemo3.local/wp-content/uploads/2023/09/27600614_m-1024x683.jpg" alt="" class="wp-image-9"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

[kurudrive]

@YukinobuAsakawa あー、確認できました。
公開画面は問題ないけれど編集画面ではズレてるという感じですよね？

[YukinobuAsakawa]

@kurudrive

ありがとうございます。
私の環境では公開画面でも右にずれています。

[kurudrive]

@YukinobuAsakawa ありがとうございます。
おかしいですね...僕の環境だと公開画面はずれていないのですが...
とりあえず編集画面から調整してみます

[kurudrive]

@YukinobuAsakawa す、すみません、やはり症状が再現しなくて修正が難しいのでサイトのデータをエクスポートして共有いただく事は可能でしょうか？
よろしくお願いいたします。

[YukinobuAsakawa]

@kurudrive

すみません。お手数おかけします。
エクスポートの形式の指定はありますか？
All-in-One WP Migrationのようなエクスポートファイルでよろしいのでしょうか？

[kurudrive]

@YukinobuAsakawa
All-in-One WP Migration で大丈夫です。こちらこそお手数おかけいたします。

[YukinobuAsakawa]

@kurudrive
エクスポートファイルです。
アカウント情報は別送します。
https://drive.google.com/drive/folders/1reG5By_3AM0IovQuykXjkgyeJgMC7vv7?usp=sharing

[kurudrive]

@YukinobuAsakawa ありがとうございます。
こちらで再現しないのは G2 モード だったからでした。
調整しましたのでご確認くださいませ。

lightning.zip

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

[YukinobuAsakawa]

@kurudrive

ありがとうございます。
お返事が遅くなって申し訳ありません。

調整版のテーマを適用しました。
右にずれる現象は解消されました、（以下参照）
本当にありがとうございます。

[kurudrive]

対応版リリースしましたので close します。
ありがとうございました。

[YukinobuAsakawa]

ご対応いただきまして、ありがとうございました。
感謝です。