Global styles: add element support for text related inputs

backport-changelog/6.9/9600.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9600
+
+* https://github.com/WordPress/gutenberg/pull/70378

lib/class-wp-theme-json-gutenberg.php

@@ -598,20 +598,21 @@ class WP_Theme_JSON_Gutenberg {
 	 * @var string[]
 	 */
 	const ELEMENTS = array(
-		'link'    => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
-		'heading' => 'h1, h2, h3, h4, h5, h6',
-		'h1'      => 'h1',
-		'h2'      => 'h2',
-		'h3'      => 'h3',
-		'h4'      => 'h4',
-		'h5'      => 'h5',
-		'h6'      => 'h6',
+		'link'      => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
+		'heading'   => 'h1, h2, h3, h4, h5, h6',
+		'h1'        => 'h1',
+		'h2'        => 'h2',
+		'h3'        => 'h3',
+		'h4'        => 'h4',
+		'h5'        => 'h5',
+		'h6'        => 'h6',
 		// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
-		'button'  => '.wp-element-button, .wp-block-button__link',
+		'button'    => '.wp-element-button, .wp-block-button__link',
 		// The block classes are necessary to target older content that won't use the new class names.
-		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
-		'cite'    => 'cite',
-		'select'  => 'select',
+		'caption'   => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
+		'cite'      => 'cite',
+		'select'    => 'select',
+		'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url])',
 	);
 
 	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(

packages/block-library/src/form-input/style.scss

@@ -34,7 +34,7 @@
 	width: fit-content;
 }
 
-.wp-block-form-input__input {
+:where(.wp-block-form-input__input) {
 	padding: 0 0.5em;
 	font-size: 1em;
 	margin-bottom: 0.5em;
@@ -54,7 +54,8 @@
 	&[type="week"] {
 		min-height: 2em;
 		line-height: 2;
-		border: 1px solid;
+		border-width: 1px;
+		border-style: solid;
 	}
 }
 

packages/block-library/src/post-comments-form/style.scss

@@ -1,16 +1,16 @@
 // Allow these default styles to be overridden by global styles.
-:where(.wp-block-post-comments-form) {
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:not([type="submit"])) {
+	border-width: 1px;
+	border-style: solid;
+	border-color: $gray-600;
+	font-size: 1em;
+	font-family: inherit;
+}
 
-	textarea,
-	input:where(:not([type="submit"]):not([type="checkbox"])) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:where(:not([type="submit"]):not([type="checkbox"]))) {
+	padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 }
 
 .wp-block-post-comments-form {

packages/block-library/src/search/style.scss

@@ -37,21 +37,6 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	width: 100%;
 }
 
-.wp-block-search__input {
-	padding: $grid-unit-10;
-	flex-grow: 1;
-	margin-left: 0;
-	margin-right: 0;
-	min-width: 3rem;
-	border: 1px solid $gray-600;
-	// !important used to forcibly prevent undesired application of
-	// text-decoration styles on the input field.
-	text-decoration: unset !important;
-
-	// Hides a redundant extra search icon on Mobile Safari.
-	appearance: initial;
-}
-
 .wp-block-search.wp-block-search__button-only {
 	.wp-block-search__button {
 		margin-left: 0;
@@ -104,12 +89,26 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	letter-spacing: inherit;
 	text-transform: inherit;
 	font-style: inherit;
+	padding: $grid-unit-10;
+	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
+	// !important used to forcibly prevent undesired application of
+	// text-decoration styles on the input field.
+	text-decoration: unset !important;
+
+	// Hides a redundant extra search icon on Mobile Safari.
+	appearance: initial;
 }
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
-	border: 1px solid $gray-600;
+	border-width: 1px;
+	border-style: solid;
+	border-color: $gray-600;
 	background-color: $white;
 	box-sizing: border-box;
 

packages/blocks/src/api/constants.js

@@ -285,6 +285,8 @@ export const __EXPERIMENTAL_ELEMENTS = {
 		'.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
 	cite: 'cite',
 	select: 'select',
+	textInput:
+		'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url])',
 };
 
 // These paths may have three origins, custom, theme, and default,

schemas/json/theme.json

@@ -1839,6 +1839,9 @@
 				},
 				"select": {
 					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				"textInput": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
 				}
 			},
 			"additionalProperties": false