Forms: Radio and checkbox options stripped from older forms

[edanzer]

Impacted plugin

Jetpack

Quick summary

Slack thread contains discussion: p1736794493216829-slack-C0CMN0V97

A jetpack user had a form inserted +6 months ago. They tried to edit the post and found that options for radio and multi-checkbox field were being stripped.

Upon investigation, I found that the block markup in the code editor was different than a newly inserted block. New blocks have an extra div container around the option. If you insert a new radio field in a form block and go to the code editor, the radio options are enclosed in a <div class="wp-block-jetpack-field-radio"> div. Likewise, checkbox options are contained in a <div class="wp-block-jetpack-field-checkbox-multiple">. Those divs are missing in the customers block code, resulting in fields being stripped.

We need to determine if this was an odd, one-off issue, or if we've changed block markup in a way that is not backwards compatible. If the latter, we need to see if there's a way to ensure that we do not break form blocks when users go back to edit older forms.

Steps to reproduce

1. Create a new post on a site with Jetpack forms active.
2. From the code editor, insert the the following block code from past bin: 36b0d-pb/#xml This code is directly from an older post created by user that contains a contact form. If you scan this code, you can see all the specific options in the code for radio and checkbox fields.
3. Click to exit the code editor and return the visual block editor. Note that all options have been removed.
4. You can also use the following, simplified code snippet, which is just a simple contact form with a simple multi-select field. Insert this in the code editor, then go to block editor, a

<!-- wp:jetpack/contact-form {"style":{"spacing":{"padding":{"top":"16px","right":"16px","bottom":"16px","left":"16px"}}}} -->
    <div class="wp-block-jetpack-contact-form" style="padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px">
 
        <!-- wp:jetpack/field-checkbox-multiple {"label":"Required checkbox:","requiredText":"(required)","labelLineHeight":1.8} -->
   
            <!-- wp:jetpack/field-option-checkbox {"label":"One"} /-->
   
            <!-- wp:jetpack/field-option-checkbox {"label":"Two"} /-->
   
            <!-- wp:jetpack/field-option-checkbox {"label":"Three"} /-->
 
        <!-- /wp:jetpack/field-checkbox-multiple -->
 
<!-- wp:jetpack/button {"element":"button","text":"Contact Us","lock":{"remove":true}} /--></div>
<!-- /wp:jetpack/contact-form -->

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.

To work around the issue, a user can manually insert the missing divs in the code in the code editor, and everything will work as expected.

To fix for radio fields
Search for <!-- wp:jetpack/field-radio and add this right after that tag closes:
<div class="wp-block-jetpack-field-radio">

Search for <!-- /wp:jetpack/field-radio --> and add </div> just before that.

To fix for multi-checkbox fields
Search for <!-- wp:jetpack/field-checkbox-multiple and add this just after that tag closes:
<div class="wp-block-jetpack-field-checkbox-multiple">

Search for <!-- /wp:jetpack/field-checkbox-multiple --> and adding </div> just before that

Platform (Simple and/or Atomic)

Self-hosted

[supernovia]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated when form is older and missing "div" tags

📌 FINDINGS/SCREENSHOTS/VIDEO

• I've posted about it here: p7BdiT-kg-p2
• There are also two videos in this slack thread: p1736794493216829-slack-C0CMN0V97

📌 ACTIONS

• Triaged
• Ope, I went to mark it as triaged in The One Board and it wasn't there, so maybe these steps weren't necessary, but hopefully they were helpful!