wp 6.2 と site editor 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)

カスタマイザー内に 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は常にロードされます。

6.2では、サイトエディタにAdditionalCSSだけでなく、Additional Block CSSというフィールドも追加されています。

AdditionalCSSフィールドは、通常のCSSの記述をすれば反映しますが、

Additional Block CSSは、ベーシックな記述の仕方は以下のようになります

color:var(--wp--preset--color--black);
background:var(--wp--preset--color--white);

セレクタとブレースは、記述しなくても補完されます。

Additional Block CSSは、一般的には、「動的に追加されます。」（投稿に、そのブロックがあればという条件で）

note:テーマ開発者は、theme.json で、”css”　を使用することができます。