Skip to content

Support ::placeholder CSS pseudo-element in theme.json #71382

@simison

Description

@simison

What problem does this address?

A good follow-up to adding form element support to theme.json would be adding ::placeholder CSS pseudo-element support and ability for blocks to opt into frontend UX to manipulate placeholder colour.

It's typical for different 3rd party form plugins to have placeholders in their form inputs:

Image

Theme.json support would allow themers and site builders to define styles (colour, typography) for the text without using CSS.

Adding UX would allow 3rd party plugins to simply opt in and have control at least for colour alongside other input style controls:

Image

Other style options might be useful, but colour seems most important, as otherwise text can often follow regular input value text styles.

UX for something like ::placeholder is more straightforward than adding UX for states like :hover, :visited, etc., which would have much more complex UX needs to allow previewing different states. See design exploration. Meawnwhile, adding :hover support just in theme.json should be simpler without considering UX.

What is your proposed solution?

  • Add theme.json support for ::placeholder element.
  • Add ability to opt into colour UX for placeholder with:
     supports: {
     	color: {
     		placeholder: true,
     	},
     }
    

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds Design FeedbackNeeds general design feedback.[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