[ Bug fix ] Fix block width on editor with narrow screen.

[kurudrive]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

#1214

どういう変更をしたか？

編集画面の幅処理調整

スクリーンショットまたは動画

変更前 Before

変更後 After

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

• 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• Files changed (変更ファイル)の内容は目視で確認したか？
• readme.txt に変更内容は書いたか？
• 本当にちゃんと確認をしたか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

• 書けそうなテストは書いたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

<!-- wp:group {"metadata":{"name":"全幅グループ"},"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}},"color":{"background":"#ffefef"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#ffefef;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- 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 -->

• 上記コードを貼り付け
• master ブランチで フルスクリーンモードを解除して画面を狭くすると左右に余白があく事を確認
• このブランチで npm run build をして再読み込み -> 余白が改善される事を確認

レビュワーに回す前の確認事項

• 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー確認方法・確認内容など

• 実装者に同じ
• 軽く SCSS の変更箇所を確認

---

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？
• キャッシュをクリアして確認したか？

[goutetsuguma]

フルスクリーンモードではない場合に、768px以下で確認しまして、問題ありませんでした
どなたか2人目確認お願いいたします

[goutetsuguma]

@kurudrive
このプルリクのbuild testのチェックが完了していないようで、Re-run jobsを試してみましたが改善しませんでした。
どのように対処すればよいか、わかりますでしょうか？🙇

[kurudrive]

.auto-fold っていうクラスがあって 画面幅によって --vk-width-editor-leftmenu の値を変更して幅処理してるんやでって事を共有したいだけなので、軽く見てもらえばok

[kurudrive]

@goutetsuguma

どのように対処すればよいか、わかりますでしょうか？

なんだったかな、確かビルドチェック自体を実施するのに問題が発生してすっ飛ばすようにしたような雑な記憶がある。
とりあえず気にしなくてOKデス

[goutetsuguma]

なんだったかな、確かビルドチェック自体を実施するのに問題が発生してすっ飛ばすようにしたような雑な記憶がある。
とりあえず気にしなくてOKデス

コメントありがとうございます🙇　
build testのチェックが終わっていない件は気にしなくてもOKとのことでしたので、どなたか2人目確認お願いします

[sysbird]

解決されていることを確認しました
ありがとうございます

@kurudrive
build testのチェックが終わっていないため？
マージボタンがないです