This issue stems from the recent FSE call for testing to create a custom 404 page. For my 404 page, I ended up adding several elements via the Customizer (accessible via Appearances > Themes > Customize), such as a site background image. I imagine that most of what I added will eventually be handled by Global Styles but as a designer, there’s always going to be something that could be tweaked a bit further.

There could be input form in the Global Styles panel for custom CSS:

This mockup includes some basic syntax validation, but it can be as little as what is being discussed here, and doesn't necessarily need the row highlight.

Note the details:

• Full height panel
• Fullscreen button to open in a modal
• Ellipsis menu that if need be can contain a link to "read more about CSS"

Issue updated Jan 20.

Tasks

• Add styles.css to theme.json schema - Global Styles: Add a css style to theme.json to allow setting of custom css strings #46255
• Add custom CSS input option to global styles to site editor - Global styles: add custom CSS panel to site editor #46141
• Verify security for full input and display flow of custom CSS strings
• Move custom css to its own inline style generation method and combine with customizer CSS #47396
• Put the "Read more about CSS" link into an ellipsis menu, and allow the CSS panel to flex all the way to the bottom
• Add inline code completion and linting to input box similar to customizer - moved to separate issue
• Look at the possibility of adding a direct link to additional CSS in the site editor menu as classic themes do in the appearance menu - design decision made not to follow this up
• See if there is a way to surface the validation warnings to the user - currently these only show in the console - Add validation message to custom CSS input #47132
• Provide list of blocks that have had custom CSS applied at the block level - moved to separate issue
• Remove duplication of custom CSS in hybrid themes - not being followed up at this stage