Skip to content

Conversation

@simison
Copy link
Member

@simison simison commented Dec 2, 2025

Resolves #71382

Adds support for styling :placeholder in textInput elements (added in #70378)

What?

Closes

Why?

Currently, the :placeholder pseudo element cannot be set via theme.json because it is not included in the VALID_ELEMENT_PSEUDO_SELECTORS list. This limitation makes it difficult to implement consistent styles for form inputs in plugins across the theme, and themers need to rely on custom CSS.

Later on, it would be good to add UI for allowing modification of the style directly in the editor.

How?

The PR updates the VALID_ELEMENT_PSEUDO_SELECTORS array in class-wp-theme-json-gutenberg.php by adding :placeholder. This change allows the :placeholder pseudo-class to be used directly within theme.json files.

Testing Instructions

  1. Apply this PR.
  2. Create or edit a theme that uses theme.json.
  3. Add a style using the :focus-visible pseudo-class in theme.json. For example:
{
	"styles": {
		"elements": {
			"textInput": {
				":placeholder": {
					"color": {
						"text": "red"
					}
				}
			},
		}
	}
}

Testing Instructions for Keyboard

Screenshots or screencast

Before After

@simison simison added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Dec 2, 2025
@simison
Copy link
Member Author

simison commented Dec 2, 2025

There's some work already in #71634 so I'm closing this one :-)

@simison simison closed this Dec 2, 2025
@simison simison deleted the update/global-styles-placeholder branch December 2, 2025 11:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants