この記事は、WordPress 6.2bata1を基に書いています。
WordPress 6.2 では、Additional CSSが刷新されます。
ブロックテーマの場合、head 内のAdditional CSSの出力位置が変更になるので,カスタマイザーのAdditionalCSSを使っている場合は、詳細度の調整が必要になる場合があります。
クラッシックテーマの場合は、CSSの出力位置は変更になりません。
emulsion テーマの場合、Additional CSSの出力位置が変更になります。
すべてのテーマスキーム（フルサイト編集 テーマ、フルサイト移行 テーマ、クラッシックテーマ）で、出力位置が変更になるのでカスタマイズしている場合は、CSSが有効に働いているかチェックしてください。
emulsion テーマでは、body要素にidを追加していますので、簡単に詳細度を高くすることができます。通常なら、#emulsion チャイルドテーマの場合は、#[チャイルドテーマのスラッグ] をセレクタに追加していただくだけです。
note: ユーザー/プロフィールで、リッチエディタを使用しない。設定の場合は、<style id="wp-custom-css">で、出力します。
note:サイトエディタの Additional CSSは、管理者権限が必要です。（UNFILTERED_HTML)
6.2のカスタマイザーのAdditional CSSとサイトエディタのAdditional CSSは異なるものです。
カスタマイザー内に Additional CSS がありましたが、6.2から、サイトエディタにもAdditional CSSが追加されます。
カスタマイザーのものでも、サイトエディタのものでもどちらも、CSSを追加することは可能ですが、同じ名称ですが、それぞれ異なりますので理解しておいてください。
カスタマイザー内のAdditional CSSは、以下の関数を使って取得できます。
wp_get_custom_css( 'theme-slug' );<style id="wp-custom-css">クラッシックテーマは、ここにスタイルが出力されます</style><style id="wp-custom-css">は、一般的には、head要素の最終子要素として、表示されます。
サイトエディタの Additional CSSは、以下の関数を使用します。
wp_get_global_styles_custom_css();<style id='global-styles-inline-css'>ここに追加されます</style><style id='global-styles-inline-css'>ここに追加されます</style>は、テーマのスタイルシートよりも先行して出力します。
Additional CSSは、一般的には、「静的に出力します。」 記述されたCSSは常にロードされます。
Additional block CSS
6.2では、サイトエディタにAdditionalCSSだけでなく、Additional Block CSSというフィールドも追加されています。
AdditionalCSSフィールドは、通常のCSSの記述をすれば反映しますが、
Additional Block CSSは、ベーシックな記述の仕方は以下のようになります (bata4 エラーになります）
color:var(--wp--preset--color--black);
background:var(--wp--preset--color--white);セレクタとブレースは、記述しなくても補完されます。(bata4 エラーになります）
追記: beta4では上記の記述では、常にエラーになってしまいます。
右下のビックリマークがそれです。
では、beta4では、どのように書けばいいのでしょう？ wp-block-headingの例
正解？（疑似クラスで、ごまかす）
:where(h1){
color:red;
}セレクタの補完を考慮せずに通常のCSSを記述する
.wp-block-heading{
color:red;
}これは、一見正常に表示されますが、実際にスタイルが適用されるのは、以下のようになります
.wp-block-heading.wp-block-heading{
color:red;
}https://github.com/WordPress/gutenberg/pull/47132 でCSSの検証が追加されたようで、Additional CSSでは、うまく機能するようですが、Additional block CSSでは、セレクターが補完されるために、CSSがおかしくなる模様、、、
theme.json ”css” を記述する場合に、自身のselectorを&で表しているようなので、それもテストしてみた。
&{
color:red;
}.wp-block-heading{}.wp-block-heading{
color:red;
}Additional Block CSSは、一般的には、「動的に追加されます。」（投稿に、そのブロックがあればという条件で）
note:テーマ開発者は、theme.json で、”css” を使用することができます。