Forms: Improve passing PHP data to Javascript #45076

edanzer · 2025-09-04T17:44:04Z

Proposed changes:

Context I've long been bothered by the fact that we have several different methods of passing data from PHP to our frontend JavaScript.

For the dashboard, we create a config object and define a config() method for accessing the object.
- As a side problem, because the config method is defined in the root file where we mount the dashboard, if you import that config method elsewhere in the codebase, webpack imports the entire dependency tree for the dashboard. This creates other problems, see below.
For the dashboard, we also create a jetpackFormsData object.
For the editor, we create a jpFormsBlocks object.
In some cases, we need to pass the same data in multiple places if its needed in both editor and dashboard.

Immediate problem. This came to a head in this PR where I wanted to pass permission checks for integrations. I had to add the permissions checks in both config and jpFormsBlocks, because the relevant component is loaded in both dashboard and editor. I had to update the component to check both config and jpFormsBlocks. And because I had to import the 'config' method from the dashboard, webpack imported the entire dashboard, which caused a build failure because of bundle size.

Solution. In this PR I propose we leverage Jetpack's built-in getScriptsData method to pass all data to the frontend. To demo it, I've done the following:

Add add_forms_script_data() method that collects all the same data as all our other approaches, and attaches it to Jetpack's script data via hook. If adopted, this would be the default way we pass all data to the frontend going forward, and it will replace the config object and the jpFormsBlocks object.
Updated MailPoet checks in both the dashboard and the editor to show what it would look like to use the getScriptsData rather than our current approaches in both places.

Follow ups. If we adopt this approach, I'd recommend we update uses of config/jpFormsBlocks to the new approach incrementally. In particular, I tried doing all of the config changes as part of this PR, and it triggered too many code changes.

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:

Right now, the only place I'm using the updated method is the MailPoet check. To confirm it works in both dashboard and editor, you can...

Add this filter to your site: add_filter( 'jetpack_forms_mailpoet_enable', '__return_false' );
Confirm that the MailPoet card does not show in the integrations dashboard or block modal.
Remove the filter or update it to return true.
Confirm that the MailPoet card does show.
You can also try consoling out the value of getScriptsData() in the two places where I update the MailPoet code to see what the script data is now returning.

github-actions · 2025-09-04T17:44:51Z

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 WoA dev 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 (Jetpack), and enable the update/forms-admin-script-data branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-admin-script-data

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-09-04T17:45:20Z

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

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

No scheduled milestone found for this plugin.

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

jp-launch-control · 2025-09-04T17:53:24Z

Code Coverage Summary

Coverage changed in 3 files.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/contact-form/class-contact-form-plugin.php	411/1298 (31.66%)	-0.57%	25 💔
projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php	335/576 (58.16%)	0.50%	-5 💚
projects/packages/forms/src/dashboard/class-dashboard.php	0/99 (0.00%)	0.00%	-9 💚

Full summary · PHP report · JS report

_{If appropriate, add one of these labels to override the failing coverage check:

Covered by non-unit tests
Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.}

edanzer · 2025-09-04T20:24:55Z

projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php

-				'formsResponsesUrl'    => $form_responses_url,
-				'akismetActiveWithKey' => $akismet_active_with_key,
-				'akismetUrl'           => $akismet_key_url,
-				'assetsUrl'            => Jetpack_Forms::assets_url(),


In reviewing all the data we're passing to the frontend, I found these are no longer used, so I've removed them.

edanzer · 2025-09-04T20:25:53Z

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

+
+		$data['forms'] = $forms;
+		return $data;
+	}


If adopted, this new method would be the way that we pass all data in the Jetpack Forms to the frontend, replacing the 'config' on the dashboard and the jpFormsBlock object in the editor.

I've basically recreated each item from jpFormsBlock and config objects here as part of this PR. In future PRs, we can refactor individual files to use this rather than config / jpFormsBlocks. I tried doing all of that here, but it expanded to much.

Also note that I've added two new items here for canInstallPlugins and canActivatePlugins. Once merged, I'd update this PR to reference these properties rather than needing to pass both properties to both jpFormsBlocks and config separately.

edanzer · 2025-09-04T20:26:25Z

projects/packages/forms/src/dashboard/class-dashboard.php

-			self::SCRIPT_HANDLE,
-			'window.jetpackFormsData = ' . wp_json_encode( array( 'apiRoot' => $api_root ) ) . ';',
-			'before'
-		);


In reviewing all the data we're passing to the frontend, I found the api_root element we set up here is not used, so I've removed it.

edanzer · 2025-09-04T20:27:15Z

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/index.tsx

@@ -20,7 +21,7 @@ import './style.scss';
 */
 import type { Integration } from '../../../../types';

-const isMailPoetEnabled: boolean = !! window?.jpFormsBlocks?.defaults?.isMailPoetEnabled;
+const isMailPoetEnabled = Boolean( getScriptData()?.forms?.isMailPoetEnabled );


An example of replacing jpFormsBlocks method with the new getScriptsData() single-source-of-data method.

edanzer · 2025-09-04T20:29:49Z

projects/packages/forms/src/dashboard/class-dashboard.php

@@ -230,7 +220,6 @@ public function render_dashboard( $extra_config = array() ) {
 			'enableIntegrationsTab'   => self::$show_integrations,
 			'renderMigrationPage'     => $this->switch->is_jetpack_forms_announcing_new_menu(),
 			'dashboardURL'            => add_query_arg( 'jetpack_forms_migration_announcement_seen', 'yes', $this->switch->get_forms_admin_url() ),
-			'isMailpoetEnabled'       => Jetpack_Forms::is_mailpoet_enabled(),


As we refactor to use the getScriptsData method, we can remove each item from the config object here, as I've done with MailPoet.

edanzer · 2025-09-04T20:30:24Z

projects/packages/forms/src/dashboard/class-dashboard.php

@@ -246,7 +235,7 @@ public function render_dashboard( $extra_config = array() ) {
 	 *
 	 * @return boolean
 	 */
-	private function has_feedback() {
+	public function has_feedback() {


This had to to be made public because it's now used in the add_forms_script_data() method above.

edanzer · 2025-09-04T20:30:56Z

projects/packages/forms/src/dashboard/integrations/index.tsx

@@ -32,7 +32,7 @@ const Integrations = () => {
 		mailpoet: false,
 	} );

-	const isMailpoetEnabled = config( 'isMailpoetEnabled' );
+	const isMailpoetEnabled = Boolean( getScriptData()?.forms?.isMailPoetEnabled );


An example of replacing the config object/method with the new getScriptData() single-source-of-data method.

edanzer · 2025-09-04T20:31:21Z

projects/packages/forms/src/types/index.ts

+		forms?: FormsScriptData;
+	}
+}
+


We need to extend Jetpack's script data type.

edanzer · 2025-09-04T21:06:16Z

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

@@ -102,6 +106,9 @@ public static function init() {

 			// Schedule our daily cleanup
 			add_action( 'wp_scheduled_delete', array( $instance, 'daily_akismet_meta_cleanup' ) );
+
+			// Provide consolidated Forms script data to both editor and admin via JetpackScriptData.
+			add_filter( 'jetpack_admin_js_script_data', array( __CLASS__, 'add_forms_script_data' ), 10, 1 );


This hooks is how we call the method that adds our data to Jetpack's script data.

edanzer · 2025-09-08T18:10:23Z

This has been closed in favor of #45091

edanzer added 2 commits September 4, 2025 11:41

Forms: Consolidate data to frontend

3f1e9fb

changelog

cff1341

edanzer self-assigned this Sep 4, 2025

github-actions bot added [Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Package] Forms [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress labels Sep 4, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Sep 4, 2025

Update and apply new scripts data method

88985a4

edanzer commented Sep 4, 2025

View reviewed changes

Remove mailpoet from config

7de4c31

edanzer commented Sep 4, 2025

View reviewed changes

projects/packages/forms/src/types/index.ts

forms?: FormsScriptData;

}

}

Copy link

Contributor Author

edanzer Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to extend Jetpack's script data type.

edanzer requested a review from a team September 4, 2025 20:58

edanzer marked this pull request as ready for review September 4, 2025 20:58

edanzer commented Sep 4, 2025

View reviewed changes

edanzer closed this Sep 8, 2025

github-actions bot removed [Status] In Progress [Status] Needs Review This PR is ready for review. labels Sep 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Forms: Improve passing PHP data to Javascript #45076

Forms: Improve passing PHP data to Javascript #45076

Uh oh!

edanzer commented Sep 4, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer Sep 4, 2025 •

edited

Loading

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer Sep 4, 2025 •

edited

Loading

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer Sep 4, 2025 •

edited

Loading

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer Sep 4, 2025

Uh oh!

edanzer commented Sep 8, 2025

Uh oh!

Uh oh!

Forms: Improve passing PHP data to Javascript #45076

Forms: Improve passing PHP data to Javascript #45076

Uh oh!

Conversation

edanzer commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

edanzer commented Sep 8, 2025

Uh oh!

Uh oh!

edanzer commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

jp-launch-control bot commented Sep 4, 2025 •

edited

Loading

edanzer Sep 4, 2025 •

edited

Loading

edanzer Sep 4, 2025 •

edited

Loading

edanzer Sep 4, 2025 •

edited

Loading