Global styles: add element support for text related inputs #70378
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +95 B (0%) Total Size: 1.92 MB
ℹ️ View Unchanged
|
Contributor
|
Please don't forget to submit a core backports PR and add a changelog entry to this PR. See https://github.com/WordPress/gutenberg/blob/trunk/backport-changelog/readme.md |
Contributor
Author
yes, it was my plan as soon as I had technical feedback on the approach, thanks for the reminder! |
94a9a09 to
2c75a53
Compare
Contributor
Author
|
I need to update the description of the PR but after a long discussion with @mtias about what the best way forward we think it's best if we don't add an extra class we need to commit to maintaining in the future. Targeting the inputs directly instead is very similar to what we are already doing, if you look at the file changes of this PR, we are just moving the styles from stylesheets to theme.json, and the specificity stays the same, but we are adding the benefit of consistency between blocks (should we want to!) both core ones and third party ones. A few screenshots of my test site with and without the theme.json changes pointed in the description:
|
Contributor
|
As commented on the closed PR, I am still concerned that not all text inputs needs the same styling. |
Contributor
Author
I think those can still be targeted specifically, the same way it happens with heading. If you check the implementation on lib/theme.json you can see that I've done just that. The idea/goal is that we get the form block out of the experiment (when they are ready) so 3rd party blocks can just extend them, and if a specific block needs a different style, we just use the cascade. I think elements should be an abstraction, so it wouldn't make sense to make an element specifically for the textarea, I think it's better to override the styles that don't work for it |
d68d688 to
8578ef0
Compare
8578ef0 to
28ace14
Compare
MaggieCabrera
commented
Jul 10, 2025
MaggieCabrera
commented
Jul 10, 2025
MaggieCabrera
commented
Jul 10, 2025
Contributor
Author
|
This should be ready for review now |
mikachan
approved these changes
Sep 3, 2025
Member
mikachan
left a comment
There was a problem hiding this comment.
This is testing well for me now:
🚢 !
Contributor
|
HEY! This is big! Kudos folks! 👏 |
Contributor
|
It might be advantageaous to get this added to Gutenberg 21.6 release to testing starts two weeks earlier? What do you think @cbravobernal - it missed the RC1 by just a few hours. it would also e great to test it together with the already merged PR for select and dropdown elements. |
Contributor
Sure. Let's backport it. |
Contributor
|
I just cherry-picked this PR to the release/21.6 branch to get it included in the next release: 3f75e73 |
cbravobernal
pushed a commit
that referenced
this pull request
Sep 9, 2025
* add textInput to the elements API and implement it to the experimental form block, updated the schema too * linting changes * removed the class and target tags directly * moved styles from blocks into theme.json * add a color for the borders * move styles for search block * linting and moving styles to the specific blocks * removed duplicated selector * missing typography styles for post comments block * backport file * Update lib/class-wp-theme-json-gutenberg.php Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * moved styles back to css but with lower specificity * added basic styles for the text inputs * Revert "added basic styles for the text inputs" This reverts commit 3d393af. * fix commit number * separate CSS rules to make it work with specificity * format php --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ocean90 <ocean90@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org>
|
@MaggieCabrera what about pseudo-selectors, like |
Contributor
Author
This would be a one liner to implement, adding this new element to the array that the button element uses to add support for pseudoselectors, but I'd wait for this recently merged PR to be tested out in the wild before adding extras to it. |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Oct 21, 2025
Adds support for text input elements to theme.json so that theme builders and extenders can be style text input elements consistently. Text input elements are `textarea`, and `input` with type `email`, `number`, `password`, `search`, `text`, `tel` and `url`. We are targeting the HTML elements directly rather than adding a CSS class, as we do for other elements that theme.json supports. This commit adds no extra styling unless a theme opts in to use this and the specificity of any generated CSS with the element is 0. See original Gutenberg PR: WordPress/gutenberg#70378. Example usage: {{{ "elements": { "textInput": { "border": { "radius": "0", "style": "solid", "width": "1px", "color": "red" }, "color": { "text": "var(--wp--preset--color--theme-2)" }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } } }}} Reviewed by mukesh27, scruffian. Merges [9600] to the 6.9 branch. Props onemaggie, mukesh27, sabernhardt, joen, get_dave, wildworks, ocean90, mikachan, poena. Fixes #63878. See #63555. git-svn-id: https://develop.svn.wordpress.org/trunk@61023 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Oct 21, 2025
Adds support for text input elements to theme.json so that theme builders and extenders can be style text input elements consistently. Text input elements are `textarea`, and `input` with type `email`, `number`, `password`, `search`, `text`, `tel` and `url`. We are targeting the HTML elements directly rather than adding a CSS class, as we do for other elements that theme.json supports. This commit adds no extra styling unless a theme opts in to use this and the specificity of any generated CSS with the element is 0. See original Gutenberg PR: WordPress/gutenberg#70378. Example usage: {{{ "elements": { "textInput": { "border": { "radius": "0", "style": "solid", "width": "1px", "color": "red" }, "color": { "text": "var(--wp--preset--color--theme-2)" }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } } }}} Reviewed by mukesh27, scruffian. Merges [9600] to the 6.9 branch. Props onemaggie, mukesh27, sabernhardt, joen, get_dave, wildworks, ocean90, mikachan, poena. Fixes #63878. See #63555. Built from https://develop.svn.wordpress.org/trunk@61023 git-svn-id: http://core.svn.wordpress.org/trunk@60359 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Oct 21, 2025
Adds support for text input elements to theme.json so that theme builders and extenders can be style text input elements consistently. Text input elements are `textarea`, and `input` with type `email`, `number`, `password`, `search`, `text`, `tel` and `url`. We are targeting the HTML elements directly rather than adding a CSS class, as we do for other elements that theme.json supports. This commit adds no extra styling unless a theme opts in to use this and the specificity of any generated CSS with the element is 0. See original Gutenberg PR: WordPress/gutenberg#70378. Example usage: {{{ "elements": { "textInput": { "border": { "radius": "0", "style": "solid", "width": "1px", "color": "red" }, "color": { "text": "var(--wp--preset--color--theme-2)" }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } } }}} Reviewed by mukesh27, scruffian. Merges [9600] to the 6.9 branch. Props onemaggie, mukesh27, sabernhardt, joen, get_dave, wildworks, ocean90, mikachan, poena. Fixes #63878. See #63555. Built from https://develop.svn.wordpress.org/trunk@61023 git-svn-id: https://core.svn.wordpress.org/trunk@60359 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Contributor
|
Hello, I'm encountering an issue while testing this new feature in WordPress 6.9 beta1. The styling for text input elements, defined in I've tested this on two different themes:
I added the following to the Styling for other elements (like Am I the only one? |
|
Contributor
|
@mrleemon thank you so much for reporting. Would you mind adding your details to the issue opened by @EldarAgalarov so we have it all in one place? |
Contributor
|
This may be due to a backport from Gutenberg to core not being completed properly, see here. |
Contributor
|
A fix was committed to Core in https://core.trac.wordpress.org/changeset/61046. @EldarAgalarov If you have a moment, could you connect your GitHub account to your wordpress.org one? This change is slated to be included in the upcoming WordPress 6.9 release on December 2nd, and it would be great if we could give you attribution by mentioning you on the credits screen. You can find more details on how contributions are tracked and how connecting GitHub accounts helps in this post on the Make WordPress Core blog. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Part of #34198
This PR adds elements support to text based form inputs. This PR also updates the experimental form block and the comments block to implement this.
Why?
So a theme can style consistently how forms should look like regardless of the plugins/blocks installed (if they opt in this new API)
This also opens the possibility to style the new form input blocks more granularly while making use of block tools instead of CSS, opening the option for UI controls in the future if we so desire
How?
By allowing styling of text based inputs using the elements API
Testing Instructions
/cc @WordPress/block-themers