-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Improve discoverability of "Additional CSS", use for editor education #73926
Copy link
Copy link
Open
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")Related to the overarching Site Editor (formerly "full site editing")[Status] In discussionUsed to indicate that an issue is in the process of being discussedUsed to indicate that an issue is in the process of being discussed[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Metadata
Metadata
Assignees
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")Related to the overarching Site Editor (formerly "full site editing")[Status] In discussionUsed to indicate that an issue is in the process of being discussedUsed to indicate that an issue is in the process of being discussed[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Type
Fields
Give feedbackNo fields configured for issues without a type.
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.jsonand 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):.has-background,.alignfull,.alignwide,.is-layout-grid, etc..wp-block-column .wp-block-quote)@mediaqueries includingprefers-reduced-motionandprint:has(),:not();:nth-*(), etc.text-wrap: balanceandtext-wrap: prettybackground-blend-modeandmix-blend-modeThe 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:
Further thoughts:
theme.jsondocumentation for developers