From 4212612f6b43bf8e1209a9824909d4ff851cc067 Mon Sep 17 00:00:00 2001 From: Alin Clamba Date: Wed, 6 May 2026 00:13:24 +0300 Subject: [PATCH] Forms: Scale checkbox input with custom font sizes (FORMS-682) Anchor the SCSS rule that gives the checkbox input `font-size: inherit` to the field's own wrapper class (`grunion-field-checkbox-wrap`) instead of `.is-style-list`. The latter never serialized to post content for singular Checkbox (set inside `__unstableMarkNextChangeAsNotPersistent` in `field-checkbox/edit.js`), so the selector never matched in the rendered DOM and the input kept the browser-default font size. The same selector group covers singular Consent; in normal usage its className gets flushed by subsequent `setAttributes` calls and the bug rarely surfaces there, but the fix removes that fragility too. --- .../fix-forms-checkbox-text-size-scaling | 4 ++++ .../forms/src/contact-form/css/grunion.scss | 16 ++++++++-------- 2 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling diff --git a/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling b/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling new file mode 100644 index 000000000000..0ebc9fddf2a5 --- /dev/null +++ b/projects/packages/forms/changelog/fix-forms-checkbox-text-size-scaling @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Forms: Scale the checkbox input proportionally when a custom font size is set. diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 279a908fc0e6..ce064f30ada0 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1285,8 +1285,8 @@ on production builds, the attributes are being reordered, causing side-effects font-size: var(--jetpack--contact-form--font-size); } -.contact-form .is-style-list input.consent, -.contact-form .is-style-list input.checkbox, +.contact-form .grunion-field-consent-wrap input.consent, +.contact-form .grunion-field-checkbox-wrap input.checkbox, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple, .contact-form .grunion-field-wrap:not(.is-style-plain) input.radio { position: relative; @@ -1340,8 +1340,8 @@ on production builds, the attributes are being reordered, causing side-effects } -.contact-form .is-style-list input.consent, -.contact-form .is-style-list input.checkbox, +.contact-form .grunion-field-consent-wrap input.consent, +.contact-form .grunion-field-checkbox-wrap input.checkbox, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple { &:not(.is-style-button):checked { @@ -1356,8 +1356,8 @@ on production builds, the attributes are being reordered, causing side-effects display: none; } -.contact-form .is-style-list input.consent::before, -.contact-form .is-style-list input.checkbox::before, +.contact-form .grunion-field-consent-wrap input.consent::before, +.contact-form .grunion-field-checkbox-wrap input.checkbox::before, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple::before { position: absolute; width: 0.25em; @@ -1379,8 +1379,8 @@ on production builds, the attributes are being reordered, causing side-effects left: 0; } -.contact-form .is-style-list input.consent:checked::before, -.contact-form .is-style-list input.checkbox:checked::before, +.contact-form .grunion-field-consent-wrap input.consent:checked::before, +.contact-form .grunion-field-checkbox-wrap input.checkbox:checked::before, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked::before { scale: 1; opacity: 1;