Use core button component for continue as user screens #103097

adamwoodnz · 2025-05-05T04:58:23Z

Related to DSGCOM-92: Update primary buttons on 'Continue as user'

Proposed Changes

Replace all buttons in the 'Continue as user' screens with core buttons
Apply branding to buttons where applicable
Fix the layout of the oauth client version of the screen and bring it more inline with the 'white login' version
Fix the Crowdsignal screen, which currently renders the signup form instead

Why are these changes being made?

These buttons have no visible focus styles, and are inconsistent with the buttons on the login, magic login and signup screens, which have all been replaced.

Focus styles are necessary for accessibility
Consistent button styles and behaviours form a more high quality experience

Testing Instructions

Instructions

Ensure you are logged in already
For each brand, visit the login page using the links below. Some products will show the 'Continue as user' screen on load, others (A4A, VIP, WP Cloud, Jetpack Cloud, Crowdsignal) will not (this should likely be made consistent, but is out of scope for this PR), and you will need to click 'Create account' to see it.
Check that all buttons are branded correctly. They should match buttons on the login and signup screens
Check button hover styles with mouse
Tab through the screen with your keyboard to check buttons are accessible and have focus styles
Check that the Continue as User screen is displayed when creating an account for Crowdsignal
Check mobile layout
If it exists, check that the 'Create account' link in the top right of the screen is grey and not the brand accent color

Login links

WordPress.com
Crowdsignal
Jetpack Cloud
Woo
Blaze Pro
Akismet
A4A - Can't link due to GitHub OSS scan rules: go to automatt_c.com/for-agencies/ and click 'Log in'. Edit the URL and change the host to calypso.localhost:3000
VIP
Partner Portal - Can't link due to GitHub OSS scan rules: go to hosts.automatt_c.com and you should be redirected to log in. Edit the URL and change the host to calypso.localhost:3000
WP.Cloud - Can't link due to GitHub OSS scan rules: go to wp.cloud and click 'start here'. Edit the URL and change the host to calypso.localhost:3000

Screenshots (showing buttons focused on desktop)

Brand	Desktop Before	Desktop After	Mobile
WordPress.com
Woo
Akismet
Blaze Pro
Crowdsignal
Jetpack Cloud
A4A
VIP, WP Cloud, Partner Portal

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-05T04:58:35Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-144891

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-144891&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-144891&env=a8c-for-agencies

matticbot · 2025-05-05T05:04:19Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
command-palette-wp-admin
help-center
notifications
odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug dsgcom-92-update-primary-buttons-on-continue-as-user on your sandbox.

matticbot · 2025-05-05T05:07:27Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~41 bytes added 📈 [gzipped])

Details

name                   parsed_size           gzip_size
entry-login                 +325 B  (+0.0%)      +41 B  (+0.0%)
entry-reauth-required       +152 B  (+0.0%)      +29 B  (+0.0%)
entry-main                  +152 B  (+0.0%)      +29 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~12 bytes added 📈 [gzipped])

Details

name             parsed_size           gzip_size
jetpack-connect       +173 B  (+0.0%)      +12 B  (+0.0%)
accept-invite         +173 B  (+0.0%)      +12 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~12 bytes added 📈 [gzipped])

Details

name                          parsed_size           gzip_size
async-load-signup-steps-user       +173 B  (+0.0%)      +12 B  (+0.0%)
async-load-design-blocks           +173 B  (+0.0%)      +12 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

adamwoodnz · 2025-05-14T21:24:43Z

packages/onboarding/src/step-container-v2/components/TopBar/style.scss

 	&-right-element {
 		margin-left: auto;
-		--wp-components-color-accent: var( --color-neutral-100 );
+		--color-accent: var( --color-neutral-100 );


This element uses a core link button and is blue with the new theming for these without this.

CC: @ciampo @youknowriad for input 🙏

Could you explain the issue a bit better?

I can see you're linking to some style overrides that are changing an internal variable used for text color. Why did we need those overrides in the first place, and why do we need to override those overrides? We should use the original Button specs and pick the right variant via the variant prop

Sure 🙂

The color overrides for buttons were added in #101279, and this PR expands that set to enable theming of link variants as well (which this button is). This instance of the link button is not themed though (always grey color, not the product accent color) so we need to override the accent color, which changes --wp-components-color-accent .

I see how we're trying to match the "before" design with the black text for the "Create an account" button, but it's unclear to me why it justifies a design system exception here. There are three different styles of link-like elements in this simple view. Can the "Create an account" button just use the standard accent color styling? @jasmussen

Because if this is justified, that seems like it will be a common need, and we will need to add it to the system.

Thanks all.

The top right button on http://calypso.localhost:3000/setup/onboarding/playground is now --color-neutral-100 and no longer the accent color. Is this intentional? Should we change something here? Thanks.

cc. @ashfame @akirk

No need to do anything, I'll remove this override and let the accent color shine through 🙂

if we absolutely need some overrides, they should be project-wide and live in client/assets/stylesheets/_wp-components-overrides.scss

The overrides in that file for buttons are our mechanism for applying branding per product. I can look to move all the instances where we set the button accent color for a product into this file. I agree centralizing these makes sense.

(although we should ideally remove those too)

I'm not sure how we would apply this branding if we remove these, can you suggest a better solution?

if in need of applying styles to button (not overrides), we should not use .components-button — instead, the Button should be assigned a className, and that classname should be used to add the styles;

I'll take a look at this. There is a bit of a mixture at the moment. For some brands, eg. Woo, where all the buttons share similar styles I've styled the components-button.

PR for removing the override #103610

PR for centralizing overrides for branding #103611

I left a comment on the PR that's related to that color intentionally being neutral. But it's not a strong opinion, it's more a matter of us needing to get some quick brand input.

I'm not sure how we would apply this branding if we remove these, can you suggest a better solution?

We're working on a Theme package, which should allow us to theme our components (including applying a brand color). We can keep the centralised overrides until components are Themed

adamwoodnz · 2025-05-14T21:43:17Z

client/blocks/signup-form/index.jsx

 			return null;
 		}

+		if ( this.props.currentUser && ! this.props.disableContinueAsUser ) {


Moving this before the next condition ensures it's displayed for Crowdsignal too

adamwoodnz · 2025-05-14T21:44:23Z

client/layout/index.jsx

+			'a8c-for-agencies': isA4AOAuth2Client( this.props.oauth2Client ),
+			crowdsignal: isCrowdsignalOAuth2Client( this.props.oauth2Client ),


Add classes to hook into existing styles

adamwoodnz · 2025-05-14T21:44:42Z

client/layout/index.jsx

 			'is-unified-site-sidebar-visible': this.props.isUnifiedSiteSidebarVisible,
 			'is-blaze-pro': this.props.isBlazePro,
 			'is-woo-com-oauth': isWooOAuth2Client( this.props.oauth2Client ),
+			'jetpack-cloud': isJetpackCloudOAuth2Client( this.props.oauth2Client ),


Add class to hook into existing styles

adamwoodnz · 2025-05-14T21:45:35Z

client/layout/masterbar/blaze-pro.scss

 			align-self: stretch;
 			border: 1px solid #ccc;
-			height: 221px;
+			width: 100%;


Remove unnecessary fixed height and make card fill flex column width

adamwoodnz · 2025-05-14T21:46:16Z

client/layout/masterbar/oauth-client.scss

+	--color-link: var(--studio-jetpack-green-40);
+	--color-link-dark: var(--studio-jetpack-green-60);


Use theming to change link color instead of anchor styles below, which clash with core button link styles

tellthemachines

I managed to test most of these, except for wp cloud, a4a and partner portal which on login take me to the public API URL, and that doesn't translate to Calypso. Not sure what's going on there 😕

The code looks good! Mostly questions below.

tellthemachines · 2025-05-16T06:03:49Z

client/blocks/login/continue-as-user.jsx

-					busy={ validatingPath }
+					isBusy={ validatingPath }
 					href={ validatedPath || '/' }
+					__next40pxDefaultSize


Woo and Blaze Pro sections are incredibly similar; maybe an opportunity to consolidate in a later PR?

Agreed, ideally these would all just use the white login screen

client/blocks/login/continue-as-user.scss

client/blocks/signup-form/crowdsignal.scss

adamwoodnz · 2025-05-19T01:53:26Z

One minor issue: I think it's not related to this PR, but I noticed that the back button is not aligned properly with the text in mobile view. If it's easy to fix, could you take a look? 🙏

Done in 3212bd8

Also fixed similar issues in Blaze Pro:

Screenshots

	Before	After
Desktop
Mobile

adamwoodnz · 2025-05-19T02:08:03Z

except for wp cloud, a4a and partner portal which on login take me to the public API URL, and that doesn't translate to Calypso. Not sure what's going on there 😕

Yeah it's a bit of a dance. I log into sandbox/prod, then use browser navigation to get back to the login screen and then click the 'create an account' link below the primary button:

Resulting screen and URL should be like this:

Then you can change the host.

tellthemachines · 2025-05-19T03:46:27Z

Yeah it's a bit of a dance. I log into sandbox/prod, then use browser navigation to get back to the login screen and then click the 'create an account' link below the primary button:

Oh weird, doing that just takes me to the sign up form:

adamwoodnz · 2025-05-19T03:59:25Z

Yeah it's a bit of a dance. I log into sandbox/prod, then use browser navigation to get back to the login screen and then click the 'create an account' link below the primary button:

Oh weird, doing that just takes me to the sign up form:

Weird, here's a recording, I actually end up in the continue as user screen before I go back to login, but went back there for demo purposes:

Kapture.2025-05-19.at.15.56.53.mp4

tellthemachines · 2025-05-19T04:06:43Z

Ok so clicking back once on the "Welcome to Automattic Partner Portal" screen takes me back to the wp.com continue as user screen, but there's nothing before that point in browser history. Clicking back again takes me to an empty tab 😕

I started from the hosts URL that immediately directed me to Howdy! Log into the Automattic Partner Portal with your WordPress.com account.

adamwoodnz · 2025-05-19T04:23:25Z

Ok so clicking back once on the "Welcome to Automattic Partner Portal" screen takes me back to the wp.com continue as user screen, but there's nothing before that point in browser history. Clicking back again takes me to an empty tab 😕

I started from the hosts URL that immediately directed me to Howdy! Log into the Automattic Partner Portal with your WordPress.com account.

Oh yeah I see what you mean, with a fresh tab I get the same. Let me try to find another set of steps.

adamwoodnz · 2025-05-19T04:38:04Z

Let me try to find another set of steps.

It does seem hard to get to this variant in prod for the brands I can't add login links for, but I can get to it in dev with Crowdsignal.

Login to WordPress.com in prod
Click the Crowdsignal login link in the description above
Click 'Create a new account' You should see:

And I can do the same for the other brands when I have the localhost login screen open already

tellthemachines

Thanks for the extra instructions, I've now managed to test the remaining screens. LGTM!

adamwoodnz · 2025-05-19T05:13:49Z

Thanks for the extra instructions, I've now managed to test the remaining screens. LGTM!

Thanks for persisting 😁

adamwoodnz self-assigned this May 5, 2025

adamwoodnz added Accessibility (a11y) [Feature] Authentication Everything login and authentication. [Type] Bug When a feature is broken and / or not performing as intended labels May 5, 2025

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch from 33556b8 to 77f410d Compare May 5, 2025 05:56

Base automatically changed from dsgcom-38-update-primary-buttons-on-log-in-page to trunk May 7, 2025 00:26

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch 2 times, most recently from b111fa8 to b42a06f Compare May 8, 2025 22:54

adamwoodnz changed the base branch from trunk to update/login-screens-content May 8, 2025 22:54

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch 2 times, most recently from 1b39c5e to 3ce9377 Compare May 9, 2025 05:08

tellthemachines force-pushed the update/login-screens-content branch from f842b0c to 812efc3 Compare May 13, 2025 00:07

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch 2 times, most recently from c431834 to f01e4c2 Compare May 14, 2025 02:17

Base automatically changed from update/login-screens-content to trunk May 14, 2025 04:28

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch 3 times, most recently from 3e9fcff to 38b985c Compare May 14, 2025 05:58

adamwoodnz commented May 14, 2025

View reviewed changes

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch 2 times, most recently from 6277d47 to 8ea3fdc Compare May 14, 2025 21:41

adamwoodnz commented May 14, 2025

View reviewed changes

adamwoodnz marked this pull request as ready for review May 14, 2025 21:53

tellthemachines reviewed May 16, 2025

View reviewed changes

tellthemachines approved these changes May 19, 2025

View reviewed changes

adamwoodnz added 11 commits May 19, 2025 17:14

Use core button component for continue as user

0c9abe6

Use core components for all buttons in screen

2ea2588

Theme akismet

29b3e88

Theme Blaze Pro

febe7b4

Theme Woo

3f092d3

Update oauth continue as user screen to better match white login layout

0970c36

Theme Jetpack

c2fd2d4

Theme A4A

c7e1185

Revert underlining button

19ab3cb

Fix and theme Crowdsignal

b297a73

Fix Blaze Pro back navigation layout

9832ea6

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch from 3212bd8 to d915c91 Compare May 19, 2025 05:15

tellthemachines mentioned this pull request May 19, 2025

Use core buttons on accept invite screen #103448

Closed

8 tasks

Fix Woo mobile back navigation layout

936825f

adamwoodnz force-pushed the dsgcom-92-update-primary-buttons-on-continue-as-user branch from d915c91 to 936825f Compare May 19, 2025 22:57

adamwoodnz merged commit f3c13a2 into trunk May 21, 2025
12 checks passed

adamwoodnz deleted the dsgcom-92-update-primary-buttons-on-continue-as-user branch May 21, 2025 00:08

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 21, 2025

This was referenced May 21, 2025

Remove color override from stepper nav top bar right element #103610

Merged

Centralize brand color overrides for core buttons in login and signup #103611

Merged

		'a8c-for-agencies': isA4AOAuth2Client( this.props.oauth2Client ),
		crowdsignal: isCrowdsignalOAuth2Client( this.props.oauth2Client ),

		--color-link: var(--studio-jetpack-green-40);
		--color-link-dark: var(--studio-jetpack-green-60);

Use core button component for continue as user screens #103097

Use core button component for continue as user screens #103097

Uh oh!

Conversation

adamwoodnz commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Instructions

Login links

Screenshots (showing buttons focused on desktop)

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

matticbot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamwoodnz May 14, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 19, 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!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 21, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamwoodnz May 14, 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!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

adamwoodnz commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Uh oh!

adamwoodnz commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tellthemachines commented May 19, 2025

Uh oh!

adamwoodnz commented May 19, 2025

adamwoodnz commented May 5, 2025 •

edited

Loading

github-actions bot commented May 5, 2025 •

edited by matticbot

Loading

matticbot commented May 5, 2025 •

edited

Loading

matticbot commented May 5, 2025 •

edited

Loading

adamwoodnz May 14, 2025 •

edited

Loading

adamwoodnz May 19, 2025 •

edited

Loading

adamwoodnz May 21, 2025 •

edited

Loading

adamwoodnz May 14, 2025 •

edited

Loading

adamwoodnz commented May 19, 2025 •

edited

Loading

adamwoodnz commented May 19, 2025 •

edited

Loading

adamwoodnz commented May 19, 2025 •

edited

Loading

adamwoodnz commented May 19, 2025 •

edited

Loading