[ 解決済 ] X-T9 1.37.3以降、ブロックエディターにて記事編集時、コンテンツ幅が正常に反映されません
[ 解決済 ] X-T9 1.37.3以降、ブロックエディターにて記事編集時、コンテンツ幅が正常に反映されません
- このトピックには9件の返信、3人の参加者があり、最後に
により1時間、 49分前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.9.4■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
X-T9■ テーマのバージョン
1.37.3以上（1.38.0でも確認できます）■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
Category Order and Taxonomy Terms Order バージョン 1.9.5
VK All in One Expansion Unit バージョン 9.115.1
VK Block Patterns バージョン 1.35.2
VK Blocks Pro バージョン 1.119.1
VK Dynamic If Block バージョン 1.6.0
VK Link Target Controller バージョン 1.10.1
VK Plugin List バージョン 0.1.4
WP Multibyte Patch バージョン 2.9.3■ 期待する動作
X-T9 1.37.2以前のような画面に戻ることに加え、1.37.3で修正した不具合を解消した状況。
※参考：スクリーンショット2枚目：X-T9 1.37.2時点でのページの編集画面■ 自分で試した事
過去バージョンにロールバックの上、不具合の作り込みを確認。■ 症状が発生するブラウザ
Chrome■ 実際の症状
スクリーンショット1枚目のページを固定ページ編集画面で開いたところ、コンテンツ幅が反映されていない状況となる（スクリーンショット3枚目）。
結果、ブロックエディターの視認性が著しく悪化する。※添付スクリーンショットのページは以下サンプルになります（ただし、他環境でも確認可能です）。
■ その他特記事項
本件、1.37.3での不具合修正によるものと思われます。
以下不具合を解消した結果、別の不具合が生じています。1.37.3 / 2025.12.4
[ 不具合修正 ] エディタが iframe じゃない状態でのレイアウト不具合を修正 by @kurudrive in #420お世話になっております。ベクトルの石川でございます。
デモサイトインポートして中身確認しましたが、症状が再現しませんでした。
どういう手順だとどういう状態になるのか記載いただけると助かります。
あと、”正常” だとクリア条件がわからないので、具体的な症状で記載いただけるとたすかります。
よろしくお願いいたします。
ご担当者 様
ご確認ありがとうございます。
1点確認ですが、画面は最大化していますか？
添付のとおり、画面幅が広いと正常にコンテンツ幅が反映されず、意図通りの表示（1.37.2以前の縮まったコンテンツ幅：1,100px程度）となりません。当方、FullSite Installerからテンプレートをインストールした状態でこのような状態になっており、それ以外には何もしていません。
改めてご確認いただけますと幸いです。石川 様
ご確認ありがとうございます。
コンテンツ幅よりも広い “全体の80%” が上書きするという症状の事でしょうか？
確認したところ、ブロックエディター内で読み込まれるCSS内で該当箇所が見当たらなかったのですが、theme.jsonの方で設定されている以下記述のことでしょうか？
"layout": { "contentSize": "1100px", "wideSize": "calc( var(--wp--style--global--content-size) + ( 100vw - var(--wp--style--global--content-size) ) / 2 )" },"custom": { "width": { "wrapper": "100dvw", "content": "min( var(--wp--style--global--content-size), 90vw )", "wide": "min( var(--wp--style--global--wide-size), 95vw )", "sidebar": "220px" },だとすれば、編集画面用CSSで上書きするなどの設定が必要と思います。
—-
「全体の80%が上書きする」という症状は意図的ということでしょうか。
それならば、以前の画面の方が見やすかったユーザー（私含めて）にとってはなおのこと問題だと思っています。もちろん、エディター＞設定などで上書きし、改善できるようにしてしまえば話は早いのですが……。
（ちなみに、添付箇所がデフォルト時空欄になっておりましたが、値を埋めて設定反映しても改善はされません）取り急ぎ、以下CSSをfunctions.php経由で編集画面に読み込ませることによって解決しました（幅の値は一例です）。
/* 通常のブロック（コンテンツ幅：900pxに強制固定） */ .wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)), .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } /* 「幅広」に設定したブロック（ワイド幅：1200pxに強制固定） */ .wp-site-blocks .is-layout-constrained > .alignwide, .editor-styles-wrapper .is-layout-constrained > .alignwide { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* 公開画面と編集画面のタイトルブロック */ .wp-block-post-title, .editor-styles-wrapper .wp-block-post-title, /* 古いエディタ環境や特殊な入力欄用のフォールバック */ .editor-post-title__input, .wp-block-post-title .editor-post-title__input { max-width: 900px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }ただし、このような解決方法は初級者にはなかなかたどり着けないと思いますし、根本的な解決とはほど遠いので、できれば根本から解決されることを望みます。
この幅処理については
* ブロックエディタでも iframe と iframe じゃないケースがある
* ブロックエディタ上で iframe じゃない場合はサイドパネルの有無 / フルスクリーンモードかどうか / フルスクリーンの場合、左のメニューは折りたたまれているかでエディタ幅が変わるが、それはスクリーンサイズではないので通常のメディアクエリの処理判定では効かない
* ブロックが入れ子になっていて、中の要素が全幅や幅広になっている場合に貫通して全幅にするのかしないのか？などの問題が組み合わさり非常に複雑なバリエーションになるため、問題点を確定・再現できないと最適解の検討が難しいです。
改めて確認ですが、問題視されているのは、
『エディタの幅が広いとコンテンツ幅（デフォルトでは1100px）を越えて広がる』
という事でしょうか？
それ以外の不具合があるようでしたら記載ください。ちなみに現状 エディタでは編集エリアの 80% をコンテンツエリアとして上書きしているのは、
そうしないと幅が狭い時に要素が左右ベタ付けになったり、それを防止するために余白を設けるとそれによってマイナスオフセット処理している幅広や全幅のレイアウトがくずれる弊害が発生するためです。石川 様
改めて確認ですが、問題視されているのは、
エディタの幅が広いとコンテンツ幅（デフォルトでは1100px）を越えて広がる
という事でしょうか？
おっしゃるとおりです。
インストール時点でこれなので、CSSやSCSSの記述の方法に問題があると思われます。なお、他テンプレートでも検証してみましたが、「観光ブログ」では記事タイトルのみがずれており（1枚目）、「プレーン」（2枚目）や「採用サイト ものづくり系」（3枚目）では「ビジネス（無料版）」と同様の事象となっておりました。
テンプレートの記述の方法によって違いがで出るものなのでしょうか。—-
なお、試しにTwenty Twenty-Fiveに切り替えてみましたが、同様の現象は発生せず、Twenty Twenty-Fiveのデフォルト幅645pxがブロックエディターにもきちんと適用されます（4枚目）。
私としてはTwenty Twenty-Fiveと同様のスタイルになることが理想です。
よろしくお願いいたします。
検証中に追記があったようなので。
ちなみに現状 エディタでは編集エリアの 80% をコンテンツエリアとして上書きしているのは、
そうしないと幅が狭い時に要素が左右ベタ付けになったり、それを防止するために余白を設けるとそれによってマイナスオフセット処理している幅広や全幅のレイアウトがくずれる弊害が発生するためです。上記承知しました。
ただ、視認性が良くないのは確かなので、自己責任でCSSで解消することにします。本件解決としてクローズとさせてください。
TT5 とは幅処理の基本ロジックが違うので、やむをえない部分もあるのですが、
サイトエディタでの幅指定が、サイトエディタ上で効かなくなってますね…近日再調整します。
- このトピックに返信するにはログインが必要です。
