Global styles: Register <label> as element

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -110,6 +110,7 @@ Settings related to colors.
 | heading | Allow users to set heading colors in a block. | `boolean` | `true` |
 | button | Allow users to set button colors in a block. | `boolean` | `true` |
 | caption | Allow users to set caption colors in a block. | `boolean` | `true` |
+| label | Allow users to set label colors in a block. | `boolean` | `true` |
 
 ---
 

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

@@ -843,6 +843,7 @@ private static function sanitize_viewport_settings( $viewport_settings ) {
 		// 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',
+		'label'     => 'label',
 		'select'    => 'select',
 		'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url])',
 	);

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

@@ -3,8 +3,6 @@
 	box-sizing: border-box;
 }
 
-.wp-block-archives-dropdown {
-	label {
-		display: block;
-	}
+:where(.wp-block-archives-dropdown label) {
+	display: block;
 }

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

@@ -14,8 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
-	& .wp-block-categories__label:not(.screen-reader-text) {
-		width: 100%;
-		display: block;
-	}
+}
+:where(.wp-block-categories__label:not(.screen-reader-text)) {
+	width: 100%;
+	display: block;
 }

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

@@ -1,4 +1,4 @@
-.wp-block-form-input__label {
+:where(.wp-block-form-input__label) {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -30,7 +30,7 @@
 	}
 }
 
-.wp-block-form-input__label-content {
+:where(.wp-block-form-input__label-content) {
 	width: fit-content;
 }
 

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

@@ -59,13 +59,11 @@
 		}
 	}
 
-	.comment-form-author,
-	.comment-form-email,
-	.comment-form-url {
-		label {
-			display: block;
-			margin-bottom: 0.25em;
-		}
+	:where(.wp-block-post-comments-form .comment-form-author label),
+	:where(.wp-block-post-comments-form .comment-form-email label),
+	:where(.wp-block-post-comments-form .comment-form-url label) {
+		display: block;
+		margin-bottom: 0.25em;
 	}
 
 	.comment-form-cookies-consent {

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

@@ -37,7 +37,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	max-width: 100%;
 }
 
-.wp-block-search__label {
+:where(.wp-block-search__label) {
 	width: 100%;
 }
 

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

@@ -1,7 +1,5 @@
-.wp-block-search {
-	.wp-block-search__label {
-		font-weight: bold;
-	}
+:where(.wp-block-search .wp-block-search__label) {
+	font-weight: bold;
 }
 
 .wp-block-search__button {

packages/blocks/src/api/constants.ts

@@ -307,6 +307,7 @@ export const __EXPERIMENTAL_ELEMENTS: Record< string, string > = {
 	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',
+	label: 'label',
 	select: 'select',
 	textInput:
 		'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url])',

schemas/json/theme.json

@@ -264,6 +264,11 @@
 							"description": "Allow users to set caption colors in a block.",
 							"type": "boolean",
 							"default": true
+						},
+						"label": {
+							"description": "Allow users to set label colors in a block.",
+							"type": "boolean",
+							"default": true
 						}
 					},
 					"additionalProperties": false
@@ -2300,6 +2305,9 @@
 						}
 					]
 				},
+				"label": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
 				"select": {
 					"allOf": [
 						{