Fix/invalid field ids #41564

edanzer · 2025-02-04T22:16:26Z

Proposed changes:

For radio and multiple checkbox fields, when outputting options to the apage, we are using the option values for html id's. But option values can have spaces or odd characters, which produces invalid html ids. This PR uses the santize_html_class() method to strip white space and other non-valid characters.

Example of the issue:

QUESTION: Do we need to worry about backward compatibility issues when adjusting field ids. For now, my view is no. But the two likely concerns would be
(1) users applying custom CSS or JS to fields using the field ID
(2) changing the field IDS on existing forms -> as far as I can tell, those field ids are not used downstream for manipulating form submissions, but if we were or users are via custom code, that could have an impact.

If we are concerned, we could consider wrapping the id output in conditionals - output the same as we have if the resulting value is valid, else output the new version (this new version would still be different, but if the old one was invalid, it's moot).

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

None.

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

No.

Testing instructions:

Add a form with a radio field and multiple checkbox field. Add radio and checkbox options with spaces or odd characters.
Go to the frontend, check the inspector, and confirm that the html id's on the fields are now valid (start with letter, no spaces or odd characters)
Submit the form and check the form response in the dashboard (just to do a sanity check that form submissions work as expected)

github-actions · 2025-02-04T22:17:15Z

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 fix/invalid-field-ids branch.
To test on Simple, run the following command on your sandbox:
```
bin/jetpack-downloader test jetpack fix/invalid-field-ids
```

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-02-04T22:17:33Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
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.
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 none scheduled (scheduled code freeze on undefined).

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

edanzer · 2025-02-04T22:20:35Z

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

@@ -745,7 +745,7 @@ private function render_consent_field( $id, $class ) {
 	/**
 	 * Return the HTML for the multiple checkbox field.
 	 *
-	 * @param int    $id - the ID.
+	 * @param string $id - the ID (starts with 'g' - see constructor).


$id is always a string. See contructor around line 150 where it is set. This is relevant because a valid html ID need to start with a letter, not a number.

github-actions · 2025-02-04T22:30:08Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

enejb · 2025-02-04T22:32:26Z

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

@@ -674,11 +674,11 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 			$option = Contact_Form_Plugin::strip_tags( $option );
 			if ( is_string( $option ) && $option !== '' ) {
 				$radio_value = $this->get_option_value( $this->get_attribute( 'values' ), $option_index, $option );
-				$radio_id    = "$id-$radio_value";
+				$radio_id    = sanitize_html_class( $id ) . '-' . sanitize_html_class( $radio_value );


I don't think we need to wrap $id with sanitize_html_class( $id ). Since if this is the case we would need to do it in a few different places as well see line 668.

enejb · 2025-02-04T22:42:40Z

I didn't know about sanitize_html_class function. :)

I wonder if something a bit different would do the trick mostly since we could have a case where we would produce the same ID and then we could take care of cases where a user could by accident produce the same ID.
See

Since the function produces the same ID we end up with the case where when you click on OptionC you select the Option C checkbox.

Granted it is a bit of an edge case but wp_unique_id() could work well for solving the case instead.

edanzer added 2 commits February 4, 2025 15:03

Fix invalid radio/checkbox html ids

cbe2451

changelog

566dafb

edanzer added [Type] Bug When a feature is broken and / or not performing as intended [Feature] Contact Form [Pri] Normal [Status] Needs Team Review labels Feb 4, 2025

edanzer requested a review from a team February 4, 2025 22:16

edanzer self-assigned this Feb 4, 2025

github-actions bot added [Package] Forms [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Feb 4, 2025

Update method docs

2a1d9f6

edanzer commented Feb 4, 2025

View reviewed changes

enejb reviewed Feb 4, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/invalid field ids #41564

Fix/invalid field ids #41564

edanzer commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

edanzer Feb 4, 2025

github-actions bot commented Feb 4, 2025

enejb Feb 4, 2025

enejb commented Feb 4, 2025

Fix/invalid field ids #41564

Are you sure you want to change the base?

Fix/invalid field ids #41564

Conversation

edanzer commented Feb 4, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

github-actions bot commented Feb 4, 2025 • edited Loading

github-actions bot commented Feb 4, 2025 • edited Loading

edanzer Feb 4, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 4, 2025

Code Coverage Summary

enejb Feb 4, 2025

Choose a reason for hiding this comment

enejb commented Feb 4, 2025

edanzer commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading