Connector: display connection state

[bindlegirl]

Proposed changes

Adds a WordPress.com connector card for the WP 7.0+ Settings > Connectors screen. When a site has the Jetpack connection package active, this card appears on the new core Connectors page and provides a full management UI for the WordPress.com connection.

PHP (Wpcom_Connector)

• Registers a wordpress_com connector via the wp_connectors_init action and the WP_Connector_Registry API (WP 7.0+). On older WordPress versions the hook never fires, so this is a safe no-op.
• Enqueues a script module and CSS only on the Connectors screen (supports both WP 7.0 core and Gutenberg plugin screen IDs).
• Assembles connection state data (current user, connection owner, connected plugins, site details) and passes it to the JS module via the script_module_data_ filter.
• Maps plugin slugs to brand logos (Jetpack, WooCommerce, Automattic for Agencies).

JavaScript (connectors-card.js)

• Provides a custom render function for the wordpress_com connector using @wordpress/connectors' registerConnector / ConnectorItem API.
• Displays connection status badges ("Connected" / "Site connected") with a collapsible details panel.
• Shows current user info with a "Disconnect account" link, connection owner details (with local username for secondary admins), and connected plugins with brand logos.
• Handles the full connection flow: site registration, user authorization redirect (via Jetpack REST API), user unlinking, and site disconnection — all with confirmation modals.
• Includes a "Connection details" modal showing blog ID, site URL, and home URL.
• Handles display ordering so the WordPress.com card appears after AI provider cards.

CSS (connectors-card.css)

• Styles the expanded details panel, status badges, user sections, plugin list, and modals.
• Uses CSS logical properties throughout for RTL support.
• Responsive layout for 480px and below: wraps user rows and connect prompts into stacked layouts.

Tests (Wpcom_Connector_Test.php)

• 25 PHPUnit tests covering: init() idempotency, connector registration, data assembly for disconnected/registered/connected states, screen ID detection, plugin logo mapping, user field resolution (WPCOM override + local fallback), connection owner data with localLogin, connected plugins error handling, and page path resolution.

Other information

• Generate changelog entries for this PR (using AI).

Related product discussion/links

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

No. This feature surfaces existing Jetpack connection data on a new WordPress core screen. No new data is collected or tracked.

Testing instructions

Prerequisites

• WordPress 7.0+ (or Gutenberg plugin with Connectors support enabled)
• Jetpack connection package active (e.g. via Jetpack plugin)

Connected owner account

1. Connect a site to WordPress.com as the site owner.
2. Go to Settings > Connectors.
3. Verify the WordPress.com card shows "Connected" badge with a "Details" button.
4. Click "Details" — verify you see:
   • "Connected as owner" section with your WPCOM display name, login, email, and avatar.
   • "Disconnect account" link (red text).
   • "Connected plugins" section with brand logos.
   • "Connection details" link and "Disconnect site" button in the footer.
5. Click "Connection details" — verify the modal shows blog ID, site URL, and home URL.
6. Resize browser to 480px or narrower — verify the layout wraps properly (disconnect link on its own row, connect prompt text not truncated).

Secondary admin (not linked)

1. Log in as a different administrator (not the connection owner).
2. Go to Settings > Connectors.
3. Click "Details" on the WordPress.com card — verify you see:
   • A "Connect account" prompt with explanatory text.
   • "Connection owner" section showing the owner's WPCOM name and @wpcom_login ( local: local_username ).
   • Connected plugins.
4. Click "Connect account" — verify the authorization flow starts.

Disconnected site

1. With no Jetpack connection, go to Settings > Connectors.
2. Verify the WordPress.com card shows a "Connect" button (no details panel).
3. Click "Connect" — verify the site registration and authorization flow starts.

Site registered, no owner

1. If the site is registered but has no connected owner, verify the card shows "Site connected" badge and offers a user connection prompt in the details panel.

[github-actions]

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 add/wpcom-connector-card branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/wpcom-connector-card

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/wpcom-connector-card

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]

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:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. 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!

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/connection/src/class-manager.php	608/1014 (59.96%)	-0.06%	1 ❤️‍🩹

1 file is newly checked for coverage.

File	Coverage
projects/packages/connection/src/connectors/class-wpcom-connector.php	89/142 (62.68%) 💚

Full summary · PHP report · JS report

[anomiex]

E2E failures should be fixed by #47803.

[coder-karen]

Is this check meant for WP compatibility or just for mid-deploy or mid-load issues? Since the class, Wpcom_Connector, is in the same package. The comment makes it seem as though it's a check relevant to WP 7.0. In class-wcom-connector.php however we check to see if WP_Connector_Registry exists and return otherwise, and that looks like the WP 7.0 relevant check.
Doesn't seem that is needs a class_exists check here anyway.

[bindlegirl]

Good catch. This is a leftover from an earlier version of solution and not needed any more.