編集画面の幅処理がおかしい

[kurudrive]

サイドバーを開いたり、フルスクリーンモードを解除すると幅広が左右に埋まってしまう

Lightning みたい幅のサイドバーの開閉状況に応じて変数の中身指定するとか vw ではなく container width を使うなど要修正

<!-- wp:heading -->
<h2 class="wp-block-heading">グループブロックでラップ(ブロック間隔を設定)</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">なし</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">幅広</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">全幅</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">何もラップしていない</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">なし</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">幅広</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">全幅</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2 class="wp-block-heading">グループブロックでラップ</h2>
<!-- /wp:heading -->

<!-- wp:group {"align":"full","style":{"spacing":{}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">なし</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">幅広</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"border":{"width":"5px"}},"borderColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-border-color has-primary-border-color" style="border-width:5px"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">全幅</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

これも編集画面でサイドパネル開くと埋まる... https://patterns.vektor-inc.co.jp/vk-patterns/media-and-txt_gradient_free/