🐡

global-style-inline-cssから`:root :where(p)`を削除したい

2025/04/17に公開

CSS

WordPress

tech

前提や背景

WordPress 6.6以降
かなり古いクラシックテーマにtheme.jsonを導入した
settings.typography.fontSizesを利用している
- settings.typography.defaultFontSizeはfalse

style#global-style-inline-cssに以下のような｢詳細度0のセレクタのCSS｣が出力される｡

:root :where(p) {
    font-size: 1rem;
    line-height: 1.6;
}

次のようなCSSをテーマで使っている場合､前述のインラインCSSにプロパティが上書きされてしまう｡

body {
    font: inherit;
    line-height: 1;  /* この指定の存在を前提にしている */
}
.hoge__title {
    font-size: 2rem;
    /* :root :where(p) の line-height: 1.6が当たってしまう｡本当に適用したいline-heightは1 */
}

仕組み

style#global-style-line-cssには､:root :where(セレクタ)(詳細度0のセレクタ)が出力される
- https://github.com/WordPress/gutenberg/discussions/61810
ユーザーテーマのtheme.jsonは､ wordpress/gutenbergのデフォルトtheme.jsonを上書きしている

考察と結果

ブロックのデフォルトの設定が出力されているのでは?と判断｡
テーマのtheme.jsonでcore/paragraphのブロックスタイルからtypographyの設定を明示的に空にした｡

{
    "settings": {
        "blocks": {
          "core/paragraph": {
            "typography": {
              "fontSizes": []
            }
          }
       }
    }
}

結果､p要素向けの詳細度0のセレクタは出力されなくなった｡

前提や背景

仕組み

考察と結果

Discussion