Limit Global Styles: Add premium badge to style selection during onboarding #69082

mmtr · 2022-10-14T15:02:24Z

Fixes https://github.com/Automattic/dotcom-forge/issues/896

Proposed Changes

Adds the premium badge to the style selection during onboarding.

To achieve this, I decided to slightly refactor the premium badge component introduced by #68841 to better support this use case:

The component is now in the generic components folder.
We can now set different tooltip messages.

Testing Instructions

Use the Calypso live link below
Go to /start and create a new free site
Stop at the "Pick a design" step
Select a theme with multiple style variations
In the sidebar, make sure that all the variations except the default one contain a premium badge
Make sure the premium badge displays a tooltip when hovering it
Go to /start again and create a new paid site now
Stop at the "Pick a design" step
Select a theme with multiple style variations
Make sure the premium badge doesn't show up in any variation

github-actions · 2022-10-14T15:02:37Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-10-14T15:12:54Z

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

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

name           parsed_size           gzip_size
entry-stepper       +602 B  (+0.0%)     +204 B  (+0.0%)

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

Sections (~67 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
woocommerce-installation               +30 B  (+0.0%)      +13 B  (+0.0%)
themes                                 +30 B  (+0.0%)      +13 B  (+0.0%)
theme                                  +30 B  (+0.0%)      +13 B  (+0.0%)
stats                                  +30 B  (+0.0%)      +13 B  (+0.0%)
sites-dashboard                        +30 B  (+0.0%)      +13 B  (+0.0%)
site-purchases                         +30 B  (+0.0%)      +16 B  (+0.0%)
signup                                 +30 B  (+0.0%)      +13 B  (+0.0%)
settings-writing                       +30 B  (+0.0%)      +13 B  (+0.0%)
settings-security                      +30 B  (+0.0%)      +13 B  (+0.0%)
settings-performance                   +30 B  (+0.0%)      +13 B  (+0.0%)
settings-jetpack                       +30 B  (+0.0%)      +13 B  (+0.0%)
settings-discussion                    +30 B  (+0.0%)      +13 B  (+0.0%)
settings                               +30 B  (+0.0%)      +13 B  (+0.0%)
scan                                   +30 B  (+0.0%)      +13 B  (+0.0%)
purchases                              +30 B  (+0.0%)      +16 B  (+0.0%)
purchase-product                       +30 B  (+0.0%)      +13 B  (+0.0%)
posts-custom                           +30 B  (+0.0%)      +13 B  (+0.0%)
posts                                  +30 B  (+0.0%)      +13 B  (+0.0%)
plugins                                +30 B  (+0.0%)      +19 B  (+0.0%)
plans                                  +30 B  (+0.0%)      +13 B  (+0.0%)
people                                 +30 B  (+0.0%)      +13 B  (+0.0%)
migrate                                +30 B  (+0.0%)      +13 B  (+0.0%)
media                                  +30 B  (+0.0%)      +19 B  (+0.0%)
marketplace                            +30 B  (+0.0%)      +13 B  (+0.0%)
marketing                              +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-social                         +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-search                         +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-connect                        +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-settings                 +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-pricing                  +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-plugin-management        +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-partner-portal           +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-agency-dashboard         +30 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud                          +30 B  (+0.0%)      +13 B  (+0.0%)
hosting                                +30 B  (+0.0%)      +13 B  (+0.0%)
home                                   +30 B  (+0.0%)      +13 B  (+0.0%)
help                                   +30 B  (+0.0%)      +13 B  (+0.0%)
google-my-business                     +30 B  (+0.0%)      +13 B  (+0.0%)
email                                  +30 B  (+0.0%)      +13 B  (+0.0%)
earn                                   +30 B  (+0.0%)      +13 B  (+0.0%)
domains                                +30 B  (+0.0%)      +13 B  (+0.0%)
checkout                               +30 B  (+0.0%)      +16 B  (+0.0%)
backup                                 +30 B  (+0.0%)      +13 B  (+0.0%)
add-ons                                +30 B  (+0.0%)      +13 B  (+0.0%)
activity                               +30 B  (+0.0%)      +13 B  (+0.0%)
accept-invite                          +30 B  (+0.0%)      +13 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 (~100 bytes added 📈 [gzipped])

name                                                              parsed_size           gzip_size
async-load-automattic-design-preview                                   +259 B  (+0.0%)      +69 B  (+0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                        +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-design-playground                                            +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-design-blocks                                                +30 B  (+0.0%)      +18 B  (+0.0%)
async-load-design                                                       +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-reader-sidebar                                       +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal                       +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice        +30 B  (+0.0%)      +13 B  (+0.1%)
async-load-calypso-my-sites-current-site-notice                         +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-components-web-preview-component                     +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-components-jetpack-sidebar                           +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                 +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-blocks-jitm-templates-notice                         +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-blocks-jitm-templates-default                        +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover                           +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                         +30 B  (+0.0%)      +13 B  (+0.0%)
async-load-automattic-help-center                                       +30 B  (+0.0%)      +13 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.

BogdanUngureanu · 2022-10-14T15:36:43Z

Nice work, Miguel! Works great on desktop, however on mobile I've noticed some small glitches while testing it on my phone:

The tooltip is not getting closed when I tap outside of the menu (e.g. in the content area, which occupies the most part of the screen).
Sometimes, when I click on the other styles, the tooltip still remains open (not always, but I would say around 50% of the time).

Copons · 2022-10-14T15:43:31Z

@mmtr it's possible to get to the style selection with an upgraded site already; in that case, we shouldn't show the Premium badge.

How do you feel about creating some sort of usePremiumGlobalStyles hook that would encapsulate the details relevant to the gating experience, something like these (just to give an idea of what I mean): planSupportsPremiumGlobalStyles, isUsingPremiumGlobalStyles, shouldShowPremiumGlobalStylesNotices.

packages/design-preview/src/components/style-variation.tsx

…styles-onboarding-notice

…t buttons

mmtr · 2022-10-17T14:55:37Z

The tooltip is not getting closed when I tap outside of the menu

I don't think I can fix that, since the preview below has a pointer-events: all property that's capturing all click events and preventing the Popover's onClickOut callback from being run.

Apparently the pointer-events: all property is needed to preview a site that a user can scroll but cannot interact with otherwise.

So, we either (1) keep the current behavior that only show/hide the tooltips upon clicking on them or (2) completely disable the tooltips on the mobile viewport. I personally prefer the first option.

Sometimes, when I click on the other styles, the tooltip still remains open

For some reason I don't understand, the same onClickOut callback doesn't run under some circumstances. However, I'm unable to determine why, and after having spent a couple of hours looking into it, I don't think it's worth to look into it further. If you think this is a blocker, then I think the best thing we can do is to completely disable the tooltip on mobile.

…styles-onboarding-notice

…premium badge

Copons · 2022-10-18T13:57:27Z

client/landing/stepper/hooks/use-premium-global-styles.ts

+	return {
+		shouldLimitGlobalStyles,
+	};
+}


I wonder if /landing/stepper is the right place for this hook, but at the same time, I don't see a more generic location that would be a good fit for it. 🤔

(Not a blocker, just a consideration.)

Yeah, I wondered about that too and initially added it to the calypso/lib path, but it felt a bit off so I finally moved it to where most of these generic hooks are.

a8ci18n · 2022-10-18T18:17:52Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7583529

Thank you @mmtr for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2022-10-27T16:31:21Z

Translation for this Pull Request has now been finished.

mmtr added 6 commits October 14, 2022 10:07

Limit Global Styles: Add notice to style selection during onboarding

b3765c5

Move premium badge component to components folder

73e99de

Allow custom classes in the premium badge component

eb61f1b

Set margin left needed for newsletter onboarding with a custom class

9f04e10

Show premium badge in style selection during onboarding

bca21de

Simplify refactor

82b70eb

mmtr added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Feature] Global Styles The Global Styles tools in the site editor and theme style variations. labels Oct 14, 2022

mmtr requested review from a team October 14, 2022 15:02

mmtr self-assigned this Oct 14, 2022

taipeicoder reviewed Oct 17, 2022

View reviewed changes

packages/design-preview/src/components/style-variation.tsx Outdated Show resolved Hide resolved

mmtr added 5 commits October 17, 2022 11:54

Merge remote-tracking branch 'origin/trunk' into update/limit-global-…

6a4bf68

…styles-onboarding-notice

Add usePremiumGlobalStyles hook

2c96819

Do not render badge on sites with full access to Global Styles

e5780ac

Fix styles for tooltips placed at the bottom

be9f94c

Convert premium badge to div to prevent side effect with nested/paren…

df17fad

…t buttons

mmtr added 7 commits October 18, 2022 10:54

Merge remote-tracking branch 'origin/trunk' into update/limit-global-…

e99abc4

…styles-onboarding-notice

Declare module

7f3e0c0

Avoid external dependencies

9bbf5bc

Use more specific name for the function that shows the Global Style' …

69e9ed2

…premium badge

Fix invalid call

fa05b93

Fix tooltip text

3fa99e2

Return null if premium badge should be displayed

bf99d66

Copons reviewed Oct 18, 2022

View reviewed changes

Copons approved these changes Oct 18, 2022

View reviewed changes

Copons added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 18, 2022

mmtr merged commit c9bee74 into trunk Oct 18, 2022

mmtr deleted the update/limit-global-styles-onboarding-notice branch October 18, 2022 16:10

github-actions bot removed the [Status] Ready to Merge label Oct 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Limit Global Styles: Add premium badge to style selection during onboarding #69082

Limit Global Styles: Add premium badge to style selection during onboarding #69082

mmtr commented Oct 14, 2022 •

edited

Loading

github-actions bot commented Oct 14, 2022 •

edited by matticbot

Loading

matticbot commented Oct 14, 2022 •

edited

Loading

BogdanUngureanu commented Oct 14, 2022 •

edited

Loading

Copons commented Oct 14, 2022

mmtr commented Oct 17, 2022

Copons Oct 18, 2022

mmtr Oct 18, 2022

a8ci18n commented Oct 18, 2022

a8ci18n commented Oct 27, 2022

Limit Global Styles: Add premium badge to style selection during onboarding #69082

Limit Global Styles: Add premium badge to style selection during onboarding #69082

Conversation

mmtr commented Oct 14, 2022 • edited Loading

Proposed Changes

Testing Instructions

github-actions bot commented Oct 14, 2022 • edited by matticbot Loading

matticbot commented Oct 14, 2022 • edited Loading

BogdanUngureanu commented Oct 14, 2022 • edited Loading

Copons commented Oct 14, 2022

mmtr commented Oct 17, 2022

Copons Oct 18, 2022

Choose a reason for hiding this comment

mmtr Oct 18, 2022

Choose a reason for hiding this comment

a8ci18n commented Oct 18, 2022

a8ci18n commented Oct 27, 2022

mmtr commented Oct 14, 2022 •

edited

Loading

github-actions bot commented Oct 14, 2022 •

edited by matticbot

Loading

matticbot commented Oct 14, 2022 •

edited

Loading

BogdanUngureanu commented Oct 14, 2022 •

edited

Loading