emulsion today

gutenberg 16.1.0

サイトのレイアウトが、以下のように崩れた

wp-block-buttons の幅がなくなり、サイドバーの位置がalign-items:flex-start;から、centerに変更になる。

gutenberg 16.0.0で再現すると

これらの変化がどのようにして発生したのかを調べてみた。

結論から言うと、theme.jsonで設定したdefinitions設定が上書きされなくなったために発生したと思われます。

{
    "settings": {
        "layout": {
            "definitions": {
                "constrained": {
                    "baseStyles": [
				...
                        {
                            "selector": " > *",
                            "rules": {
                                "width": "var(--wp--custom--width--content)",
                                "max-width": "100%",
                                "margin-left": "auto",
                                "margin-right": "auto"
                            }
                        }
				...
					}
				}
                "flex": {
                    "baseStyles": [
                        {
                            "selector": "",
                            "rules": {
                                "align-items": "flex-start",
                                "justify-content": "center;",
                                "clear": "both",
                                "float": "none",
                                "margin": "var(--wp--custom--margin--block)"
                            }
                        },
					]
				}
			}
		}
	}
}

definitionsは、公に許可されたものではありませんが、上書きができなくなると、テーマのスタイル定義に壊滅的な影響を与える可能性があります。

なぜ、このテーマはdefinitions を使用しているのか

デフォルトの状態の場合.上記の赤文字部分の設定は、以下のようになっています。

plugins/gutenberg/lib/theme.json

                        "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
                        "rules": {
                            "max-width": "var(--wp--style--global--content-size)",
                            "margin-left": "auto !important",
                            "margin-right": "auto !important"
                        }
                    },

この設定は、以下のスタイルを生成します。

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

ご覧のように、widthの設定はなく、max-widthがあるだけです。

なぜ、width を使用せず　max-widthを使用しているのでしょうか？

このような指定がデフォルト設定で行われた場合、テーマはwidth:auto(つまりデフォルト）のみしか使用できなくなります。

widthがpx設定を持っていると、多くの場合モバイルブラウザなどで表示崩れが発生します。

definitionsが上書きできた場合のCSS これまでは、これに置き換えられていた。

body .is-layout-constrained > * {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: var(--wp--custom--width--content);
}

一方ブロックエディタの編集画面でのスタイルは、どうなっているでしょうか？

.editor-styles-wrapper * {
    max-width: 100%!important;
}

このように、theme.jsonの設定は、完全に打ち消されています。

このようなことから、max-widthを使用することにはやや問題があるという事を、コアのデベロッパーも気づいているみたいなので、そのうちこれらは修正されるだろうと思いつつ、difinitionsで、当面は逃げていこうと考えていたわけです。

margin-left:auto !important; margin-right:auto !important;

このimportant指定も、詳細度が高すぎるため、importantは外して、テーマで矛盾をオーバライドしやすく変更していました。

aliginleft等、回り込みブロックの後方にある is-layout-flexブロックは、display:blockを使ったブロックとのマージンの計算方法が異なるために、位置ずれが発生するとか、

仮に、display:inline-block display:inline-flex等の場合には、margin:autoは効かなくなるため、別途オーバーライドする必要があるためです。

しょうもないことを、長々書きましたが、gutenberg 16.1.0 では、このテーマはレイアウトが破綻します。今後オーバーライドが有効になる事を切に祈ります。

今後、difinitionsが、どういう事になるのかしばらく見てから、CSSで対応すべきか検討したいと思います。