Consider adding form elements to the theme.json elements block

[MaggieCabrera]

What problem does this address?

A theme will want to have a specific design for its form elements that is consistent across blocks (be them core blocks or third-party). Ideally, if the user wants to alter this design, their changes should expand through all affected blocks from Global Styles, not just one by one (if I want my buttons to be red, I want ALL buttons on the site to be red, not just the button block).

Right now some of the blocks that have form elements don't let you style them or they do so very limitedly. Examples of these are the Search Block, the File Block and the Post comments form Block. The only way for a theme to make them consistent with each other is via CSS.

What is your proposed solution?

We could have buttons, inputs, textareas, labels, selects... be styled within styles.elements on theme.json and have the blocks using them use these styles as presets and in the future surface this in the Global Styles sidebar for the user to change too.

/cc @oandregal @mtias @youknowriad

[oandregal]

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

[carolinan]

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

[MaggieCabrera]

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.

[mtias]

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.

[senadir]

I believe that this has been solved for buttons?

I'd love to see any docs around this?

[MaggieCabrera]

I believe that this has been solved for buttons?

I'd love to see any docs around this?

Elements are documented here

[dkjensen]

+1

[mikeritter]

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>

[mikeritter]

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.

Suggested Pathway

1. Identify sensible default properties to override for general input element (i.e., user agent defaults, common properties, states)
2. Identify layout patterns for grouping label and input elements (ul, div, label)
3. Repeat 1 for label then apply wrapper style to label
4. Apply to Search block
5. Apply to Comments block

[mikeritter]

I just found the Jetpack Forms Block with much of this heavy lifting built in. Here is a link to the GitHub repo for Form block.

[scruffian]

I have an idea for this here: #51337