Split the Global Styles variations in two: default and premium #77333

BogdanUngureanu · 2023-05-24T13:16:13Z

Related to https://github.com/Automattic/dotcom-forge/issues/2261, https://github.com/Automattic/dotcom-forge/issues/2260

Proposed Changes

Split the default style variation from the Premium style variations in theme showcase and design picker

Testing Instructions

Use the live link from the comments
Go to site-setup/designSetup?siteSlug=your-site (where the your-site is free)
Click on a free theme and notice that style variations UI is split in two
Resize your browser resolution to mobile and make sure that the UI looks good.
Click on a Premium and Woo theme and notice that the UI is not split in two
Repeat the same step with a site with a premium subscription and notice that all free, premium and Woo themes have the style variations combined in a single list.
Go to /themes (logged in and logged out)
Make sure that for free sites, the UI is split in two for free themes
Make sure that for free sites, the Ui is combined in a single list for Premium and Woo themes
Make sure that for Premium sites the UI is combined for Free, Premium and Woo themes
Make sure that the UI looks good on both mobile and desktop resolutions

Screenshots

Theme showcase

Free site, free theme

Premium site, free theme

Free site, free theme (mobile)

Design Picker

Free site, free theme

Free site, free theme (mobile)

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 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-ajp-p2)?

github-actions · 2023-05-24T13:16:27Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-05-24T13:17:41Z

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

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

name                   parsed_size           gzip_size
entry-subscriptions          -33 B  (-0.0%)       -1 B  (-0.0%)
entry-main                   -33 B  (-0.0%)       -1 B  (-0.0%)
entry-login                  -33 B  (-0.0%)       -1 B  (-0.0%)
entry-domains-landing        -33 B  (-0.0%)       -1 B  (-0.0%)
entry-browsehappy            -33 B  (-0.0%)       -1 B  (-0.0%)

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

Sections (~110 bytes removed 📉 [gzipped])

name    parsed_size           gzip_size
theme       -1341 B  (-0.2%)     -394 B  (-0.2%)
themes        +13 B  (+0.0%)     -126 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 (~69 bytes added 📈 [gzipped])

name                                                                         parsed_size             gzip_size
async-load-automattic-global-styles-src-components-global-styles-variations    +981960 B      (new)  +286584 B      (new)
async-load-automattic-design-preview-src-components-style-variation            -981489 B  (deleted)  -286516 B  (deleted)
async-load-automattic-design-preview                                              +356 B    (+0.0%)      +73 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.

With these props, we'll be able to display the style variations for different theme types.

mmtr

Nice job, this is quite a big improvement! It works well, but I think there are a few things we need to address first.

I think this breaks the "Premium" badge we display on the thumbnails when selecting a custom variation:

Before	After

This text feels too wordy, is it really necessary? The original mockup didn't include it:

Mockup	This PR

Seems the tiles are a bit misaligned with the text?

Mockup	This PR

The font size in the sidebar feels smaller when compared to production and I think I like it more how it was before. Can we keep using the same font size?

Before	After

Nitpick, non-blocking: On mobile, when the site is on a paid plan, the "Styles" header seems unnecessary.

Before	After

In the theme showcase, when the site is on a paid plan, there is a huge separation between the header and the styles grid. We can probably reduce it:

Before	After

In the mobile view of the theme showcase, when the site is on a Free plan, I think the header takes a considerable amount of space. Can we maybe reuse the same layout that we use in the design picker, so all the styles are displayed in the same horizontal line?

Before	After

… when there's no description

BogdanUngureanu · 2023-05-29T14:27:11Z

In the mobile view of the theme showcase, when the site is on a Free plan, I think the header takes a considerable amount of space. Can we maybe reuse the same layout that we use in the design picker, so all the styles are displayed in the same horizontal line?

I think it's better to keep the existing split mode because it's more clear and we describe better what style is free and what styles are paid.

In the design picker I used that approach because there's enough space to use the same design, so had to use that approach.

mmtr · 2023-05-30T11:58:17Z

In the design picker I used that approach because there's enough space to use the same design, so had to use that approach.

It doesn't look like there's enough space to me 🤔. By default (without scrolling), the preview only takes about the 25% of the screen. Previously, it was closer to the 50%. That's why I think we can probably be consistent with the design picker and display all styles in the same row (see my suggested mockup below).

Before (production )	After (this PR)	Design picker (This PR)	My proposal

mmtr · 2023-05-30T12:02:38Z

These two items remain unchanged, but didn't get your thoughts on them. Did you miss them?

This text feels too wordy, is it really necessary? The original mockup didn't include it:

Mockup	This PR

Nitpick, non-blocking: On mobile, when the site is on a paid plan, the "Styles" header seems unnecessary.

Before	After

BogdanUngureanu · 2023-05-30T12:12:31Z

These two items remain unchanged, but didn't get your thoughts on them. Did you miss them?

Strange, they should have been fixed. 🤔

It doesn't look like there's enough space to me 🤔. By default (without scrolling), the preview only takes about the 25% of the screen. Previously, it was closer to the 50%. That's why I think we can probably be consistent with the design picker and display all styles in the same row (see my suggested mockup below).

Fair enough. Maybe I can add the text at the bottom of the UI. :)

BogdanUngureanu · 2023-05-30T12:16:20Z

These two items remain unchanged, but didn't get your thoughts on them. Did you miss them?

I've just checked again and I don't get that subheader text in the Theme showcase and Design picker. 🤔

…wports in Theme showcase and set the item size on mobile view ports to 80px in the theme showcase.

mmtr

Nice! It works well for me. I only left a few minor comments, but can be addressed in a follow-up.

I think we should also revisit the mobile layout, since there can a be a huge separation between the default style and the premium styles:

mmtr · 2023-05-31T16:36:11Z

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

-			premiumBadge={
-				showGlobalStylesPremiumBadge && (
-					<PremiumBadge
-						className="design-picker__premium-badge"


This class is no longer used, so I think we can remove a few styles from the SCSS file

Oh that's right. I planned to remove it but I guess I forgot about it.

packages/global-styles/src/components/global-styles-variations/index.tsx

mmtr · 2023-05-31T16:42:02Z

client/my-sites/theme/theme-style-variations/index.tsx

 			<div className="theme__sheet-style-variations-previews">
 				<AsyncLoad
-					require="@automattic/design-preview/src/components/style-variation"


I think this component is no longer used, can we remove it?

…/index.tsx Co-authored-by: Miguel Torres <1233880+mmtr@users.noreply.github.com>

BogdanUngureanu · 2023-05-31T18:21:47Z

I've updated the description with some up to date screenshots.

Hey @lucasmendes-design can you also have a look at the proposed changes, especially on the mobile viewports? The changes were implemented based on the desktop design and based on the existing UI on mobile viewports.

lucasmendes-design · 2023-06-01T20:20:07Z

Hi folks, some notes about the experience here:

I think the global style thumbnail doesn't support any tags for now. It's strange placing a free or premium tag on it. This is in my backlog to create a thumbnail like the premium features in Canvas (example).

In general, I see the opposite rationale here. Instead of highlighting with a badge the free option, I think it makes more sense to highlight the premium one.
I'm using the animation below which has only the star and also the full badge.
https://github.com/Automattic/wp-calypso/assets/98343583/989f54bc-50b2-49a0-9add-7843f6c269df
So, I think we could have something like this as a sticky header when users scroll down.

I'm not sure which one is the latest one but on mobile, the scroll is more natural than on desktop. So, I think it's fine having that. And mobile doesn't have hover, so we need to explain what this star is.

a8ci18n · 2023-06-02T09:18:39Z

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

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

a8ci18n · 2023-06-15T23:30:00Z

Translation for this Pull Request has now been finished.

BogdanUngureanu added 6 commits May 15, 2023 12:18

Split the variations in two: default (free) and premium

cdd8953

Separate the free Style Variation from the paid ones

7409c75

Merge branch 'trunk' into update/global-styles-panel

5e58c1a

Remove props and CSS that are not needed anymore

5df1333

Merge branch 'trunk' into update/global-styles-panel

a914273

Move description in the header and make CSS changes on mobile viewports

e117604

BogdanUngureanu requested a review from a team May 25, 2023 09:20

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 25, 2023

BogdanUngureanu self-assigned this May 25, 2023

BogdanUngureanu added 4 commits May 25, 2023 13:17

Add props to control the layout and label.

60aa98a

With these props, we'll be able to display the style variations for different theme types.

Merge branch 'trunk' into update/global-styles-panel

dd3d3d9

Disable the split for non-free themes.

a85b1cd

Remove margin

fe6188c

BogdanUngureanu changed the title ~~WIP: Split the Global Styles variations in two: default and premium~~ Split the Global Styles variations in two: default and premium May 26, 2023

BogdanUngureanu requested a review from a team May 26, 2023 12:53

mmtr reviewed May 26, 2023

View reviewed changes

BogdanUngureanu added 5 commits May 26, 2023 17:45

Merge branch 'trunk' into update/global-styles-panel

13b5d1a

Fix regression in the Design Picker, align margins and remove <p> tag…

03fc221

… when there's no description

Change font color

9ddf300

Keep the previous heading color.

8cc25f0

Increase the font size on the paragraph

44cd7b7

BogdanUngureanu requested a review from mmtr May 29, 2023 14:28

Merge branch 'trunk' into update/global-styles-panel

b269025

BogdanUngureanu added 2 commits May 31, 2023 14:17

Merge branch 'trunk' into update/global-styles-panel

11c0a43

Fix issues after code review, align horizontally the UI on mobile vie…

c342f5a

…wports in Theme showcase and set the item size on mobile view ports to 80px in the theme showcase.

mmtr approved these changes May 31, 2023

View reviewed changes

Update packages/global-styles/src/components/global-styles-variations…

e7ee758

…/index.tsx Co-authored-by: Miguel Torres <1233880+mmtr@users.noreply.github.com>

BogdanUngureanu merged commit 08ac29c into trunk Jun 2, 2023
17 of 20 checks passed

BogdanUngureanu deleted the update/global-styles-panel branch June 2, 2023 08:19

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 Jun 2, 2023

taipeicoder mentioned this pull request Jun 28, 2023

[Bug]: TT3's design preview's style variations look cut in certain resolution #72055

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Split the Global Styles variations in two: default and premium #77333

Split the Global Styles variations in two: default and premium #77333

BogdanUngureanu commented May 24, 2023 •

edited

github-actions bot commented May 24, 2023 •

edited by matticbot

matticbot commented May 24, 2023 •

edited

mmtr left a comment •

edited

BogdanUngureanu commented May 29, 2023

mmtr commented May 30, 2023

mmtr commented May 30, 2023

BogdanUngureanu commented May 30, 2023

BogdanUngureanu commented May 30, 2023

mmtr left a comment

mmtr May 31, 2023

BogdanUngureanu May 31, 2023

mmtr May 31, 2023

BogdanUngureanu commented May 31, 2023

lucasmendes-design commented Jun 1, 2023

a8ci18n commented Jun 2, 2023

a8ci18n commented Jun 15, 2023

Split the Global Styles variations in two: default and premium #77333

Split the Global Styles variations in two: default and premium #77333

Conversation

BogdanUngureanu commented May 24, 2023 • edited

Proposed Changes

Testing Instructions

Screenshots

Theme showcase

Design Picker

Pre-merge Checklist

github-actions bot commented May 24, 2023 • edited by matticbot

matticbot commented May 24, 2023 • edited

mmtr left a comment • edited

Choose a reason for hiding this comment

BogdanUngureanu commented May 29, 2023

mmtr commented May 30, 2023

mmtr commented May 30, 2023

BogdanUngureanu commented May 30, 2023

BogdanUngureanu commented May 30, 2023

mmtr left a comment

Choose a reason for hiding this comment

mmtr May 31, 2023

Choose a reason for hiding this comment

BogdanUngureanu May 31, 2023

Choose a reason for hiding this comment

mmtr May 31, 2023

Choose a reason for hiding this comment

BogdanUngureanu commented May 31, 2023

lucasmendes-design commented Jun 1, 2023

a8ci18n commented Jun 2, 2023

a8ci18n commented Jun 15, 2023

BogdanUngureanu commented May 24, 2023 •

edited

github-actions bot commented May 24, 2023 •

edited by matticbot

matticbot commented May 24, 2023 •

edited

mmtr left a comment •

edited