Backport: add support for text inputs on the elements API

[onemaggie]

Backport for ​https://github.com/WordPress/gutenberg/pull/70378

What?

Part of ​https://github.com/WordPress/gutenberg/issues/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

# Enable the Form block under the experiments section
# Insert a Form block, add inputs of all kinds to it
# Edit your theme.json to style the inputs, this is how I did it on my active theme:

"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)"
				}
			},
}

Trunk	This PR with theme.json changes	This PR with no theme.json changes

Trac ticket: https://core.trac.wordpress.org/ticket/63878

[rollybueno]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/9600

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
• Browser: Chrome 139.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.5.0
  • Test Reports 1.2.0

Steps

1. Enable Gutenberg → Experiments → Blocks: add Form and input blocks.
2. Create a new page. Insert one Form block and add text, email, url, password, search, tel, textarea, and a submit button.
3. Visit the page on the front-end.
4. In the active theme add the following to theme.json under elements, then refresh:

  "elements": {
    "textInput": {
      "border": {
        "radius": "0",
        "style": "solid",
        "width": "1px",
        "color": "red"
      },
      "color": {
        "text": ""
      },
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--inter)"
      }
    }
  }

✖️ - the patch does not work

Additional Notes

• Used https://schemas.wp.org/trunk/theme.json as the $schema
• Got an error Property textInput is not allowed

• No style updates on the input field

Supplemental Artifacts

Before:

After:

[rollybueno]

Hey @onemaggie,

I wasn't able to make your patch working on my end. Can you check my testing report https://core.trac.wordpress.org/ticket/63878#comment:3 and let me know what I missed?

Interestingly, I got the Property textInput is not allowed error when adding it under the elements key.

Cheers!

[wildworks]

Interestingly, I got the Property textInput is not allowed error when adding it under the elements key.

The schema should be defined correctly. Could you provide the complete theme.json code you used for testing?

[rollybueno]

Replying to wildworks:

Interestingly, I got the Property textInput is not allowed error when adding it under the elements key.

The schema should be defined correctly. Could you provide the complete theme.json code you used for testing?

@wildworks - I just added it under styles -> elements in 2025 theme. This issue actually happens because 2025 is using ​https://schemas.wp.org/wp/6.7/theme.json, but that error is gone if I update to use ​https://schemas.wp.org/trunk/theme.json. I thought I was using trunk on my first test report.

New test result seems confirming this works, but only if the schema is using trunk version. Best if few more reports can confirm:

[wildworks]

This issue actually happens because 2025 is using ​https://schemas.wp.org/wp/6.7/theme.json, but that error is gone if I update to use ​https://schemas.wp.org/trunk/theme.json.

Yes, textInput will not be allowed unless you reference the latest schema (trunk/theme.json).

[wildworks]

This ticket is a backport from Gutenberg and should be addressed in the 6.9 release.

[scruffian]

In 61023:

Editor: Add support for text inputs to theme.json.

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: ​https://github.com/WordPress/gutenberg/pull/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.

[cbravobernal]

In 61024:

Global styles: add element support for text related inputs.

Adds elements support to text based form inputs so a theme can style consistently how forms should look like regardless of the plugins/blocks installed.

Props onemaggie, mukesh27, sabernhardt, scruffian, get_dave, ocean90, mikachan, wildworks.

Fixes #63878.

[scruffian]

In 61031:

Editor: Add support for select elements to theme.json.

Adds support for the select element in theme.json so that theme builders and extenders can be style select elements consistently.

We are targeting the select HTML element 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: ​https://github.com/WordPress/gutenberg/pull/70379.

Example usage:

	"elements": {
		"select": {
			"color": {
				"text": "red",
				"background": "blue"
			}
		}
	}

Props onemaggie, joen, get_dave, wildworks, ocean90, mikachan, poena, SirLouen, tusharbharti, yashjawale, abcd95.
Fixes #63555. See #63878.

[rollybueno]

Hi @scruffian @cbravobernal - I was not included in the props for testing here which I believe is a mistake 😅. Can you please add missed props?

[scruffian]

Sorry @rollybueno, that's now been done.

[wildworks]

It has been reported that this feature does not work in 6.9 Beta1.

• ​https://github.com/WordPress/gutenberg/pull/70378#issuecomment-3431677898
• ​https://github.com/WordPress/gutenberg/issues/72568

The patch should have been committed via [61023] or [61024], but the change doesn't seem to be reflected. Let's see what's going on.

​https://github.com/WordPress/wordpress-develop/blob/871fd0e997e411221b1b63352f753ab5653eb6f0/src/wp-includes/class-wp-theme-json.php#L632-L633

[davidbaumwald]

In 61046:

Editor: Re-add support for text inputs to theme.json.

Re-adds support for text input elements to theme.json originally included in [61023] that was accidently removed in a subsequent commit.

This change also include the updated docblock for @since 6.9.0.

Follow-up to [61023], [61031].

Props leemon, wildworks, ella, scruffian, cbravobernal, desrosj, davidbaumwald.
Fixes #63878.