Skip to content

Standardizing required theme CSS Variables #33180

@richtabor

Description

@richtabor

What problem does this address?

We need a standardized method for implementing CSS variables/properties across the board. We're getting there with #29568, but this references other areas of the theme that should be standardized, such as body background color and font sizes.

Why is this important?

Having a standardized system for variables that every theme will need, such as background, font families, etc will make switching themes much easier - as they'd all use the same variables. Plugins and other third party integrations can fit in aesthetically by referencing these CSS variables if they're standardized. That means they'll instantly look and feel as the theme's styles decided — instead of requiring custom CSS to override.

  • So what should be the appropriate prefix?
  • How do we ensure these are standardized?
  • Can we update themes such as Twenty Twenty to have the proper FSE prefixes, instead of --global, if --wp--custom-... is the appropriate method?
  • How do we better educate theme developers on what this standard is, so that we can build this next class of themes as intended?

Screenshots:

From Twenty Twenty One:
Screen Shot 2021-07-02 at 3 40 26 PM

From BlockBase:

Screen Shot 2021-07-02 at 3 40 55 PM

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions