Forms: options block layout tweaks #43531

ramonjd · 2025-05-20T05:45:17Z

Proposed changes:

Important

This PR's base is #42890

Fixes: https://github.com/Automattic/jetpack-roadmap/issues/2501

This PR:

Updates CSS for radio and checkbox options to use consistent alignment (JETPACK-373)
Applies legacy border width to --jetpack--contact-form--border-size now that we have --jetpack--contact-form--border-*-size to handle global styles. This ensures legacy forms use their original values.
Applies padding to options blocks where they have a border, including checking for global styles
Only applies wp-block-jetpack-options where the inner block exists. This makes the implementation consistent with wp-block-jetpack-input

TODO

Update tests

Testing instructions:

For the checkbox layout

Create a default form with some multi fields (checkbox and radio). Play around with the option text length and font size.
Ensure that the option input aligns with the text at the top of the parent container. There will be a pixel off here and there depending on the font size, but it should be an improvement on trunk.

For the CSS var

Create a few forms in trunk, all with options blocks (checkbox and radio fields). No need to style them.
Now switch to this branch.
Add some border color, width and radius styles to the jetpack/options block in global styles.
Check that your forms built in trunk are unaffected on the frontend

For the default padding

Create a default form with some multi fields (checkbox and radio). With your global styles for the jetpack/options block still active, visit the frontend. The multi fields should have left padding via the jetpack-field-multiple__list--has-border class.

github-actions · 2025-05-20T05:46:06Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/forms-backwards-compat-options-tweaks branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-backwards-compat-options-tweaks

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-05-20T05:46:26Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
🔴 Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
🔴 Specify whether this PR includes any changes to data or privacy.
🔴 Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

## Does this pull request change what data or activity we track or use?

My PR adds *x* and *y*.

🔴 Action required: Please add missing changelog entries for the following projects: projects/packages/forms

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

projects/packages/forms/src/blocks/contact-form/editor.scss

jp-launch-control · 2025-05-20T05:54:15Z

Code Coverage Summary

No summary data is available for parent commit dd7773c, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for dd7773c is available.

Full summary · PHP report · JS report

ramonjd · 2025-05-20T06:39:29Z

projects/packages/forms/src/contact-form/css/grunion.css

-	top: calc( var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1 );
+	top: calc(var(--jetpack--contact-form--border-size) * -1);
 	transform: translateY(-50%);
 	font-size: 0.8em;
 }

+/* Form that upgrade to use inner blocks look to the global styles border size.*/
+.contact-form .is-style-outlined .wp-block-jetpack-input-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label,
+.contact-form .is-style-outlined .wp-block-jetpack-field-select.wp-block-jetpack-input-wrap .notched-label .notched-label__label {
+	top: calc( var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1 );
+}


Just to explain the rationale here... This change addresses an inconsistency.

Unmigrated forms do not display global styles, for example background colors and border styles.

This is because unmigrated trunk forms do not have inner blocks, that is, they don't include jetpack/input or jetpack/options.

That means unmigrated forms do not "inherit" global styles meant for inner blocks.

This outlined CSS rule controls the position of the labels when the input is focussed. In the refactored form, the input border size directly affects the label position. This includes any input border sizes set in global styles/theme.json.

Before, the unmigrated forms' use of --jetpack--contact-form--border-top-size meant that this single global style had an effect on the form style, even when others didn't.

So if you fiddled with border size, color, width, radius, background color etc in global styles for jetpack/input or `jetpack/options, none of these have an effect on unmigrated forms. But in outlined forms the size "bled" through to the label. Therein lies the inconsistency.

We could build in a way to backfill legacy input styles with global styles, but that doesn't exist, hence the reason behind this change.

ramonjd · 2025-05-20T06:39:51Z

projects/packages/forms/src/contact-form/class-contact-form-field.php

+		$legacy_border_size     = ! empty( $border_width_attribute ) || $border_width_attribute === '0' ? $border_width_attribute . 'px' : null;
+
+		$border_radius_attribute = $this->get_attribute( 'borderradius' );
+		$legacy_border_radius    = ! empty( $border_radius_attribute ) || $border_radius_attribute === '0' ? $border_radius_attribute . 'px' : $outline_styles['border']['radius'] ?? null;


We were assigning var + px twice.

projects/packages/forms/src/contact-form/class-contact-form-field.php

ramonjd · 2025-05-20T06:41:21Z

projects/packages/forms/src/contact-form/class-contact-form-field.php

+			 * a limit of `100px` to the radius on the x axis. This achieves the same look and feel as other fields
+			 * that use the notch html (`notched-label__leading` has a max-width of `100px` to prevent it from getting too wide).
+			 * It prevents large border radius values from disrupting the look and feel of the fields.
+			 */


Just comment formatting

ramonjd · 2025-05-20T06:41:33Z

projects/packages/forms/src/contact-form/class-contact-form-field.php

+		 * checkbox is checked. Unlike radio buttons, for which the required attribute is satisfied if
+		 * any of the radio buttons in the group is selected, adding a required attribute directly to
+		 * a checkbox means that this specific checkbox must be checked.
+		 */


Comment formatting only

talldan · 2025-05-21T03:20:05Z

Add some border color, width and radius styles to the jetpack/options block in global styles.
Check that your forms built in trunk are unaffected on the frontend

🤔 I'm personally not sure about this as the expected behavior. It means that if I have two forms in separate places on a site, one before the inner blocks work and one added after, they might end up looking very different. It'd be very difficult for a user to figure out why that's the case and fix the issue.

What are the repercussions if we do the opposite and allow global styles to apply to old forms? Is it technically feasible?

ramonjd · 2025-05-21T03:45:06Z

I'm personally not sure about this as the expected behavior. It means that if I have two forms in separate places on a site, one before the inner blocks work and one added after, they might end up looking very different. It'd be very difficult for a user to figure out why that's the case and fix the issue.

Yeah, I agree that it could cause confusion.

My only goal in this PR was to make things consistent with the base inner blocks refactor branch , which applies block supports styles/correct block classes only if the inner blocks are found.

Based on the base feature branch, I took the overarching goal to always have been to "not break users' existing forms".

What are the repercussions if we do the opposite and allow global styles to apply to old forms? Is it technically feasible?

I don't know how technically feasible it'd be. I mean to say, it'd be possible, but the effort involved could be medium or it could be large.

Especially for the outlined style, which needs to know about borders and border radii. Here, I believe, because these forms don't know about inner blocks, we'd have to map existing fields to their inner block counterparts. So, if we come up against a jetpack/name we'd have to know to grab the global styles for jetpack/input, and so on for every legacy field block.

Apart from that, off the top of my head:

always add the wp-block-jetpack-* classes to the corresponding rendered output elements
always run the new variation methods, or anything that we use to get global styles values
(if required) update the custom block selectors in the block registration so that they target both form versions
fix inconsistencies/specificity other issues in grunion.css

If you feel strongly about it, it might be worth a spike.

talldan · 2025-05-21T05:18:53Z

If you feel strongly about it, it might be worth a spike.

Yeah, ok, lets make it a separate exploration. I've made an issue (FORMS-88) to discuss this.

projects/packages/forms/src/blocks/contact-form/editor.scss

projects/packages/forms/src/contact-form/css/grunion.css

ramonjd · 2025-05-22T01:40:52Z

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -418,7 +418,7 @@

 		&[type="radio"]::before {
 			border-radius: 50%;
-			transform: translateY(15%);
+			transform: translateY(0.15em);


Check 2017 theme. In the editor, the transform: translateY(15%); was causing a 3d effect. Frontend looks okay.

I think the actual input element is supposed to be hidden by some css (appearance: none) in favour of a pseudoelement. Maybe there's something overriding that in some classic themes.

This was actually due to incoming styles from the classic themes. The jetpack form sets the width/height to be 1em, and adds borders and things.

I think I found out why: https://github.com/Automattic/jetpack/pull/43531/files#r2101527871

I compared with trunk and it fixes the 3d effect. I believe it has to do with the change to 1em sizing for the input field, also we removed the border: none override.

🤞🏻

… and maintainability. Update CSS for radio and checkbox options to use consistent alignment, and streamline fieldset and div class attributes by removing unnecessary prefixes. Improve handling of border styles and attributes for outlined forms, ensuring compatibility with global styles.

…ription

ramonjd · 2025-05-22T03:00:29Z

projects/packages/forms/src/blocks/contact-form/editor.scss

+		min-width: auto;
+		width: 1em;
+		height: 1em;
+		box-shadow: none;


This is to avoid some really weird 3d effects on classic themes, but testing in trunk they're not there.

I'll look into a better fix.

Uh, here's the main feature branch so I think it's something we do need to address:

I'll leave these styles then here.

What's happening is that we added width/height of 1em so the inputs scale with the font size.

We also removed the border and height overrides: https://github.com/Automattic/jetpack/pull/42890/files#diff-b032342e36da30ca1c7a18a770aac75a9d52bdec892fe09e3e047c3a8ca73b69L368

So I think we need to keep these new declarations here to compensate.

Not removed, it was moved to here to lower the specificity:

jetpack/projects/packages/forms/src/blocks/contact-form/editor.scss

Line 388 in dd7773c

border: none;

That looks like a mistake. Maybe these rules should all have !important if the border/outline is never to be shown. 🤔

Probably the same with appearance: none as well, if that's overridden by a theme's css then border/outline being set to none won't have any effect.

Maybe these rules should all have !important if the border/outline is never to be shown.

That the border/outline is never to be shown was my assumption after testing in trunk. At least the contact form CSS is opinionated on the matter. 😄

What's your recommendation here? Should I move the following from :where(.jetpack-option__type) { to .jetpack-option__type.jetpack-option__type:

height: 1em; width: 1em; border: none;

And give them an !important?

Yep, I think !important might be the best choice for those, and also the outline and appearance. Just need to re-test to make sure it doesn't affect the application of global styles and block styles in any way.

My guess is that as long as the font-size rule is still at 0-1-0 specificity it should be ok.

Done in a5a6b2b

Looks pretty consistent in my testing.

The only thing I noticed was the mismatch in label/input colors on the option block, but I think you're looking at that.

ramonjd · 2025-05-22T05:36:53Z

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -569,10 +567,6 @@
 	margin: 0;
 }

-.jetpack-option__type.jetpack-option__type {


This selector was duplicated above.

Even though the above selector is nested in .jetpack-field, I don't see any control where .jetpack-option__type is outside a field.

ramonjd self-assigned this May 20, 2025

github-actions bot added the [Block] Contact Form Form block (also see Contact Form label) label May 20, 2025

github-actions bot added [Feature] Contact Form [Package] Forms [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels May 20, 2025

andrewserong reviewed May 20, 2025

View reviewed changes

projects/packages/forms/src/blocks/contact-form/editor.scss Outdated Show resolved Hide resolved

ramonjd commented May 20, 2025

View reviewed changes

ramonjd requested a review from talldan May 20, 2025 06:43

ramonjd mentioned this pull request May 20, 2025

Forms: Fix multi-choice field checkbox alignment with label #42850

Draft

3 tasks

github-actions bot added the [Tests] Includes Tests label May 20, 2025

andrewserong mentioned this pull request May 21, 2025

Forms: fix inconsistent weights in outline style and terms labels #43545

Open

ramonjd mentioned this pull request May 21, 2025

Try/forms inner blocks select refactor #43546

Draft

3 tasks

talldan reviewed May 21, 2025

View reviewed changes

projects/packages/forms/src/blocks/contact-form/editor.scss Outdated Show resolved Hide resolved

projects/packages/forms/src/blocks/contact-form/editor.scss Outdated Show resolved Hide resolved

projects/packages/forms/src/contact-form/css/grunion.css Outdated Show resolved Hide resolved

ramonjd commented May 22, 2025

View reviewed changes

ramonjd added 9 commits May 22, 2025 12:08

Try baseline for the options

204664d

Revert changes to "fix" option alignment

996d53d

Revert option alignment v2

fd7c96f

Add classes to tests

d88a4fa

Reinstate tweaks for option positioning

e1f71a7

Apply wp-block-jetpack-option class in the attribute migration method

a43029e

Use em instead of rem. Remove unnecessary tweaks

51a50ca

Border support for classic themes

20eead8

ramonjd force-pushed the update/forms-backwards-compat-options-tweaks branch from c0019a5 to 20eead8 Compare May 22, 2025 02:28

Ensure radio inputs don't warp in classic themes. Update options desc…

cc9a90f

…ription

ramonjd commented May 22, 2025

View reviewed changes

ramonjd added 2 commits May 22, 2025 15:15

Force opinionated dimensions on the options inputs

a5a6b2b

wp-block-jetpack-option was not being applied to inner options blocks

daee83b

ramonjd commented May 22, 2025

View reviewed changes

ramonjd removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label May 22, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label May 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Forms: options block layout tweaks #43531

Forms: options block layout tweaks #43531

ramonjd commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

jp-launch-control bot commented May 20, 2025 •

edited

Loading

ramonjd May 20, 2025

ramonjd May 20, 2025

ramonjd May 20, 2025

ramonjd May 20, 2025

talldan commented May 21, 2025 •

edited

Loading

ramonjd commented May 21, 2025 •

edited

Loading

talldan commented May 21, 2025

ramonjd May 22, 2025

talldan May 22, 2025

ramonjd May 22, 2025

ramonjd May 22, 2025

ramonjd May 22, 2025

ramonjd May 22, 2025

talldan May 22, 2025

talldan May 22, 2025

ramonjd May 22, 2025 •

edited

Loading

talldan May 22, 2025

talldan May 22, 2025

ramonjd May 22, 2025

ramonjd May 22, 2025

Forms: options block layout tweaks #43531

Are you sure you want to change the base?

Forms: options block layout tweaks #43531

Conversation

ramonjd commented May 20, 2025 • edited Loading

Proposed changes:

TODO

Testing instructions:

For the checkbox layout

For the CSS var

For the default padding

github-actions bot commented May 20, 2025 • edited Loading

github-actions bot commented May 20, 2025 • edited Loading

jp-launch-control bot commented May 20, 2025 • edited Loading

Code Coverage Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented May 21, 2025 • edited Loading

ramonjd commented May 21, 2025 • edited Loading

talldan commented May 21, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramonjd May 22, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramonjd commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading

jp-launch-control bot commented May 20, 2025 •

edited

Loading

talldan commented May 21, 2025 •

edited

Loading

ramonjd commented May 21, 2025 •

edited

Loading

ramonjd May 22, 2025 •

edited

Loading