Global styles: add :placeholder pseudo-element support for textInput
#73692
+8
−2
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #71382
Adds support for styling
:placeholderintextInputelements (added in #70378)What?
Closes
Why?
Currently, the
:placeholderpseudo element cannot be set viatheme.jsonbecause it is not included in theVALID_ELEMENT_PSEUDO_SELECTORSlist. 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_SELECTORSarray inclass-wp-theme-json-gutenberg.phpby adding:placeholder. This change allows the:placeholderpseudo-class to be used directly withintheme.jsonfiles.Testing Instructions
theme.json.:focus-visiblepseudo-class intheme.json. For example:{ "styles": { "elements": { "textInput": { ":placeholder": { "color": { "text": "red" } } }, } } }Testing Instructions for Keyboard
Screenshots or screencast