-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
What problem does this address?
The "Additional CSS" panel was recently hidden deeper in a menu of the Styles editor.
I think this was both a mistake and a lost opportunity. Instead, I think the Additional CSS feature should be treated as a first-class citizen and used to educate site owners.
The "Additional CSS" Site Editor feature is a feature of "last resort" (h/t @westonruter) in many ways, because custom CSS overriding block styles is clearly a bad editor and developer experience.
However, Additional CSS is likely to also remain a core tool for any site owner that needs to go beyond the subset of CSS supported by the Site Editor. Even though theme.json and the Site Editor continue to increase their support of many choices, they will never come close to supporting everything a developer might need. At this moment that includes (but is far from limited to):
- Anything but the simplest hover/focus styles
- Styles targeting the presences of
.has-background,.alignfull,.alignwide,.is-layout-grid, etc. - Styles targeting blocks in blocks (e.g.
.wp-block-column .wp-block-quote) @mediaqueries includingprefers-reduced-motionandprint- 3rd-party blocks that don't support as much styling as core blocks
- Pseudo elements
- Most form elements
- Any CSS logic with
:has(),:not();:nth-*(), etc. - Tables
- Many child elements of blocks
text-wrap: balanceandtext-wrap: pretty- CSS mask
- Multiple backgrounds
background-blend-modeandmix-blend-mode- CSS transforms
- CSS transitions
The point being: Additional CSS is and will remain a necessary feature for many sites with even just a few small design needs that exceed the Site Editor's capabilities.
What is your proposed solution?
I believe Additional CSS should be pulled out of the hidden menu, places last to emphasize it's intended use, and then provided with a message to educate users. That could look something like this:
Suggested text from screenshot:
Custom CSS is a powerful customization tool. For best results, use existing settings for colors, fonts, block styles, and more before writing custom CSS.
Further thoughts:
- I think that suggested help text could be improved upon further by linking directly to the settings panels mentioned, and including a link to
theme.jsondocumentation for developers - Maybe this should even have a Theme File Editor-style warning the first time it's opened.
- I could imagine a warning that appears if editors write CSS with simple block selectors.