PublishPress Blocksとの併用時のブロックエディタのセクションの表示の崩れを修正


Snow Monkey Blocksと下記のプラグインを併用した場合に、ブロックエディタの編集画面で、セクションの表示がおかしくなったことへの対処方法です。

PublishPress Blocks – Advanced Gutenberg Blocks, Permissions, Layouts, Forms
https://ja.wordpress.org/plugins/advanced-gutenberg/

再現時の環境
WordPress 5.7
Snow Monkeyバージョン: 13.2.3
Snow Monkey Blocks バージョン 10.3.3 
PublishPress Blocks バージョン 2.5.7

症状

上記の環境より以前、ある時期から、ブロックエディタ上のSnow Monkey Blocksのセクションの表示幅が狭く感じられるようになりました。

下記の画像は、ブロックエディタに(上から）

  • セクションを追加した状態
  • セクションを追加して幅広を選択した状態
  • セクションを追加して全幅を選択した状態

の3つを入れている状態なのですが、全体的にウィンドウサイズよりかなり見た目が狭いのと、3つ目の全幅に関しては中心が左にずれているので操作も難しくなってしまいました。

操作しているウィンドウサイズが1300px程度の時は全幅を選んだセクションでも左にずれた感じは少ないのですが、1920pxのウィンドウなど広めの画面で編集しているとずれが顕著に感じられました。

他のSnow Monkeyユーザーさんで、そのような症状を感じている人がいなさそうなので、下記の手順で原因を探ってみました。

すべてのプラグインを無効にして、Snow Monkey Blocksだけを有効に
１つずつエディタに関連していそうなプラグインを有効にして、表示の変化を確認
PublishPress Blocksが有効の場合に症状が発生することが判明


見た目の問題として、PublishPress BlocksによるCSSが効いていないかデベロッパーツールで見てみると、

#editor div.block-editor-writing-flow {
    max-width: 750px;
    margin: 0 auto;
}

というCSSがあたっているのが確認できたので、追加CSSに

.block-editor-writing-flow  {
	max-width: 100% !important;
}

を追加すると、1366pxなどの画面では症状が解消したように見えました。

しかし、1920pxのウィンドウサイズで確認してみると、全幅を選択している状態のセクションが画面いっぱいに広がりきっていませんでした。

正直原因が分からなかったのですが、何か他にも干渉しているはず！ということで、プラグインが有効の状態と無効の状態でソースを見比べてみると、PublishPress Blocksのプラグインが有効な場合に

<style>
#editor div.block-editor-writing-flow {margin: 0 auto} #editor .wp-block:not([data-type="advgb/images-slider"]):not([data-type="advgb/testimonial"]) {max-width: inherit}
</style>

というコードが出力されていることが確認できました。

追加CSSに

#editor .wp-block:not([data-type="advgb/images-slider"]):not([data-type="advgb/testimonial"]) {
    max-width: none;
}

を記載したところ、上記の症状が完全に解消しました。しかし、PublishPress Blocksの何らかのブロックを追加した際に、上記のmax-widthをnoneにしたことで、何らかのブロックが広がりすぎてしまうなどまた別の問題が生じる可能性も感じます。幸いにも問題が発生してもエディタ画面に限定されそうなのと、何らかのブロックの中に入れ子で使う予定なので幅が広がりすぎる問題は少ないと思わます。この状態で様子を見てみたいと思います。

※追記　2021年3月29日

WordPress 5.7
Snow Monkeyバージョン: 14.0.2
Snow Monkey Blocks バージョン 11.0.1 
PublishPress Blocks バージョン 2.5.7

の状況下で

.block-editor-writing-flow  {
	max-width: 100% !important;
}

は変わらないんですが、下記に

#editor .wp-block:not([data-type="advgb/images-slider"]):not([data-type="advgb/testimonial"]) {
    max-width: none !important;
}

と、!importantの記載が必要になりました。
（エディターに反映したいので、上記はどちらとも、カスタマイザの追加CSSへの記載になります）
また、フルスクリーンモードでないと、トップツールバーじゃない場合のツールバーが左側に見切れます。
このあたり、もう少し検証してみたいと思います