Connection: Component updates - replace Modal with Dialog by coder-karen · Pull Request #50735 · Automattic/jetpack

coder-karen · 2026-07-22T11:30:01Z

Fixes CONNECT-390

Proposed changes

This PR creates a new shared ConnectionDialog component, which makes of use of @wordpress/ui's Dialog component, replacing the Modal that was in place.
This share component is now in use in disconnect-dialog/index.tsx , manage-connection-dialog/index.tsx, and owner-disconnect-dialog/index.tsx.
Styling has been updated to match previous styling as best as possible.
Additionally, the Owner Disconnect Dialog now makes use of a Text component from @wordpress/ui as well (for heading./ sub-heading), in line with it's sibling components.
Step files have also been updated to make use of a shared ConnectionDialogTitle to help prevent an accessibility issue. The accessible name tracks the step — eg. success screen now announces "successfully disconnected", not the stale question.
The Jetpack plugin Owner Disconnect Dialog relied on styles from the package despite being it's own component, so old styles are transferred across to the plugin for now to make sure that still looks as before (updating the Jetpack components will come in a later task).

Additionally:

New Dialog component (from @wordpress/ui) pulls in @wordpress/theme and @wordpress/private-apis under the hood. Older WP core (eg. 6.9) doesn't always ship those, so script fails to load. The fix here was to polyfill them via wp-build-polyfills, only registered when core's version is missing/incomplete — so most sites load nothing extra, and old sites get just the two small polyfills instead of Webpack bundling duplicate copies into every site's JS regardless of need.
Additionally, the polyfill registrar dropped any handles/modules requested after the first consumer triggered registration. This PR's new connection consumer exposed that by registering before Social, causing Social's @wordpress/boot module to be dropped on WP < 7.0. Fix: register on every call, guarded only against duplicate hooks.
Protect + Search e2e (package.json) — separate issue. These plugins' e2e builds have a hardcoded project list that was missing wp-build-polyfills, so the polyfill's JavaScript was never built into their test environments. The PHP asked to register the polyfill, but the files weren't there, so jetpack-connection.js got dropped again. Adding packages/wp-build-polyfills to their build scripts fixes it. (Jetpack/Boost/Social already had it).

Related product discussion/links

See linked issue above.

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

No.

Testing instructions

On a Jetpack-connected site with this PR applied (locally or using the Jetpack Beta tester plugin):

To test, click on the connection link on the My Jetpack page on the bottom right (eg 'Site and account connected'). This should look the same as before. .
Click on Disconnect Jetpack and the disconnect dialog should look as it did before as well.
If you click on 'Stay connected' you'll return to the main 'Manage Connection dialog', and can click on 'Disconnect my user account' to view the owner disconnect dialog, which should also look as before.
Test on mobile screens, this should generally look similar to before, some slight differences.
To test the disconnect survey, disconnect your user account via the My Jetpack page. Make sure it looks and behaves as before, including the 'Submit Feedback' button.
- You may need to trigger the survey - I resorted to adding setIsProvidingFeedback( true ); within handleDisconnect in DisconnectDialog to get this to work, so testing locally and re-building for those changes (rebuild My Jetpack and dependencies) is what worked for me.

To test that the Jetpack plugin OwnerDisconnectDialog component styles still look as expected:

Visit the Jetpack dashboard settings page at /wp-admin/admin.php?page=jetpack#/settings.
You'll need siteConnectionMode to be returning true here:

jetpack/projects/plugins/jetpack/_inc/client/searchable-modules/index.jsx

Line 119 in a72efdf

{ siteConnectionMode && (

(if testing locally, set this to true and rebuild Jetpack (plus dependencies)).
In the search field, add a search for port.
Scroll down, and see the Connect your WordPress.com account links in several cards (eg Forms). Click on this.
The display and behavior should match what you see on trunk.

Additionally, to confirm the Webpack bundling change, with WordPress 6.9 installed (can use a rollback plugin):

On WP 6.9: load Social, Protect, Search, and Jetpack dashboards — each must render with no console errors, and the disconnect/manage/owner-disconnect dialogs must open and dismiss (Escape + backdrop). Repeat on WP latest to confirm no regression.

…rom wordpress/ui

github-actions · 2026-07-22T11:31:06Z

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 or WordPress.com Site Helper), and enable the update/connection-js-package-modal-to-dialog branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/connection-js-package-modal-to-dialog

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/connection-js-package-modal-to-dialog

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 · 2026-07-22T11:31:27Z

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