Protect Dashboard: Redesign the Login protection card by enejb · Pull Request #53739 · Automattic/jetpack

enejb · 2026-10-16T19:13:05Z

Proposed changes

Reworks the Login protection card on the Protect dashboard's Overview tab so each feature can be turned on from the card itself, instead of only reporting status.

The header uses a key icon and a one-line description in place of the "N of N on" badge.
While brute force protection is on, the card shows the all-time blocked login attempts with a "Configure brute force protection" link. While it's off, an "Enable brute force protection" toggle takes its place, matching the Firewall card.
Account protection and WordPress.com login (SSO) get their own toggles, side by side and split by a divider (stacked below 600px). WordPress.com login (SSO) shows a "Configure WordPress.com login (SSO)" link while it's on and can run. A disabled toggle says why the feature is unavailable.
WordPress.com login (SSO) still can't be turned on without a connected owner or in offline mode, and its help text says why. Turning it off asks first, as on the Settings tab: that toggle now lives in a shared SsoToggle used by both cards.
Before the Settings tab has loaded the saved settings, the card's toggles show the module state from page load rather than all reading "off".
The Settings tab's Login protection card uses the key icon too. Its WordPress.com login heading and the turn-off dialog now say "WordPress.com login (SSO)", the name the connectors card already uses, so every label names the feature the same way.
The divided-cells row is now a shared jp-protect-card__cells card style, used by the Login card's toggles and the Scan card's stats row, and the dismissible settings error row is a shared SettingsErrorRow, used by the Login and Firewall cards. A failed save now records which settings it was for, so each card shows only its own errors.

Before / after

Overview tab, with brute force protection, account protection and WordPress.com login (SSO) all on (captured on a Jurassic Ninja site at 1440×900).

Before	After

Related product discussion/links

Follows Protect Dashboard: Add the Login protection section #53192, which added the Login protection section.

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

No.

Testing instructions

On a connected site running this branch, go to Jetpack → Protect, Overview tab.
With brute force protection, account protection and WordPress.com login (SSO) all on, check that the Login protection card matches the "after" screenshot.
Click "Configure brute force protection" and "Configure WordPress.com login (SSO)"; both should switch to the Settings tab.
Turn WordPress.com login (SSO) off from the card: a confirmation dialog should appear, and once it's off the "Configure WordPress.com login (SSO)" link goes away. Turn it back on.
Turn account protection off and on from the card; a "Settings updated." snackbar should appear and the state should survive a reload.
On the Settings tab, turn brute force protection off, then go back to Overview: the blocked-attempts count is replaced by an "Enable brute force protection" toggle.
Narrow the window below 600px: the two toggles stack.

github-actions · 2026-10-16T19:14:25Z

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/protect-dashboard-login-card branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/protect-dashboard-login-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 · 2026-10-16T19:14:56Z

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.

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

jp-launch-control · 2026-10-16T19:27:07Z

Code Coverage Summary

Coverage changed in 6 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/protect/routes/dashboard/data/use-protect-settings.ts	65/67 (97.01%)	0.05%	0 💚
projects/packages/protect/routes/dashboard/sections/firewall/overview-card.tsx	57/65 (87.69%)	0.19%	0 💚
projects/packages/protect/routes/dashboard/sections/login-protection/login-protection-settings-card.tsx	9/9 (100.00%)	0.00%	0 💚
projects/packages/protect/routes/dashboard/sections/monitor/monitor-card.tsx	61/62 (98.39%)	0.03%	0 💚
projects/packages/protect/routes/dashboard/components/card.tsx	7/7 (100.00%)	14.29%	-1 💚

1 file is newly checked for coverage.

File	Coverage
projects/packages/protect/routes/dashboard/sections/login-protection/sso-toggle.tsx	15/15 (100.00%) 💚

Full summary · PHP report · JS report

simison · 2026-10-19T11:13:38Z

@@ -0,0 +1,90 @@
+import { ToggleControl } from '@wordpress/components';


As of the latest @wordpress/ui package version bump in Jetpack, you can now use SwitchControl from the @wordpress/ui package instead. It's a more modern version of the same component.

Please also rebase onto the latest trunk; you'll see the new linter rule complain about using the old component until you update. If you must use this older component, you can include it in the linter exclusion list for now. Just lemme know!

Done in 796af65: SsoToggle, the shared SettingToggle and the locked SSO option toggles now use SwitchControl, and setting-toggle.tsx and login-protection-settings-card.tsx are off the ESLint exclude list. Rebased onto trunk too. The Firewall IP-list toggles (ip-rule.tsx, firewall/settings-card.tsx) still use ToggleControl; I left those for a follow-up so this PR stays on the Login card.

simison · 2026-10-19T11:18:56Z

+
+		> * {
+			box-sizing: border-box;
+			padding: 16px var(--wp-ui-card-padding);


Preferably could use wpds token here rather than component internal --wp-ui-* tokens.

If you're overriding Card or other component styles, I'd like to understand better because it likely isn't needed, or isn't preferable at least :-)

Swapped for --wpds-dimension-padding-lg / --wpds-dimension-padding-2xl (the token --wp-ui-card-padding resolves to). On the why: CardRow is Card.FullBleed, so each row's top border runs edge to edge as a divider between sections. FullBleed cancels the card's padding, so the row adds it back to line its content up with the header. The divided-cells row moves that padding onto each cell so the vertical rule also reaches the row's edges. If there's a Card-native way to divide content into sections, I'm happy to drop this.

CardRow is Card.FullBleed, so each row's top border runs edge to edge as a divider between sections. FullBleed cancels the card's padding, so the row adds it back to line its content up with the header.

Would it work to just have Card.Content (which doesn't eat up the padding) and have Row inside it manage its contents?

The only job Card.FullBleed has is to cancel the padding, so if you're adding it back it's kinda pointless to use it. 😅

kraftbj · 2026-10-19T17:43:19Z

Heads-up: PR 53743 makes the Overview cards' Settings links open at their own card. This PR splits the login card's link into "Configure brute force protection" and "Configure WordPress.com login (SSO)". Whichever of the two merges second should give both links params={ { section: 'loginProtection' } } and update the link test to expect { section: 'loginProtection' }.

…vailable login toggles A failed save now records its keys, so the Login and Firewall cards only show their own errors. Unavailable brute force and account protection toggles say why, the Secure Sign On link names its feature, and focus stays in the brute force row when its toggle swaps out. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…case the login toggles Matches the name Jetpack Settings and the connectors card use, so the Overview toggle, its link, the Settings heading and the turn-off dialog all name the same feature. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…gin settings to its card Moves SettingToggle and the WordPress.com login toggles to SwitchControl from @wordpress/ui and drops them from the ESLint exclude list. Card row paddings use wpds dimension tokens instead of fixed pixels and the Card's internal padding variable. Both Login protection links open the Settings tab at the Login protection card, as the other Overview cards' links now do. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

enejb · 2026-10-19T21:16:30Z

Thanks @kraftbj. #53743 landed first, so I rebased: both Login protection links now pass { section: 'loginProtection' } and the link test expects it (796af65).

enejb added Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review This PR is ready for review. labels Oct 16, 2026

enejb self-assigned this Oct 16, 2026

github-actions Bot added [Package] Protect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Tests] Includes Tests labels Oct 16, 2026

simison reviewed Oct 19, 2026

View reviewed changes

Comment thread ...ckages/protect/routes/dashboard/sections/login-protection/login-protection-settings-card.tsx Outdated

simison reviewed Oct 19, 2026

View reviewed changes

Comment thread projects/packages/protect/routes/dashboard/sections/scan/style.scss Outdated

simison reviewed Oct 19, 2026

View reviewed changes

Comment thread projects/packages/protect/routes/dashboard/sections/scan/style.scss Outdated

simison reviewed Oct 19, 2026

View reviewed changes

enejb and others added 5 commits October 19, 2026 14:10

Protect Dashboard: Redesign the Login protection card

9475e4d

Protect Dashboard: Share the divided card row and settings error row

1ddbb9f

enejb force-pushed the update/protect-dashboard-login-card branch from b679328 to 796af65 Compare October 19, 2026 21:16

enejb requested a review from a team as a code owner October 19, 2026 21:16

enejb merged commit aa8db6a into trunk Oct 19, 2026
97 checks passed

enejb deleted the update/protect-dashboard-login-card branch October 19, 2026 22:00

github-actions Bot added [Status] UI Changes Add this to PRs that change the UI so documentation can be updated. and removed [Status] Needs Review This PR is ready for review. labels Oct 19, 2026

github-actions Bot added this to the jetpack/16.4 milestone Oct 19, 2026

Navigation Menu

Repository navigation

Protect Dashboard: Redesign the Login protection card - #53739

Protect Dashboard: Redesign the Login protection card#53739
enejb merged 5 commits into
trunkfrom
update/protect-dashboard-login-card

enejb commented Oct 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 16, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Oct 16, 2026 •

edited

Loading

Uh oh!

simison Oct 19, 2026 •

edited

Loading

Uh oh!

enejb Oct 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

simison Oct 19, 2026

Uh oh!

enejb Oct 19, 2026

Uh oh!

simison Oct 20, 2026 •

edited

Loading

Uh oh!

kraftbj commented Oct 19, 2026

Uh oh!

enejb commented Oct 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,90 @@
		import { ToggleControl } from '@wordpress/components';

Conversation

enejb commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Before / after

Related product discussion/links

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

Testing instructions

Uh oh!

github-actions Bot commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

simison Oct 19, 2026 • 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!

enejb Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

simison Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

enejb Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

simison Oct 20, 2026 • 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!

kraftbj commented Oct 19, 2026

Uh oh!

enejb commented Oct 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

enejb commented Oct 16, 2026 •

edited

Loading

github-actions Bot commented Oct 16, 2026 •

edited

Loading

github-actions Bot commented Oct 16, 2026 •

edited

Loading

jp-launch-control Bot commented Oct 16, 2026 •

edited

Loading

simison Oct 19, 2026 •

edited

Loading

simison Oct 20, 2026 •

edited

Loading