Gated styles: Ensure all prompts to remove premium styles automatically works

[annezazu]

Right now, if you go through onboarding and select a theme with paid style variations, you're prompted to upgrade or remove premium styles in three places: Launchpad, Front end, Site Editor. The problem is only the "remove premium styles" option in the site editor actually removes premium styles for the user, resolving the problem. At this stage, particularly during onboarding and before they've really made many style changes, we should automate this as much as possible.

I propose we automatically remove premium styles in one click at each stage, matching what's done in the site editor but taking it a step further where someone doesn't need to click "save" and it's just handled.

Launchpad

It's a dead end to show this here as the user can't even rectify it in the site editor as they haven't even been introduced to it yet! We should either automatically set to the default palette to remove premium styles or send them back to select a different theme (I say the former):

launchpad.remove.styles.mov

Front end

front.end.remove.premium.styles.mov

Site Editor

We still require folks to hit "save" here and I wonder if there's a way we can automatically save for them when other styling changes haven't been made.

site.editor.remove.premium.styles.mov

[annezazu]

Related! #95578

[ramonjd]

I think we should be able to come up with a hook to do it all: reset global styles and save.

Agree: ideally, the user shouldn't be brought to the editor in the first instance at all.

[ramonjd]

I think we should be able to come up with a hook to do it all: reset global styles and save.

It would be a useful Gutenberg hook perhaps 😄

[ramonjd]

I was just looking at this today, and it's a bit tricky 🤔

Here's the Jetpack feature code repo for reference: https://github.com/Automattic/jetpack/tree/9a96a302b7e6229a49578102f59cc7292ae49cf9/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles

The reset links (this one for example) that sit outside of the editor context do not have access to core packages, or the editor store, and therefore any selectors/actions to:

1. fetch the current global styles entity ID for the installed theme
2. reset that entity

I think it might be possible by creating a custom vanilla JS hook and utilizing the Global_Styles_Status_Rest_API class to create a new reset/save endpoint.

[ramonjd]

Starting testing over in Automattic/jetpack#40818. Taking longer as I familiarize myself with the processes.

[richtabor]

We should do a bit of design thinking on the UX here as well cc @crisbusquets.

This is odd having a toggle, with an upgrade and an external link, perhaps in the wrong order as well.

Perhaps a ToggleGroup with "Premium" and "Free" options, that when toggled reveal the effects of those styles — i.e. selecting "Free" removes the styles from the site, so you can preview it.

Then below it, a call to action, either "Upgrade" or "Remove Styles"

Here's a quick sketch:

[ramonjd]

I'm also wondering if remove styles is even required in the frontend? The CTA serves as a constant reminder that the styles don't appear on the site, and, if users do ever upgrade, the styles would appear as the user selected: they wouldn't have to go back and restore the revision.

[crisbusquets]

We should do a bit of design thinking on the UX here as well cc @crisbusquets.

Thanks for the ping, @richtabor ! Yes, I totally agree that this tooltip doesn't feel right. I like the Site Edit banner approach—perhaps we should aim for something like that instead of what's in the screenshot below, which requires an extra click to open the tooltip:

Could we use the gray background as if it was a banner?

@nuriapenya this is related to what we've been discussing about creating an upsell pattern/language that we can reuse.

[richtabor]

I like the Site Edit banner approach—perhaps

Agreed. We should consider a design where this banner notice is solely for the global styles upgrade (no other CTAs etc). It does not have to be a popover.

[annezazu]

Created #98039 to split out the lovely design discussion here! Very excited to see this getting some love and attention.