Zenn
🐡

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

に公開
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 */
}

仕組み

考察と結果

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

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

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

Discussion