gutenberg 18.4.1 をアクティブにすると、上記のようにサイトタイトルのスタイルが変更されていることに気付きました。
テーマはコアのCSSの変更に依存するため、毎度「モグラたたき」のように、変更に合わせて、テーマのCSSの変更を余儀なくされます。
さて、今回の表示上の問題は何が原因なのでしょう?
私なりの結論は、global-styles-inline-css のセレクタのの記述に、:rootが追加されたことによるスタイルのコンフリクトです。
.wp-block-site-title{
:root :where(.wp-block-site-title) {
...
}
p{
:root :where(p) {
...
}
:where()の中にクラスと、要素が記述されています。:where()は、詳細度を0にするため、クラスを指定した場合と要素を指定した場合の詳細度は、同じになります。
あとは、CSSの出現順でスタイルが適用されるので、p.wp-block-site-title
は、:root :where(p)
が適用されます。
サイトタイトルは、h1-h6のタグで、p要素ってありえないんじゃない?
Twenty Twenty Four テーマで個別投稿を確認するとわかると思いますが、p.wp-block-site-title
は存在しますよね。
以下のように、level:0の場合は、p要素で表現されるわけです。
<!– wp:site-title {“level”:0} /–>
Twenty Twenty Fourに言及したので、おまけで、追記しておきます。
何! Twenty Twenty Four では、スタイルが崩れていないよ!について、
このテーマでは、そもそも :root :where(p)
なんてセレクタはスタイルに追加されていません。これはどういうわけなのでしょうか?
それは、theme.jsonの設定に謎がありそうです。このテーマでは、theme.jsonにそもそも、styles/blocks/ “core/paragraph”の設定がありません。なので、global-styles-inline-cssには、:root :where(p)
は書き出されない。
だから、gutenbergのスタイルの検証プロセスでも、問題が見つからずOKとなったのではないかと推察しています。
しかし、:root :where(.hoge) のようなセレクタが採用されたのか?いろいろと思いを巡らしてみても、私の理解の範囲を超えていて、「泣く子と、コアには勝てない」ということになるのでしょうか、彼らの変更の意図を理解するには結構時間がかかりそうです。
クラスでも、要素指定でも同じ詳細度に設定して、スタイルの出現順でコントロールする方法にテーマ側で対応するのはかなり困難に思える。
emulsion 3.1.6 での暫定対応
theme.json 設定とコアのglobal-styles-inline-css へのスタイルの書き出し順について調べてみると、theme.jsonの設定の順に、ルールセットも書きだされているように見えるので、“core/site-title” 設定の前に、”core/paragraph”を設定すると、書き出し順も変更されることが判明しました。
当面は、この方法で暫定対応したいと思います。
ただ、懸念材料は、サイトタイトルと段落のCSSのコンフリクトに留まるものではありません。例えば、以前は セレクタがbody
だったものが、:root :where(body)
に変更されたことで、詳細度が上がり、背景色、色などが、コンフリクトする可能性等、全般的な影響が懸念されますが、私の環境では、WordPress6.5 以降のgutenberg プラグインの挙動は非常に不安定なため、残念ですが、十分なテストが行うことができない(プラグインを有効にすると、投稿の編集画面が開けなくなったり、サイトエディタの表示が正常に行われない等々)こともあり、要素スタイルの詳細度が上がってしまった問題についての追加テストは行っていません。もう少し時間をかける必要がありそうです。