Plans grid: Add premium themes for Starter in comparison mode #86861

mmtr · 2024-01-25T17:22:41Z

Proposed Changes

This PR adjusts the "Premium themes" feature in the Plans grid so it can surface that the Starter plans has access to some premium themes (once we launch the Theme Tiers project, see paYJgx-4kX-p2).

The approach taken here relies on the proposal that @niranjan-uma-shankar made in paYJgx-4vW-p2#comment-4600, in which the Starter plan has access to "Dozens of premium themes" and the Explorer plan and above has access to "Unlimited premium themes".

It's my understanding that @Automattic/martech wants to be very careful about the features we display in the Plans grid, so this PR doesn't change the Starter plan in the general view. It only changes the table that's visible after clicking on the "Compare plans" button:

Before	After

It also slightly changes the feature name for the Explorer plan to better reflect that all premium themes can be accessed with that plan:

Before	After

From a technical standpoint, this PR also consolidates all the different constants used for the premium themes feature so it's easier to maintain them:

WPCOM_FEATURES_PREMIUM_THEMES has been renamed to WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED so it's clear that this feature has access to all the premium themes.
FEATURE_PERSONAL_THEMES has been renamed to WPCOM_FEATURES_PREMIUM_THEMES_LIMITED so it's clear that this feature is synced with class-wpcom-features.php (hence the WPCOM_FEATURES_ prefix) and it's the one that has access to some premium themes.
FEATURE_PREMIUM_THEMES_V2 has been removed, and all its usages have been replaced with WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED.
FEATURE_PREMIUM_THEMES now indicates the general feature that it's used in the comparison table, so all previous usages have been replaced with WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED.

Testing Instructions

Use the Calypso live link below.
Go to Upgrades > Plans.
Check the Explorer plan in the general view.
Make sure it has a "Unlimited premium plans" feature.
Add the ?flags=theme/tiers query param to the URL and reload the page.
Scroll down and click on the "Compare plans" button.
Scroll down until you see the "Premium themes" feature in the comparison view.
Make sure the column for the Starter plan says "Dozens of premium themes".
Make sure the column for Explorer and above says "Unlimited premium themes".
Replace the query param with ?flags=-theme/tiers and reload the page.
Scroll down and click on the "Compare plans" button.
Scroll down until you see the "Premium themes" feature in the comparison view.
Make sure the column for the Starter plan says "-" now.

github-actions · 2024-01-25T17:22:53Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2024-01-25T17:23:22Z

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

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

blaze-dashboard
editing-toolkit
happy-blocks
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/premium-theme-features on your sandbox.

client/lib/plans/features-list.tsx

rcrdortiz · 2024-01-26T08:44:30Z

client/lib/plans/features-list.tsx

-				: i18n.translate( 'Premium themes' );
+			const shouldShowInPersonalPlan =
+				config.isEnabled( 'themes/tiers' ) &&
+				( ( localeSlug && config< string >( 'english_locales' ).includes( localeSlug ) ) ||


The locale check was implemented to either show the old or new plan name depending on if it was translated for the locale (this was part of the general plan rename project).
Since this is behind a feature flag, and the translation is new. Do we need the locale check here?

I think we could just do:

const shouldShowInStarterPlan = config.isEnabled( 'themes/tiers' ) && isPersonalPlan( planSlug );

I added it just in case we enable the flag in production before the translations have been completed (the plans grid is a critical screen where we need to be 100% sure that everything is translated).

rcrdortiz · 2024-01-26T08:51:37Z

client/lib/plans/features-list.tsx

+				i18n.hasTranslation( 'Switch between all of our premium design themes.' );
 			return shouldShowNewString
-				? i18n.translate(
-						'Unlimited access to all of our advanced premium themes, including designs specifically tailored for businesses.'
-				  )
-				: i18n.translate(
-						'Access to all of our advanced premium theme templates, including templates specifically tailored for businesses.'
-				  );
+				? i18n.translate( 'Switch between all of our premium design themes.' )
+				: i18n.translate( 'Switch between a collection of premium design themes.' );


Aren't both translations new (I just realized a few lines below this one that it's not the case 😆 )? Why do we need the shouldShowTranslation check in this case?

I'm also not sold on the wording, premium design themes sounds strange to me. In the Starter plan section we're just referring to them as Premium themes. Would it make sense to use the same naming convention?

the "premium design themes" wording has always been there....and it's always sounded weird to me. +1 to not repeating that

Aren't both translations new (I just realized a few lines below this one that it's not the case 😆 )? Why do we need the shouldShowTranslation check in this case?

Not sure if you already answered yourself 😅, but to be sure: no, only one of the translations is new:

Switch between all of our premium design themes. -> NEW

Switch between a collection of premium design themes. -> EXISTING

I'm also not sold on the wording, premium design themes sounds strange to me.

I agree, but it's my understanding that @Automattic/martech controls the language used in the plans grid, and any change in the copy should be handled by them since the impact of such change should be carefully measured.

So that's why I chose to stick with the existing "premium design themes" terminology.

…-features

…n ETK and wpcom-block-editor

rcrdortiz · 2024-01-29T09:00:44Z

Would it be possible to do something so that Dozens of premium themes doesn't break the line? It looks a bit off compared to the rest.

mmtr · 2024-01-29T10:16:45Z

Would it be possible to do something so that Dozens of premium themes doesn't break the line?

Yeah, I don't like that either, but I couldn't came up with anything that looks better than that.

At first I thought of just saying "Unlimited" and "Dozens", but I think it sounds weird.

Also considered decreasing the cell padding so it fits in one line, but the CSS changes needed for that are not trivial because that also involves changing the padding and size in other parts of the layout, so I didn't felt comfortable about possible regressions.

Do you have any other alternative idea? FWIW, we already have features that need two lines in other languages:

rcrdortiz · 2024-01-29T10:42:18Z

Would it be possible to do something so that Dozens of premium themes doesn't break the line?

Yeah, I don't like that either, but I couldn't came up with anything that looks better than that.

At first I thought of just saying "Unlimited" and "Dozens", but I think it sounds weird.

Also considered decreasing the cell padding so it fits in one line, but the CSS changes needed for that are not trivial because that also involves changing the padding and size in other parts of the layout, so I didn't felt comfortable about possible regressions.

Do you have any other alternative idea? FWIW, we already have features that need two lines in other languages:

We could change Dozens of Premium Themes to Many Premium Themes. But I'll approve this PR since we can re-visit later if needed.

rcrdortiz

Works as expected.

a8ci18n · 2024-01-29T13:18:04Z

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

@niranjan-uma-shankar

This commit adjusts the "Premium themes" feature in the Plans grid so it can surface that the Starter plans has access to some premium themes (once we launch the Theme Tiers project, see paYJgx-4kX-p2). The approach taken here relies on the proposal that @niranjan-uma-shankar made in paYJgx-4vW-p2#comment-4600, in which the Starter plan has access to "Dozens of premium themes" and the Explorer plan and above has access to "Unlimited premium themes". It's my understanding that @Automattic/martech wants to be very careful about the features we display in the Plans grid, so this commit doesn't change the Starter plan in the general view. It only changes the table that's visible after clicking on the "Compare plans" button. It also slightly changes the feature name for the Explorer plan from "Premium themes" to "Unlimited premium themes" to better reflect that all premium themes can be accessed with that plan. From a technical standpoint, this PR also consolidates all the different constants used for the premium themes feature so it's easier to maintain them: - `WPCOM_FEATURES_PREMIUM_THEMES` has been renamed to `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED` so it's clear that this feature has access to all the premium themes. - `FEATURE_PERSONAL_THEMES` has been renamed to `WPCOM_FEATURES_PREMIUM_THEMES_LIMITED` so it's clear that this feature is synced with `class-wpcom-features.php` (hence the `WPCOM_FEATURES_` prefix) and it's the one that has access to some premium themes. - `FEATURE_PREMIUM_THEMES_V2` has been removed, and all its usages have been replaced with `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED`. - `FEATURE_PREMIUM_THEMES` now indicates the general feature that it's used in the comparison table, so all previous usages have been replaced with `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED`.

niranjan-uma-shankar · 2024-01-30T07:53:29Z

Would it be possible to do something so that Dozens of premium themes doesn't break the line? It looks a bit off compared to the rest.

I added a slight improvement in #86985 - it's still across two lines but avoids an orphan.

matticbot · 2024-01-31T15:26:56Z

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

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

name           parsed_size           gzip_size
entry-stepper        -11 B  (-0.0%)       -5 B  (-0.0%)
entry-main           -11 B  (-0.0%)       -4 B  (-0.0%)

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

Sections (~51 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
update-design-flow                       +46 B  (+0.0%)      +53 B  (+0.0%)
site-purchases                           +46 B  (+0.0%)      +53 B  (+0.0%)
settings-jetpack                         +46 B  (+0.0%)      +53 B  (+0.0%)
sensei-flow                              +46 B  (+0.0%)      +53 B  (+0.0%)
scan                                     +46 B  (+0.0%)      +53 B  (+0.0%)
purchases                                +46 B  (+0.0%)      +53 B  (+0.0%)
purchase-product                         +46 B  (+0.0%)      +53 B  (+0.1%)
plugins                                  +46 B  (+0.0%)      +53 B  (+0.0%)
plans                                    +46 B  (+0.0%)      +53 B  (+0.0%)
marketing                                +46 B  (+0.0%)      +53 B  (+0.0%)
link-in-bio-tld-flow                     +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-search                           +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-connect                          +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-settings                   +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-pricing                    +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-plugin-management          +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-partner-portal             +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-manage-pricing             +46 B  (+0.0%)      +53 B  (+0.1%)
jetpack-cloud-features-comparison        +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-cloud-agency-dashboard           +46 B  (+0.0%)      +53 B  (+0.0%)
jetpack-app                              +46 B  (+0.0%)      +53 B  (+0.0%)
import-hosted-site-flow                  +46 B  (+0.0%)      +53 B  (+0.0%)
import-flow                              +46 B  (+0.0%)      +51 B  (+0.0%)
domains                                  +46 B  (+0.0%)      +53 B  (+0.0%)
checkout                                 +46 B  (+0.0%)      +53 B  (+0.0%)
backup                                   +46 B  (+0.0%)      +53 B  (+0.0%)
activity                                 +46 B  (+0.0%)      +53 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 (~53 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected                                         +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-signup-steps-plans                                                           +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-signup-steps-page-picker                                                     +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-signup-steps-new-or-existing-site                                            +46 B  (+0.0%)      +53 B  (+0.2%)
async-load-purchase-modal-wrapper                                                       +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-calypso-my-sites-stats-jetpack-upsell-section                                +46 B  (+0.1%)      +53 B  (+0.3%)
async-load-calypso-my-sites-checkout-modal                                              +46 B  (+0.0%)      +53 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +46 B  (+0.0%)      +53 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.

a8ci18n · 2024-02-03T04:29:57Z

Translation for this Pull Request has now been finished.

@niranjan-uma-shankar

This commit adjusts the "Premium themes" feature in the Plans grid so it can surface that the Starter plans has access to some premium themes (once we launch the Theme Tiers project, see paYJgx-4kX-p2). The approach taken here relies on the proposal that @niranjan-uma-shankar made in paYJgx-4vW-p2#comment-4600, in which the Starter plan has access to "Dozens of premium themes" and the Explorer plan and above has access to "Unlimited premium themes". It's my understanding that @Automattic/martech wants to be very careful about the features we display in the Plans grid, so this commit doesn't change the Starter plan in the general view. It only changes the table that's visible after clicking on the "Compare plans" button. It also slightly changes the feature name for the Explorer plan from "Premium themes" to "Unlimited premium themes" to better reflect that all premium themes can be accessed with that plan. From a technical standpoint, this PR also consolidates all the different constants used for the premium themes feature so it's easier to maintain them: - `WPCOM_FEATURES_PREMIUM_THEMES` has been renamed to `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED` so it's clear that this feature has access to all the premium themes. - `FEATURE_PERSONAL_THEMES` has been renamed to `WPCOM_FEATURES_PREMIUM_THEMES_LIMITED` so it's clear that this feature is synced with `class-wpcom-features.php` (hence the `WPCOM_FEATURES_` prefix) and it's the one that has access to some premium themes. - `FEATURE_PREMIUM_THEMES_V2` has been removed, and all its usages have been replaced with `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED`. - `FEATURE_PREMIUM_THEMES` now indicates the general feature that it's used in the comparison table, so all previous usages have been replaced with `WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED`.

mmtr added 2 commits January 25, 2024 17:44

Plans grid: Add premium themes feature for Starter in comparison mode

f36202b

Remove FEATURE_PERSONAL_THEMES_V2

e9693bf

mmtr requested review from a team January 25, 2024 17:22

mmtr self-assigned this Jan 25, 2024

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

rcrdortiz reviewed Jan 26, 2024

View reviewed changes

client/lib/plans/features-list.tsx Show resolved Hide resolved

rcrdortiz reviewed Jan 26, 2024

View reviewed changes

client/lib/plans/features-list.tsx Show resolved Hide resolved

rcrdortiz reviewed Jan 26, 2024

View reviewed changes

mmtr added 2 commits January 26, 2024 16:21

Merge remote-tracking branch 'origin/trunk' into update/premium-theme…

ba879d6

…-features

Merge remote-tracking branch 'origin/trunk' into update/premium-theme…

203b7ae

…-features

mmtr mentioned this pull request Jan 26, 2024

Design picker: Add premium themes feature to the theme upgrade modal for the Starter plan #86909

Merged

Use englishLocales utils instead of config, since the latter breaks o…

3be56cb

…n ETK and wpcom-block-editor

rcrdortiz approved these changes Jan 29, 2024

View reviewed changes

mmtr merged commit 3dee060 into trunk Jan 29, 2024
11 checks passed

mmtr deleted the update/premium-theme-features branch January 29, 2024 11:21

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 Jan 29, 2024

niranjan-uma-shankar mentioned this pull request Jan 30, 2024

Add CSS wrap property for the comparison grid #86985

Merged

mmtr mentioned this pull request Feb 5, 2024

Theme Tiers: Remove hasTranslation checks #87172

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plans grid: Add premium themes for Starter in comparison mode #86861

Plans grid: Add premium themes for Starter in comparison mode #86861

mmtr commented Jan 25, 2024

github-actions bot commented Jan 25, 2024 •

edited by matticbot

Loading

matticbot commented Jan 25, 2024 •

edited

Loading

rcrdortiz Jan 26, 2024 •

edited

Loading

mmtr Jan 26, 2024 •

edited

Loading

rcrdortiz Jan 26, 2024 •

edited

Loading

dsas Jan 26, 2024

mmtr Jan 26, 2024

rcrdortiz commented Jan 29, 2024

mmtr commented Jan 29, 2024

rcrdortiz commented Jan 29, 2024

rcrdortiz left a comment

a8ci18n commented Jan 29, 2024

niranjan-uma-shankar commented Jan 30, 2024

matticbot commented Jan 31, 2024 •

edited

Loading

a8ci18n commented Feb 3, 2024

Plans grid: Add premium themes for Starter in comparison mode #86861

Plans grid: Add premium themes for Starter in comparison mode #86861

Conversation

mmtr commented Jan 25, 2024

Proposed Changes

Testing Instructions

github-actions bot commented Jan 25, 2024 • edited by matticbot Loading

matticbot commented Jan 25, 2024 • edited Loading

rcrdortiz Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

mmtr Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

rcrdortiz Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

dsas Jan 26, 2024

Choose a reason for hiding this comment

mmtr Jan 26, 2024

Choose a reason for hiding this comment

rcrdortiz commented Jan 29, 2024

mmtr commented Jan 29, 2024

rcrdortiz commented Jan 29, 2024

rcrdortiz left a comment

Choose a reason for hiding this comment

a8ci18n commented Jan 29, 2024

niranjan-uma-shankar commented Jan 30, 2024

matticbot commented Jan 31, 2024 • edited Loading

a8ci18n commented Feb 3, 2024

github-actions bot commented Jan 25, 2024 •

edited by matticbot

Loading

matticbot commented Jan 25, 2024 •

edited

Loading

rcrdortiz Jan 26, 2024 •

edited

Loading

mmtr Jan 26, 2024 •

edited

Loading

rcrdortiz Jan 26, 2024 •

edited

Loading

matticbot commented Jan 31, 2024 •

edited

Loading