How to add arbitrary custom CSS to a Wordpress Block Theme using Site Editor?

Question

When using a Block Theme then you can use the Site Editor, accessible via: Wordpress Dashboard > Appearance > Editor. — Introduced in Wordpress 5.9 on 2022-01-25.

1. Site Editor > Styles (right side panel) allows you to tweak global Styles (typography, colors, layout) and certain selected attributes of Blocks. And thereby alter the CSS which eventually comes out of the Styles Engine.

2. But how can I add arbitrary custom CSS to a Wordpress Block Theme? Analog to classical themes with customizer support (introduced in WordPress 3.4 2012-06-13) where you can go to: Dashboard > Appearance > Customize > Additional CSS.

Answer 1

In WordPress 6.1.1 (released 2022-11) this is not possible in the UI. But good news:

In Wordpress 6.2 (to be released somewhen March 2023) this will be possible! Was introduced as an experimental feature in Gutenberg 14.8 from 2022-12 (see video )

It works like this:

1. Wordpress Dashboard > Appearance > Editor
2. Open the Styles panel
3. In the panel you got a new section "Additional CSS".
4. There you can paste arbitrary CSS. (and its immediately rendered on the canvas nearby)