[wp-trac] [WordPress Trac] #63878: Backport: add support for text inputs on the elements API

[WordPress Trac]

#63878: Backport: add support for text inputs on the elements API
--------------------------+-----------------------------
 Reporter:  onemaggie     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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 =||
 || [[Image(https://github.com/user-
 attachments/assets/e40269bd-5764-4534-a7e4-7d75c6c6bd30)]] ||
 [[Image(https://github.com/user-attachments/assets/0de0fbe4-a1a4-4849
 -a9df-90ca3a757cab)]] || [[Image(https://github.com/user-
 attachments/assets/9c82f929-5aed-428e-a1ac-0567cd56a3ab)]] ||

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63878>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform