Skip to content

Forms: Multiple Choice checkbox styles work inconsistently and aren't synced with Checkbox styles #42447

@talldan

Description

@talldan

Impacted plugin

Jetpack

Quick summary

Originally noted in #42278 (comment), but it wasn't introduced in that PR.

Changing label size in a single checkbox should affect multi-choice options but not text-field labels.

If a user adds a Multiple Choice block to a form that also has a Checkbox, it can be very challenging to style the two to look the same:

  • With the Multiple Choice block selected, if the user tries changing settings like the option font size, only the Multiple Choice options are affected, the changes don't sync to the Checkbox block.
  • Also note if the user tries scaling the Option font size on the Multiple Choice block, the input changes size but the text doesn't (the opposite to Forms: Checkbox doesn't scale when changing text size #42446)
  • If you try changing border settings on the Multiple Choice options, that seems to have no effect unless the Button style variation is active
  • When the Button Style variation is active the border style for an option can be changed, but there's no way to set border color independently of the text color
  • When the button style is active, the checkbox is still visible inside the button. I'm not sure if this is by design, or if it should be more of a toggle style button.

Steps to reproduce

  1. Add a contact form
  2. Add a Multiple Choice block to the contact form
  3. Add a Checkbox to the contact form
  4. Try changing different Option styles for the Multiple Choice block (you must have the parent Multiple Choice block selected to do this rather than the Option itself)

Expected: All the styles work correctly and option styles are synced between Multiple Choice and Checkbox
Actual: The styles work inconsistently and aren't synced:

  • Font size doesn't scale the option label
  • Border has no effect with the List Style Variation active
  • There's no way to set Border color that doesn't also change the text color

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

Self-hosted, Atomic, Simple

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugWhen a feature is broken and / or not performing as intendedTriaged[Block] FormForm block (also see Form package label)[Feature] Forms[Feature] Forms BlocksBlocks designed to streamline user input and engagement, such as contact, newsletter sign-ups, etc.[Package] Forms[Plugin] JetpackIssues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/[Pri] Low[Status] Auto-allocated

    Type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions