Fix Woo login layout issues #103445

tellthemachines · 2025-05-15T02:59:09Z

Follow-up from #102811 and #102353.

As per @jsnajdr's comment, a few of the Woo login screens look a bit broken after my recent changes.

This PR fixes those issues by making sure WooJPC screens don't accidentally get treated as isWhiteLogin. It also fixes the faulty switch statement that was causing some incorrect headings.

The screens in question can be directly reached with the following URLs:

http://calypso.localhost:3000/log-in?from=woocommerce-onboarding&lostpassword_flow=true

http://calypso.localhost:3000/log-in?from=woocommerce-core-profiler

Because I don't know how a regular user would reach these URLs (they're different from both login and get started > wordpress.com flows available from https://woocommerce.com/), I'm not sure if they would ever display exactly in that shape. Given one of the conditions for isWhiteLogin to be true is the query not containing a client_id, if the path to those screens were to inject that query parameter they would display differently.

Testing Instructions

Check that the above linked screens display with only one header and that their headings make sense:

(The weird blue line at the top of the second one is a masterbar__progress-bar and I'm not sure why it displays there but it seems unrelated to my PRs)

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-15T02:59:21Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-05-15T02:59:54Z

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

App Entrypoints (~12 bytes removed 📉 [gzipped])

Details

name         parsed_size           gzip_size
entry-login        -92 B  (-0.0%)      -12 B  (-0.0%)

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

Sections (~33 bytes removed 📉 [gzipped])

Details

name             parsed_size           gzip_size
jetpack-connect       -129 B  (-0.0%)      -33 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 (~33 bytes removed 📉 [gzipped])

Details

name                      parsed_size           gzip_size
async-load-design-blocks       -129 B  (-0.0%)      -33 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.

tellthemachines · 2025-05-15T03:01:31Z

@elazzabi and @chihsuan I added you here in hopes you can help with locating the flows that lead to the login screens pictured above 🙏

chihsuan · 2025-05-15T03:33:01Z

@elazzabi and @chihsuan I added you here in hopes you can help with locating the flows that lead to the login screens pictured above 🙏

Hey @tellthemachines, thanks for the ping! The flow is triggered when a user complete onboarding wizard in a WooCommerce store.

Steps for the flow:

Create a JN site with WooCommerce installed
Go to WooCommerce if it's not redirected to onboarding wizard
Complete onboarding wizard with Jetpack installed
See the login screens

This is full URL that it would be like:

https://wordpress.com/jetpack/connect/authorize?client_id=244540207&redirect_uri=https%3A%2F%2Fsecretly-magic.jurassic.ninja%2Fwp-admin%2Fadmin.php%3Fhandler%3Djetpack-connection-webhooks%26action%3Dauthorize%26_wpnonce%3De405117e02%26redirect%3Dhttps%253A%252F%252Fsecretly-magic.jurassic.ninja%252Fwp-admin%252Fadmin.php%253Fpage%253Dwc-admin&state=1&scope=administrator%3A917cc5535fdb393debecd6182ce19f28&[email protected]&user_login=test&jp_version=14.7-a.1&secret=0c8xDeTxWgs9leDz088Ecg68WkNA9NKY&blogname=Secretly%20Magic&site_url=https%3A%2F%2Fsecretly-magic.jurassic.ninja&home_url=https%3A%2F%2Fsecretly-magic.jurassic.ninja&site_icon=&site_lang=en_US&site_created=2025-05-15%2003%3A20%3A29&allow_site_connection=1&calypso_env=production&source=&_as=wp-cli&locale=en&from=woocommerce-core-profiler&plugin_name=woocommerce-payments&color_scheme=default&_ui=42367338&_ut=wpcom%3Auser_id&purchase_nonce=iKUqeUq0&_wp_nonce=35fc1cbdf1&redirect_after_auth=https%3A%2F%2Fsecretly-magic.jurassic.ninja%2Fwp-admin%2Fadmin.php%3Fpage%3Dwc-admin&site=https%3A%2F%2Fsecretly-magic.jurassic.ninja

I think it's unrelated to your PRs, but the button colors are incorrect. They should be wp theme color (blue), depending on the store's primary color.

(The weird blue line at the top of the second one is a masterbar__progress-bar and I'm not sure why it displays there but it seems unrelated to my PRs)

Showing the progress bar is expected.

andrewserong

LGTM! I did a quick check of WordPress.com, Blaze, Jetpack, and A4A logins, and they were all looking good.

I found one more login while playing around with WooCommerce after installing on a Jurassic Ninja site. It appears when you click to on "Connect Jetpack" from the Stats card after finishing the WooCommerce onboarding (this is the button):

It looks like it's a styled version of the Jetpack login? A simplified test URL that appears to get to this login state is this one: https://wordpress.com/log-in/jetpack?from=woocommerce-onboarding

It displays the login form and social icons stacked, with the OR text in the wrong position:

That could be looked at separately to this PR, though.

I think it's unrelated to your PRs, but the button colors are incorrect. They should be wp theme color (blue), depending on the store's primary color.

Similarly, this feels like a lower priority issue to me (but thanks for flagging it!)

I reckon this PR will be good to get in 🚀

tellthemachines · 2025-05-15T04:50:02Z

Thanks for the detailed instructions @chihsuan! I don't think those are the exact same screens though.

Setting up a JN site and going through the WooCommerce onboarding (after setup I was taken to wp-admin so had to click on "WooCommerce" in the sidebar) this is what I'm getting:

"Create an account" looks like it belongs to the same family design-wise, but it doesn't appear broken in production like the screens @jsnajdr found:

This is login:

Note the single column layout (it looks like something's slightly off with the center alignment of the content btw)

And this is lost password:

The lost password screen I'm looking for should say "You've got mail" in the heading.

It would be great to get to the bottom of this, because if by any chance those screens aren't in use any more, there's a bunch of logic we can remove from the login components 😄

tellthemachines · 2025-05-15T05:39:58Z

Update: just realised I borked the lost password heading in extracting getHeaderText in #102811 so pushed a commit to fix that.

matticbot · 2025-05-15T05:46:31Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/woo-login-screens on your sandbox.

chihsuan · 2025-05-15T05:46:33Z

Thanks for the detailed instructions @chihsuan! I don't think those are the exact same screens though.

Setting up a JN site and going through the WooCommerce onboarding (after setup I was taken to wp-admin so had to click on "WooCommerce" in the sidebar) this is what I'm getting:

To clarify, the isWooJPC flag is used to determine if it's a Woo-branded Jetpack connection flow. The flow are currently used for the following:

WooCommerce onboarding jetpack connection flow: include woocommerce-core-profiler or woocommerce-onboarding (This has been deprecated, just for backward compatibility) in the URL
WooPayments plugin jetpack connection flow: Include woocommerce-payments in the URL

This is login:

I'm not sure what's going on, but the screens look completely broken. 😢

The login screen should be look like this:

And create an account screen:

The lost password screen I'm looking for should say "You've got mail" in the heading.

It should display "Forgot your password?" in the heading.

04 Jetpack connection - Logged in user _ Sign in as a different user _ Forgot password@2x

And after users enter their email address and click on the reset button, it should be changed to "You've got mail".

tellthemachines · 2025-05-15T05:48:32Z

I think it's unrelated to your PRs, but the button colors are incorrect. They should be wp theme color (blue), depending on the store's primary color.

Looks like the button colors changed in #102639, because these screens also have the is-woo-passwordless classname. Cc @adamwoodnz guess what... we've found some more screens 😅

tellthemachines · 2025-05-15T06:07:45Z

This is login:

I'm not sure what's going on, but the screens look completely broken. 😢

Looks like it's been broken for a while. I checked out a local branch from early last week, and this is what it looks like:

It doesn't reflow to 2 cols on widening the screen, and it doesn't center the content properly either - that big top margin stays in place if I reduce the height.

tellthemachines · 2025-05-15T06:20:51Z

Ok the bad layout seems to mostly be due to a wrapper added around the form contents so they no longer get the flex rules applied to the form element:

Those changes were introduced in #102877, which updated the Jetpack login so they were probably not meant to also affect this screen.

chihsuan · 2025-05-15T06:39:35Z

Those changes were introduced in #102877, which updated the Jetpack login so they were probably not meant to also affect this screen.

Thanks for looking into it! 🙏 @tellthemachines FYI, the team in Woo who maintain these screens is gone, I'm also not working on this anymore. However, please feel free to let me know if anything requires review or testing. I have also raised the issue with my team lead to see if we can get some help on this.

jsnajdr · 2025-05-15T11:12:06Z

client/blocks/login/login-header.tsx

-	}
-
-	if ( isFromMigrationPlugin ) {
+	} else if ( isFromMigrationPlugin ) {


I'm curious about this "migration plugin" flow. It's active when there is a from=wpcom-migration query param, and its layout is now also broken.

@jeherve @anomiex Is this wpcom-migration plugin and the redirects to /log-in?from=wpcom-migration (or Jetpack Connect with the same query param) still active? I see that the Automattic/wpcom-migration repo has been archived a few months ago, the "Move to WordPress.com" plugin is no longer in the .org repo, and there is only a "Migrate to WordPress.com" plugin based on BlogVault.

That sounds almost like this flow is no longer used and could be removed.

The version of the plugin that connected to WordPress.com via this flow is indeed no longer in use. The new version of the plugin doesn't use that flow. I think we could remove it.

All I know about the wpcom-migration is that it was created in the monorepo, had a few releases, then nothing for a while until apparently they decided to replace it with a reskin of an existing (external) plugin. Whether this code path is still used from somewhere (e.g. the existing plugin from the external partner) I have no idea.

Sounds like a good candidate for a follow-up PR!

Following up in #103766 which removes most of the wpcom-migration customizations.

elazzabi · 2025-05-15T11:19:25Z

Thanks for the ping @tellthemachines ! I'll review this from our end and see if I can spot anything.

I'll also double-check if any flow is deprecated so we can remove it.

tellthemachines · 2025-05-16T04:04:52Z

@elazzabi thanks, that would be very helpful!

I tried testing the lost password screen again based on what @chihsuan mentioned above:

And after users enter their email address and click on the reset button, it should be changed to "You've got mail".

After entering email and clicking reset this is what I'm seeing:

The URL for this screen is /log-in/jetpack/link followed by a query string including from=woocommerce-core-profiler.

So it's not exactly the same screen we get with /log-in?from=woocommerce-onboarding&lostpassword_flow=true.

Are we still using any non-Jetpack login for Woocommerce? If not, we should be able to remove some of the conditionals from the Login components.

tellthemachines · 2025-05-16T04:11:23Z

Thanks everyone for the feedback and suggestions on this PR! Whether those particular screens are in use or not, this still fixes logic that is causing some lost password screens to get the wrong heading, so would be good to merge soon. If Woo folks are happy with the changes, feel free to go ahead and merge it, otherwise I'll leave it until Monday. It's already Friday afternoon here, which is an inauspicious time for deployments 😅

andrewserong · 2025-05-16T04:18:30Z

If Woo folks are happy with the changes, feel free to go ahead and merge it, otherwise I'll leave it until Monday. It's already Friday afternoon here, which is an inauspicious time for deployments 😅

Sounds great. +1 to merging this on Monday if it's still open by then. Thanks for the follow-up work here!

chihsuan · 2025-05-16T05:55:13Z

Are we still using any non-Jetpack login for Woocommerce? If not, we should be able to remove some of the conditionals from the Login components.

We're using non-Jetpack login for WooCommerce.com link but not for core profiler/onboarding flows that coming from WooCommerce plugins.

We don't need to fix anything for the /log-in?from=woocommerce-onboarding&lostpassword_flow=true or /log-in?from=woocommerce-core-profiler. Regular users shouldn't see these pages.

jsnajdr · 2025-05-15T12:13:56Z

client/blocks/login/login-header.tsx

-					}
-				);
+		if ( isLostPasswordFlow ) {
+			header = <h3>{ headerText }</h3>;


Here the header assignment can be extracted out of the condition, it's always the same. Only the subtitle is conditional.

elazzabi

Tried it for WooPayments onboarding, looks good (other than the misalignment of the OR in the login page)

jsnajdr · 2025-05-16T09:51:07Z

The "lost password" flow still has a broken <ContinueAsUser> layout, as reported in #102811 (comment):

This is probably not a realistic scenario: going through the lost password flow while being logged in. But the reason for the breakage is interesting: it's the .woo .continue-as-user style overrides in client/layout/masterbar/woo.scss. This file has 2300 lines of CSS overrides, mostly not really related to any masterbar. We should aim for most of these style overrides to be removed. It's not justified that a Woo variant of a page implements a completely different CSS layout for certain markup (using grid for example). The overrides should be limited only to styles related to the brand: fonts, colors, logos.

tellthemachines · 2025-05-19T01:29:47Z

The "lost password" flow still has a broken <ContinueAsUser> layout, as reported in #102811 (comment):

That breakage wasn't introduced in that PR though. Blame shows the styles causing breakage have been around for over a year, probably from when the current passwordless screen was designed.

In any case, the double header is now fixed:

The overrides should be limited only to styles related to the brand: fonts, colors, logos.

Yes, and I believe there's some ongoing design work for unifying all these screens across brands. Even before that there's probably some cleanup that can be done on those styles while preserving the current designs. It's better addressed as a follow-up PR though.

looks good (other than the misalignment of the OR in the login page)

The single-column layout with the 'OR' misaligned was introduced in #102877 and should be fixed separately as it'll require making sure both the Woo and the Jetpack logins are unaffected. Cc @gmjuhasz

If all else is good, I'll go ahead and deploy this in the next couple of hours.

Fix Woo login layout issues

e372d67

tellthemachines requested review from a team, chihsuan, elazzabi and jsnajdr May 15, 2025 02:59

tellthemachines self-assigned this May 15, 2025

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 15, 2025

andrewserong approved these changes May 15, 2025

View reviewed changes

Get the right heading if lost password and also isJetpack

30dbeee

jsnajdr reviewed May 15, 2025

View reviewed changes

jsnajdr mentioned this pull request May 16, 2025

Remove the jetpack/magic-link-signup flag #103479

Merged

jsnajdr reviewed May 16, 2025

View reviewed changes

Improve LoginHeader logic.

4e2008e

elazzabi approved these changes May 16, 2025

View reviewed changes

tellthemachines merged commit 8e23cf7 into trunk May 19, 2025
14 checks passed

tellthemachines deleted the fix/woo-login-screens branch May 19, 2025 03:16

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 19, 2025

andrewserong mentioned this pull request May 20, 2025

Blaze Pro 2FA login screen: fix layout and styling issues #103537

Merged

8 tasks

gmovr mentioned this pull request May 20, 2025

Logged out layout: Fix masterbar #103563

Merged

8 tasks

jsnajdr mentioned this pull request May 28, 2025

Remove wpcom-migration customization from Login and Jetpack Connect #103766

Merged

Fix Woo login layout issues #103445

Fix Woo login layout issues #103445

Uh oh!

Conversation

tellthemachines commented May 15, 2025

Testing Instructions

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

chihsuan commented May 15, 2025

Uh oh!

andrewserong left a comment

Choose a reason for hiding this comment

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

matticbot commented May 15, 2025

Uh oh!

chihsuan commented May 15, 2025

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

tellthemachines commented May 15, 2025

Uh oh!

chihsuan commented May 15, 2025

Uh oh!

jsnajdr May 15, 2025

Choose a reason for hiding this comment

Uh oh!

jeherve May 15, 2025

Choose a reason for hiding this comment

Uh oh!

anomiex May 15, 2025

Choose a reason for hiding this comment

Uh oh!

tellthemachines May 16, 2025

Choose a reason for hiding this comment

Uh oh!

jsnajdr May 28, 2025

Choose a reason for hiding this comment

Uh oh!

elazzabi commented May 15, 2025

Uh oh!

tellthemachines commented May 16, 2025

Uh oh!

tellthemachines commented May 16, 2025

Uh oh!

andrewserong commented May 16, 2025

Uh oh!

chihsuan commented May 16, 2025

Uh oh!

jsnajdr May 15, 2025

Choose a reason for hiding this comment

Uh oh!

tellthemachines May 16, 2025

Choose a reason for hiding this comment

Uh oh!

elazzabi left a comment

Choose a reason for hiding this comment

Uh oh!

jsnajdr commented May 16, 2025

Uh oh!

tellthemachines commented May 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

github-actions bot commented May 15, 2025 •

edited by matticbot

Loading

matticbot commented May 15, 2025 •

edited

Loading