Skip to content

Improve discoverability of "Additional CSS", use for editor education #73926

@mrwweb

Description

@mrwweb

What problem does this address?

The "Additional CSS" panel was recently hidden deeper in a menu of the Styles editor.

Additional CSS menu item in kebab menu of Styles panel

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)
  • @media queries including prefers-reduced-motion and print
  • 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: balance and text-wrap: pretty
  • CSS mask
  • Multiple backgrounds
  • background-blend-mode and mix-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:

WordPress 6.9 Site Editor panel with Additional CSS placed after Layout option. It uses a paint brush icon Additional CSS panel with new help text

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.json documentation 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything 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")[Status] In discussionUsed to indicate that an issue is in the process of being discussed[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions