Forms: add border options to select, radio, and checkbox blocks

[enejb]

Fixes #39675

Proposed changes:

• Add border options to the multi select, radio and checkbox blocks ( simple and consent ).
• This makes it possible to set different colours for checkbox borders and options and label colour contorl work more like you would expect.
• Also the different types of checkboxes now have the same styling implemented. Before the single checkbox and the consent control has the just the default checkbox styling. This make it so that the styling is now constant across all the different form.
• This PR also adds the background colour to checkbox and radio buttons to come from the background colour that can be set on fields. But this is currently not something that can be controlled on the fields.

Editor:

Before:	After:

Frontend

Before:	After:

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

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

Testing instructions:

• Load this PR.
• In the Gutenberg editor add a form
• Insert radio select, multi select and checkboxes and consent fields.
• Update the consent field to show the checkbox. by setting the dropdown in the sidebar to be "Add Privacy Checkbox"
• Play around with the different colour settings in the sidebar. Does the form look like you would expect?
• Notice that the form displays the same in the Block editor as in the front end of the site.

[github-actions]

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 WordPress.com Simple 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, and enable the add/border-styling-radio branch.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack add/border-styling-radio
  

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]

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 Team 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 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Choose a review path based on your changes:
   • A. Team Review: add the "[Status] Needs Team Review" label
     • For most changes, including minor cross-team impacts.
     • Example: Updating a team-specific component or a small change to a shared library.
   • B. Crew Review: add the "[Status] Needs Review" label
     • For significant changes to core functionality.
     • Example: Major updates to a shared library or complex features.
   • C. Both: Start with Team, then request Crew
     • For complex changes or when you need extra confidence.
     • Example: Refactor affecting multiple systems.
3. Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly. The next release is scheduled for February 4, 2025 (scheduled code freeze on February 4, 2025).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[lezama]

Tests 💯 . I’m not sure about the consequences of all the CSS changes in terms of backwards compatibility. @simison, what do you think? I vote for risking it—let’s merge it!

[monsieur-z]

I've applied text and background colors to the Form element and noticed 2 inconsistencies:

• in the editor, the single option, multiple options, and dropdown fields don't respect the text color.

• in the frontend, only the dropdown doesn't.

Everything seems to look good when playing with the field colors, though. So feel free to discard my comment in this PR.

[lezama]

@ntsekouras What would the standard Gutenberg approach be for this? Could this take us further away from the recommended way of doing things?

[enejb]

Thanks for the review @monsieur-z!

I see what you mean by

in the editor, the single option, multiple options, and dropdown fields don't respect the text color.

This approach is a regression as to what we currently have. Will consider a different implementation.

Thanks again.

[enejb]

Can you take another look @monsieur-z when you have a moment.

I think the issue is now fixed.

[ntsekouras]

@ntsekouras What would the standard Gutenberg approach be for this? Could this take us further away from the recommended way of doing things?

A bit yes.. These blocks should be using block.supports for colors and other things like align or typography.

[simison]

@aaronrobertshaw can you take a look at this PR and share if it makes sense to continue, or we should wait until with any changes and proceed block.supports way instead that you're exploring?

[aaronrobertshaw]

Thanks for the ping 👍

share if it makes sense to continue, or we should wait until with any changes and proceed block.supports way instead that you're exploring?

Take the following with a grain of salt as I haven't had a chance to get full context on this PR yet.

My initial thoughts are that while it appears to follow what's already in place for other fields and styles, it does mean more to untangle and more to migrate in a deprecation when switching to a block supports based approach.

I've spent some time today trying to get my head around the current way fields are put together and they're already pretty complex without adding more to the mix. So my gut feel is if there isn't a hurry to land this, maybe we could wait a couple of days to see what comes of explorations into refactoring the field blocks to use inner blocks.

FWIW the explorations into using inner blocks seems promising so far but there are a lot of moving parts that haven't been looked into yet. If all goes to plan, I hope to have something up tomorrow that we can decide on whether its a direction we want to commit to. From there, we could use that demo PR to extrapolate the changes out to the other form fields.

Here's an incredibly premature look at inner blocks for a test "name v2" field in case it helps make a call on the likelihood that we'll move towards inner blocks sooner rather than later 🤷

Screen.Recording.2025-01-22.at.7.51.01.pm.mp4

[simison]

Sounds good! Context was fixing a bug, but I'm fine waiting with this one. I don't want to complicate things and create more work.

[ntsekouras]

@aaronrobertshaw do you have a PR for the video you shared?

I'm wondering if it makes sense to also convert lot's of fields to a single one with block variations.

I'm curious what kind of deprecations will be needed with all these custom code..

[simison]

@ntsekouras I'll ping you Slack for the convo about those.

[aaronrobertshaw]

do you have a PR for the video you shared?

@ntsekouras not yet, as it's only semi-functional in the editor, and I ran out of time today.

Update: Collection of hacks...I mean draft here: #41281

I'm wondering if it makes sense to also convert lot's of fields to a single one with block variations.

I was headed in that direction with the exploration noted above. My plan was to get an inner-blocks-based field first alongside what's there for easier comparison. Then create block variations to match the other existing fields. The old fields can be swapped out for the new ones and deprecations created if we choose to go ahead.

I'm curious what kind of deprecations will be needed with all these custom code.

Good question.

As all the current fields are registered as their own block instead of block variations, it might be tricky to deprecate them to a single block type. Even if that's possible, it might still mean we'd need all the original block types still registered so they could have appropriate deprecations.

To bring the discussion back to this PR, I suspect the checkbox, radio, and select fields will end up as their own blocks still. So the addition of extra classes and styles here shouldn't be a big deal if we want to get the bug fix in.

[monsieur-z]

Can you take another look @monsieur-z when you have a moment.

Colors seem to be applied as expected now, both a the form and field levels.