Change default colour scheme for new accounts created from eCommerce trials flow

[daledupreez]

Edited by Ilyas

Acceptance criteria

1. New user accounts created via WooCommerce.com should have their default WordPress.com color scheme set to modern

Dev exploration notes

• I believe the best and simplest way to achieve this is by adding a check during account creation to either flag users coming from WCCOM (oauthclient ids 50019, 50915, 50916), or straight up update their options/preferences during the account creation.
• While exploring WPCOM codes, I bumped into stuff to update the color scheme. May have some helpful pointers fbhepr%2Skers%2Sjcpbz%2Sova%2Sgrfgf%2Svfbyngrq%2Sfhvgrf%2SNqzvaPbybeFpurzrfGrfg.cuc%3Se%3Q40nr07p9%2349%2Q110-og

[daledupreez]

I took a quick look at this, and we may be able to use a similar approach to that used by P2 (see https://github.com/Automattic/wp-calypso/blob/trunk/client/assets/stylesheets/style.scss#L15), though we'd need to ensure that we have some top-level classname to hook into. One possible place for this is here, but that may be overkill.

[daledupreez]

During a call yesterday, @xristos3490 mentioned that he has looked into this from the Jetpack/wp-admin side of things and he found that was relatively complicated. I took another look earlier today, and I think it may actually be super-simple:

1. On the site itself, we can add a filter in wp-calypso-bridge that overrides the admin_color user option using code like the following:

   function wc_calypso_bridge_wooexpress_override_admin_color( $admin_color ) {
   global $_wp_admin_css_colors;
   
   if ( ! wc_calypso_bridge_is_ecommerce_trial_plan() ) {
       return $admin_color;
   }
   
   if ( array_key_exists( 'fresh', $_wp_admin_css_colors ) ) {
       return 'fresh';
   }
   
   return $admin_color;
   }
   add_filter( 'get_user_option_admin_color', 'wc_calypso_bridge_wooexpress_override_admin_color', 20, 1 );

2. We'd then need to solve for the Calypso experience, which I looked into a bit in my earlier comment.

Also for general debugging of the CSS, it's much easier to add concat-css=0 as a URL parameter to disable CSS concatenation in the page-optimize plugin (see Automattic/page-optimize for docs).

[that-mike-bal]

This is not a real blocker for launch - we should try and squeeze it in if we can but I wouldn't prioritize it over the bugs/weirdness we still have.

[xristos3490]

Here's why I believe this is more complex than it meets the eye:

• The user's selected color scheme is a user-specific setting, not a site-wide one; handling this in a site-based approach would create confusion.
• Even if we fix this in wp-admin by filtering the get_user_option_admin_color, we still need to create a new color scheme that mimics the WordPress classic theme (Apparently, Calypso doesn't include one that does that. (?))
• "Hacking" the colors in Calypso creates an inconsistency regarding what the user sees under User > Account Settings > Interface Settings. In this box, there is a clear indication that the theme uses "red-ish" buttons. See https://d.pr/i/1aawc5 Moreover, look at more generic Calypso pages like "My Sites," "Account Preferences," "Me," and other pages that are completely decoupled from an "active site."

In terms of Calypso, the most robust approach would be to eventually switch the default color scheme to a more WP-friendly one. (Also, one that doesn't hurt the eyes with so much red :))

One approach that solves half the problem is:

• Leaving things as is in Calypso, and;
• Introducing a new color scheme, e.g., "Classic WordPress."

Then, as @daledupreez suggested, filtering the wp-admin when:

• User is currently on an ecommerce (trial?) plan; and
• User uses the Classic Dark default color scheme.

This isn't ideal, but hardcoding colors based on body classes like the --color-accent in Calypso would be even more confusing, I think.

Thoughts?

[that-mike-bal]

Ok, let's save this for later. It would be a nicer and more beautiful experience but I think it might be easier to add a simple task list step to let them choose a color scheme or just use their global styles colors/homepage design decisions. None of this is critical for launch compared to the other experiences we need to polish up.

[manospsyx]

As @xristos3490 said, the color scheme is a user setting, not a site setting, and therefore it's not a great idea to alter it by plan as a long term solution.

@daledupreez @xristos3490 I think we have two options:

• As a temporary solution, accept that there's going to be a discrepancy in what the same user will see in a Commerce site vs a Business site, and patch the default Jetpack and Calypso color scheme at a site level.
• Or, as a long term solution, (i) create a new color scheme that adopts blue and (ii) set it as the user default for accounts created via the WooX NUX flow, to minimize discussions with other WP.com plan owners/stakeholders.

None of this is critical for launch

Agreed. We have very few high leverage initiatives to pursue to ship a product that users will start to like, if not love. This may not be one of those, but those pink strokes deplete the users' cognitive reserves much faster that we think, in my opinion. We should approach this as a low severity, high-priority bug -- not as an improvement.

[that-mike-bal]

That's a good way to frame it. @manospsyx can we do a SWW + Mike synch early next week to organize/prioritize the issues we have on the board?

Maybe we include @FlorianBru to make sure we have pending design tasks accounted for with placeholders?

[that-mike-bal]

@manospsyx can we track the actual implementation as a different issue after @FlorianBru has a design for the scheme? I would say the "investigate" piece is done, right?

[manospsyx]

@that-mike-bal assuming that we take this path:

Or, as a long term solution, (i) create a new color scheme that adopts blue and (ii) set it as the user default for accounts created via the WooX NUX flow, to minimize discussions with other WP.com plan owners/stakeholders

I agree that it makes sense for Florian/Design to:

• start a PT,
• define the details of the new design,

and then we can look into the "who" of the implementation.

[that-mike-bal]

Hey @FlorianBru looks like Poli did thisfor us https://woomarketplace.wordpress.com/2023/03/27/woo-color-scheme-for-the-vendor-dashboard/

[warrendholmes]

@daledupreez Just moving the conversation here from p9h1Lv-8jv-p2#comment-16102 .

We should set the color scheme to Modern for all new users that sign up at https://wordpress.com/start/wpcc/oauth2-user?ref=oauth2&oauth2_redirect=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%2F%3Fresponse_type%3Dcode%26client_id%3D50916%26state%3Dbd2fd5421fc3cb9f74859a58b6a14a0ff4d78d0ab03b3d4ca3e0082697e2e3cf%26redirect_uri%3Dhttps%253A%252F%252Fwoocommerce.com%252Fwc-api%252Fwpcom-signin%253Fnext%253Dstart%2526source%253Dsignup_menu%26blog_id%3D0%26wpcom_connect%3D1%26wccom-from%26calypso_env%3Dproduction%26jetpack-code%26jetpack-user-id%3D0%26action%3Doauth2-login%26from-calypso%3D1&oauth2_client_id=50916

@adrianduffell's team maintains that, so should be able to identify the right place/time to change the colour scheme.

[ilyasfoo]

I can think of 2 approaches:

1. Add another parameter when a user signs up via NUX, pass that parameter through wp-calypso via queryArgs. Then we should be able to use that parameter in WPCOM backend to set users' default colour scheme when it exists.
2. We could set the default color scheme for users created via oauth with oauthclient IDs 50019, 50915, 50916 (WooCommerce.com Dev, Staging, and Production)

Option #1 seems to be safer to me since it's more specific for Woo Express signup instead of all use cases for WooCommerce.com.

[xristos3490]

My initial investigation was related to how we could patch the colors of the default color scheme. Changing the scheme entirely sounds much more straightforward. Although, here are a few sanity thoughts:

• Working with the user preference suppose to be a global setting and, therefore, will apply to all admin areas, including atomic sites.
• If we change/filter the scheme on sites from a specific origin (like WCCOM etc.) and the current user has already some more sites hosted on dotCom, then that could be tricky: What will display in, e.g., the wordpress.com/me page? Which scheme will be used, and how will the user be able to select/change the current one?

I guess my point will be that it's a good idea to make this change globally and only for merchants that:

• Are newcomers with no additional sites; and
• Coming from a specific origin.

That should probably:

• Minimize the risk of introducing a scheme per site feature which isn't supported in settings, and
• Merchants will have the ability to change it according to their preferences.

[warrendholmes]

@xristos3490 Yep, agreed. We should only enable this for users who sign up for the first time on WPCOM when they come from WCCOM.

[daledupreez]

@ilyasfoo, I don't believe we can determine the user's intent at the time that they are creating the account, or assume that they will continue in any specific flow after creating the account.

While we might allow a new URL parameter to identify the flow, it may be simpler to default the colour scheme for all users coming from WooCommerce.com to create new WordPress.com accounts.

[ilyasfoo]

While we might allow a new URL parameter to identify the flow, it may be simpler to default the colour scheme for all users coming from WooCommerce.com to create new WordPress.com accounts.

Sounds good! To be clear, this is already possible by using the oauthclient IDs in WPCOM backend as a means to identify users coming from WooCommerce.com

[ilyasfoo]

Hi @daledupreez, I'd like to get a sanity check on the changes in D113479-code.

I'm a little bit unsure if this is the most suitable place to put it, the function is already lengthy as is. But it does seem like it has the least amount of possible side effects and tech debt. Appreciate it if you could take a quick look, thanks!

[ilyasfoo]

Deployed, now all users who sign up for an account via WCCOM will have their profile set to Modern

[verofasulo]

Deployed, now all users who sign up for an account via WCCOM will have their profile set to Modern

@ilyasfoo, you made my dream come true. 💜