Form block: Radio buttons have a reduced opacity

[aisajib]

Quick summary

A user in the WordPress.com forum reported, and I replicated, that the radio buttons on the Form block on WordPress.com have a reduced opacity.

Steps to reproduce

1. On a WordPress.com site, open the post/page editor.
2. Insert a Form block. Choose any of the preset.
3. Insert a Single Choice (Radio) field/button.
4. Add a couple of options.
5. Preview the post/page.

What you expected to happen

The text on the radio buttons should have full opacity.

The screenshot above is from a self-hosted site using Jetpack.

What actually happened

The text looks like this with reduced opacity:

Impact

All

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

I was able to replicate it on both FSE and non-FSE themes. But on a self-hosted site, this didn't happen.

[NoHopeRadio]

I believe the issue is that the radio button labels are now being treated the same as the (required) labels in other fields. One user previously had these labels replaced via CSS, and found the radio button labels missing suddenly, with the opacity change as well.

I recommended adding a label:not(.radio) into their custom CSS (which might also be a fix for us to implement), and the inverse for changing the opacity back.

40300715-hc

[aisajib]

Thanks @NoHopeRadio ! As this affects free users as well who don't have access to custom CSS without a plan or an add-on upgrade, hopefully we can ship a fix soon!

[sophiegyo]

The same's happening for multiple choice checkboxes, though oddly enough not for single checkboxes.

[carinapilar]

Got another report on: 5933725-zd-woothemes - shared the following CSS:

/* Fix for radio buttons on Form block */
.contact-form label.radio span {
	opacity: 1;
}

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• https://wordpress.com/forums/topic/meraki-theme-issue
• 5933725-zen
• 6345849-zen

[dpasque]

@aisajib I believe this was just fixed recently by this PR: #28212 🎉

I wasn't seeing this reproducing on WPCOM -- are you still seeing that? If not, we should be able to close this as fixed! 🥳

[aisajib]

I've checked my test sites, and I'm not able to reproduce it. :)

[dpasque]

Excellent, I will close! Fixed by #28212

[Gustavo-Hilario]

We got another report about this here:

6345849-zen

I could also reproduce this issue on a test site using the Marl theme. The opacity rule isn't applied to the editor, so when users check the preview or published page, they see a different color. I'm reopening this for now.

Edit: I couldn't replicate this on a Simple Site using Marl.

[cuemarie]

Reopened Issue

• Originally this issue impacted Simple and Atomic, and was resolved with Form: Add style variations #28212

---

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Using TT3 on both platforms, the Form Block's radio buttons had an opacity on the AT site only.

Screenshots/Recordings

Atomic, TT3

Simple, TT3

📌 ACTIONS

• Assigned to Other
• CC @jeherve

[ntsekouras]

Is this still valid? I couldn't reproduce it.

[jeherve]

Closing this for now because of the lack of activity on this. We can always reopen in the future if needed.