Forms: Prevent custom label font size from preventing scaling in animated and outline block styles (#42248)

* Forms: Fix relative font sizes for animated and outline block styles

* changelog

* Switch to CSS vars to bridge markup discrepancy between editor and frontend

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/14026335843

Upstream-Ref: Automattic/jetpack@44d1784

Author: talldan

CHANGELOG.md

@@ -15,6 +15,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Fixed
 - Components: Add __next40pxDefaultSize to controls, preventing deprecation notices.
+- Forms: Prevent custom label font sizes preventing animated label font size reduction
 - Placeholder should always display if it's a non-empty string
 
 ## [0.43.0] - 2025-03-18

dist/blocks/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '8220c11ec0c3dbb316fe');
+<?php return array('dependencies' => array('jetpack-connection', 'jetpack-script-data', 'lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '5294834b327d250a838c');

dist/blocks/editor.css

@@ -347,7 +347,7 @@ public function render() {
 			$this->label_styles .= 'color: ' . esc_attr( $this->get_attribute( 'labelcolor' ) ) . ';';
 		}
 		if ( ! empty( $this->get_attribute( 'labelfontsize' ) ) ) {
-			$this->label_styles .= 'font-size: ' . esc_attr( $this->get_attribute( 'labelfontsize' ) ) . ';';
+			$this->label_styles .= '--jetpack--contact-form--label--font-size:' . esc_attr( $this->get_attribute( 'labelfontsize' ) ) . ';';
 		}
 		if ( is_numeric( $this->get_attribute( 'labellineheight' ) ) ) {
 			$this->label_styles .= 'line-height: ' . (int) $this->get_attribute( 'labellineheight' ) . ';';

dist/blocks/editor.js

@@ -107,6 +107,10 @@
 	flex: 1;
 }
 
+.contact-form label[style*="--jetpack--contact-form--label--font-size"] {
+	font-size: var(--jetpack--contact-form--label--font-size);
+}
+
 .contact-form .grunion-checkbox-multiple-options,
 .contact-form .grunion-radio-options {
 	display: flex;
@@ -522,6 +526,16 @@ on production builds, the attributes are being reordered, causing side-effects
 	font-size: 0.8em;
 }
 
+/* The following is scoped by the presence of the custom font size CSS var to avoid needing conditional fallback within the var() */
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:focus ~ .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-field.has-placeholder ~ .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options ~ .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options ~ .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"] {
+	font-size: calc(var(--jetpack--contact-form--label--font-size) * 0.8);
+}
+
 .contact-form .is-style-outlined .grunion-field-wrap > input,
 .contact-form .is-style-outlined .grunion-field-wrap > textarea,
 .contact-form .is-style-outlined .grunion-field-wrap select
@@ -590,6 +604,14 @@ on production builds, the attributes are being reordered, causing side-effects
 	top: calc(2px + var(--jetpack--contact-form--border-size));
 }
 
+/* The following is scoped by the presence of the custom font size CSS var to avoid needing conditional fallback within the var() */
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:focus ~ .animated-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field:not(:placeholder-shown) ~ .animated-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-animated .grunion-field-wrap .grunion-field.has-placeholder ~ .animated-label__label[style*="--jetpack--contact-form--label--font-size"],
+.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label[style*="--jetpack--contact-form--label--font-size"] {
+	font-size: calc(var(--jetpack--contact-form--label--font-size) * 0.75);
+}
+
 .contact-form .is-style-animated .grunion-field-wrap .grunion-checkbox-multiple-options ~ .animated-label__label,
 .contact-form .is-style-animated .grunion-field-wrap .grunion-radio-options ~ .animated-label__label {
 	top: 0;