Form elements in Global Styles - iteration for WP 7.2

Overall goal

Let users style common form elements consistently from Global Styles, without writing custom CSS or editing theme.json by hand.

The button, textInput, and select elements are already supported in theme.json. This iteration exposes that work in the editor, adds the missing label element, and improves support for interactive input states.

Prior art: #34198.

Scope for this release

Register the label element in theme.json #81647 (Global styles: Register <label> as element #81160)
Expose form elements in Global Styles typography and color settings #81648 (Global Styles: Expose additional elements in Typography and Colors #80852)
Support ::placeholder CSS pseudo-element in theme.json #71382 (Global Styles: Add pseudo-selector support for text inputs #71634)
WP 7.0 does not support pseudo-selectors for the textInput, select, core/query-pagination-next, core/query-pagination-previous #76534 (Global Styles: Add pseudo-selector support for text inputs #71634, Global Styles: Add pseudo-selector support for select elements #81644)
Add a Form controls section to Global Styles #81649 (Global Styles: List elements alongside blocks #81645)
Preview the selected state on element screens (Global Styles: Preview the selected state on element screens #83787)

Nice to have

For context, a related conversation is #34141 (comment)

I believe that this has been solved for buttons?
How can we move this forward and discuss the other form elements?

I believe that this has been solved for buttons? How can we move this forward and discuss the other form elements?

I think no one has picked anything up, but I don't think there's any blockers besides wanting to work on it? Working on the input or labels would be great, it would give themers and users much better control over the search block as a whole. Also, when we upgrade the comments form to a proper block it would be great to have them all be made with elements from the start.

All form element need a lot more thinking before being considered for the elements API, including how they are going to be controlled, and how they are going to be leveraged by block authors.

I believe that this has been solved for buttons?

I'd love to see any docs around this?

I believe that this has been solved for buttons?

I'd love to see any docs around this?

Elements are documented here

+1

This is holding me back.

I don't see a roadmap to keep this on track.

HTML Form elements

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

Inputs?

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

The select element

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Fieldset

  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>

Optgroup

<label for="cars">Choose a car:</label>
<select  name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

@t-hamano

@t-hamano Hi, wasn't the password protected form fixed in core in 7.1? Then we should close 61353.

Hi, wasn't the password protected form fixed in core in 7.1? Then we should close 61353.

Yes, that should have been fixed by Changeset 62754.

@MaggieCabrera

@MaggieCabrera can you please provide an update on where this work stands, especially as we get close to beta 1 on the 20th? It’s helpful to get a latest look at these changes and have more updates along the way.

@sarthaknagoshe2002

7.2 update

Labels are now a theme.json element (#81160, thanks @sarthaknagoshe2002), and form elements show up in Typography and Colors (#80852).

Everything below is aiming for Beta 1 on October 20. If you can help review, please start with these two:

Good to have:

Search block colors (#65343) and the File block button (#57314) move to 7.3, since their PRs haven't changed in a while.

Navigation Menu

Repository navigation

Form elements in Global Styles - iteration for WP 7.2 #34198

Overall goal

Scope for this release

Nice to have

HTML Form elements

Inputs?

The select element

Fieldset

Optgroup

13 remaining items

7.2 update

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Form elements in Global Styles - iteration for WP 7.2 #34198

Description

Overall goal

Scope for this release

Nice to have

Activity

oandregal commented on Aug 20, 2021

oandregal commented on Aug 20, 2021

MaggieCabrera commented on Aug 20, 2021

oandregal commented on Aug 23, 2021

overclokk commented on Oct 16, 2021

carolinan commented on Aug 8, 2022

MaggieCabrera commented on Aug 23, 2022

mtias commented on Sep 10, 2022

senadir commented on Sep 10, 2022

MaggieCabrera commented on Sep 12, 2022

dkjensen commented on Feb 2, 2023

mikeritter commented on Feb 9, 2023

HTML Form elements

Inputs?

The select element

Fieldset

Optgroup

13 remaining items

carolinan commented on Aug 18, 2026

t-hamano commented on Aug 18, 2026

annezazu commented on Oct 12, 2026

MaggieCabrera commented on Oct 14, 2026

7.2 update

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions