This article is based on WordPress 6.2bata1.
WordPress 6.2 comes with a revamp of Additional CSS.
In the case of block themes, the output position of Additional CSS in the head will change, so if you are using the Customizer’s Additional CSS, you may need to adjust the level of detail.
In the case of the classic theme, the output position of CSS does not change.
In the case of the emulsion theme, the output position of Additional CSS is changed.
All theme schemes (Full Site Edit Theme, Full Site Migration Theme, Classic Theme) will change the output position, so if you have customized it, please check if CSS is working effectively.
The emulsion theme adds an id to the body element, so you can easily make it more specific. Normally, for #emulsion child themes, just add #[child theme slug] to the selector.
note: ユーザー/プロフィールで、リッチエディタを使用しない。設定の場合は、<style id="wp-custom-css">で、出力します。
note: Additional CSS in the site editor requires administrator privileges. (UNFILTERED_HTML)
The Customizer Additional CSS and the Site Editor Additional CSS in 6.2 are different.
There was Additional CSS in Customizer, but from 6.2, Additional CSS will be added to Site Editor as well.
It is possible to add CSS to both the customizer and the site editor, but although they have the same name, please understand that they are different.
Additional CSS in the customizer can be obtained using the function below.
wp_get_custom_css( 'theme-slug' );<style id="wp-custom-css">クラッシックテーマは、ここにスタイルが出力されます</style><style id="wp-custom-css"> Generally, it is displayed as the last child element of the head element.
Additional CSS in the site editor uses the following functions.
wp_get_global_styles_custom_css();<style id='global-styles-inline-css'>ここに追加されます</style><style id='global-styles-inline-css'> It will be output before the stylesheet of the theme.
Additional CSS is generally “output statically.” The described CSS is always loaded.
Additional block CSS
6.2 adds a field called Additional Block CSS as well as Additional CSS to the site editor.
The Additional CSS field will be reflected if you write normal CSS, but the Additional Block CSS has a basic description as follows
color:var(--wp--preset--color--black);
background:var(--wp--preset--color--white);Selectors and braces are completed without you writing them.
Additional Block CSS is generally “added dynamically” (provided the post has that block)