Live Preview: Add the upgrade notice for Premium and Woo themes #83630

okmttdhr · 2023-10-30T07:54:19Z

Related to #79223, #82629

Proposed Changes

This PR adds the upgrade-needed notice on the Site Editor canvas when live-previewing Premium and WooCommerce themes.

The latest copy:

The flow:

Screen.Recording.2023-11-06.at.14.55.06.mov

I'll create a follow-up PR for the following (See #79223 for more details).

the notice on the sidebar Live Preview: Add the upgrade notice on the sidebar for Premium and Woo themes #84676
the modal when clicking the Activate button

Testing Instructions

Run install-plugin.sh wpcom-block-editor add/live-preview-upgrade-notice on your sandbox.
Sandbox widgets.wp.com and your site.
Upgrade Notice for Premium themes
- Prepare a site with the Personal plan or lower plan.
- Access https://<your-site>/wp-admin/site-editor.php?wp_theme_preview=<premium-theme> to preview a premium theme (e.g., premium/outland).
- Try to edit the homepage and see the upgrade notice.
- Click Upgrade now.
- Verify the Premium plan is in the cart and complete checkout.
- Verify it redirects to the Site Editor.
- Verify you don't see the upgrade notice and the plan is upgraded.
Upgrade Notice for WooCommerce themes
- Prepare a site with the Premium plan or lower plan.
- Access https://<your-site>/wp-admin/site-editor.php?wp_theme_preview=<woo-theme> to preview a woo commerce theme (e.g. premium/tsubaki).
- Try to edit the homepage and see the upgrade notice.
- Click Upgrade now.
- Verify the Business plan is in the cart and complete checkout.
- Verify it redirects to the Site Editor.
- Verify you don't see the upgrade notice and the plan is upgraded.
No Upgrade Notices
- Prepare a site with the Business plan or higher plan.
- Access https://<your-site>/wp-admin/site-editor.php?wp_theme_preview=<premium-theme> to preview a premium theme (e.g., premium/outland).
  - If your site is on Atomic, you need to install the theme before previewing it.
- Verify you don't see the upgrade notice.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
- I didn't write tests, as most logic is from existing functions and I don’t think it’s a good idea to make it more complicated. I extracted functions and wrote types as much as possible.
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-10-30T07:54:34Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-10-30T07:59:52Z

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

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

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/live-preview-upgrade-notice on your sandbox.

matticbot · 2023-10-30T08:09:41Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

a8ci18n · 2023-11-02T02:18:24Z

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

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

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx

okmttdhr · 2023-11-06T05:58:38Z

apps/wpcom-block-editor/src/wpcom/features/live-preview/index.tsx

@@ -0,0 +1,101 @@
+import { useDispatch, useSelect } from '@wordpress/data';


The contents of this file were originally implemented in live-preview.tsx, which was renamed to index.tsx.

okmttdhr · 2023-11-06T06:00:58Z

apps/wpcom-block-editor/src/wpcom/features/live-preview/utils.ts

@@ -0,0 +1,48 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';


I just extracted some util functions.

okmttdhr · 2023-11-06T06:03:11Z

#83630 (comment)

Thanks for your comment. I addressed this copy/UI issue 🙂 c2f9565, 0453764 @Automattic/lego

autumnfjeld · 2023-11-06T07:29:14Z

This banner is now conveying two pieces of information

Style customizations will only be saved if the theme is activated.
The theme is premium and requires an upgrade to the premium plan.

Let's start with messaging about the upgrade. And could we put it on two lines? Like this:

You are previewing {themename}, a premium theme. To unlock this theme upgrade to the Premium plan.
You can try out your own style customization, which will only be saved if you activate this theme.

Also mentioned in slack: p1699255475276019/1698902224.244089-slack-C048CUFRGFQ

okmttdhr · 2023-11-06T07:50:17Z

You are previewing {themename}, a premium theme. To unlock this theme upgrade to the Premium plan. You can try out your own style customization, which will only be saved if you activate this theme.

This copy sounds more gentle and concise! And it makes sense to start with messaging about the upgrade. Thanks for your feedback, @autumnfjeld. I'll address it.

taipeicoder · 2023-11-06T08:09:14Z

This banner is now conveying two pieces of information

Style customizations will only be saved if the theme is activated.

The theme is premium and requires an upgrade to the premium plan.

Let's start with messaging about the upgrade. And could we put it on two lines? Like this:

You are previewing {themename}, a premium theme. To unlock this theme upgrade to the Premium plan. You can try out your own style customization, which will only be saved if you activate this theme.

Also mentioned in slack: p1699255475276019/1698902224.244089-slack-C048CUFRGFQ

We'll need to consider copy variation for WooCommerce, which is a WooCommerce theme and requires upgrading to the Business plan.

okmttdhr · 2023-11-06T08:12:59Z

We'll need to consider copy variation for WooCommerce, which is a WooCommerce theme and requires upgrading to the Business plan.

For this, I was going to do the similar way as it is currently doing;

			const requiredPlan = previewingTheme.type === WOOCOMMERCE_THEME ? 'Business' : 'Premium';
			createWarningNotice(
				sprintf(
					// translators: %1$s: The previewing theme name, %2$s: The required plan name ('Business' or 'Premium')
					__(
						'You are previewing the %1$s theme. You can try out your own style customizations, which will only be saved if you activate this theme. This theme can be activated after upgrading to the %2$s plan or higher.',
						'wpcom-live-preview'
					),
					previewingTheme.name,
					requiredPlan
				),

okmttdhr · 2023-11-07T06:30:26Z

I updated the copy 📝 @autumnfjeld @taipeicoder @Automattic/lego

taipeicoder · 2023-11-07T07:34:27Z

GENERAL FEEDBACK

The banner UI feels off, maybe it's the equal spacing between the copy and the buttons? cc: @lucasmendes-design

WooCommerce should be one word.

TEST CASES

Prepare a site without a plan.
- ✅ Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a premium theme (e.g., premium/outland).
- ✅ Try to edit the homepage and see the upgrade notice.
- ✅ Click Upgrade now.
- ✅ Verify the Premium plan is in the cart and complete checkout.
- ❌ Verify it redirects to the Site Editor.
- ❌ Verify the theme is activated.

What I experienced:
After the checkout, I got the Congratulation screen and I clicked the "Let's work on the site" button which took me back to the dashboard.

Screen.Capture.on.2023-11-07.at.15-15-47.mov

Prepare a site with the Premium plan.
- ✅ Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a woo commerce theme (e.g. premium/tsubaki).
- ✅ Try to edit the homepage and see the upgrade notice.
- ✅ Click Upgrade now.
- ✅ Verify the Business plan is in the cart and complete checkout.
- ❌ Verify it redirects to the Site Editor.
- ❌ Verify the theme is activated.

What I experienced:
Same as above. Also note that the WooCommerce blocks doesn't work in the Live Preview.

Screen.Capture.on.2023-11-07.at.15-12-09.mp4

Prepare an Atomic site
- ❓Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a premium theme (e.g., premium/outland).

I'm not sure how to test this. In an Atomic site I should be able to install both Premium and WooCommerce themes. When installing a WooCommerce theme, some blocks will be unavailable:

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx

apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts

autumnfjeld · 2023-11-07T23:46:07Z

The banner UI feels off.

I think that is an understatement @taipeicoder 😉 . I asked Ian if we could put effort into a visual redesign. The whole banner is well.....no bueno. Everywhere it appears (e.g. GS too), not just here.

But for this PR, are there any easy fixes that don't required Lucas input?

Could the button & link be move the right side, where there is space?

Or should we get rid of the line break after the first sentence? (I suggested the line break but open to other opinions.)

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx

…e-notice.tsx

a8ci18n · 2023-11-30T04:29:42Z

Translation for this Pull Request has now been finished.

fushar · 2023-12-04T10:30:32Z

@Automattic/lego I just realized that currently we will show two notices when we are previewing a Premium theme and then apply a style variation. See below screenshot:

We need to fix this... I think we can just hide the GS one (?), since the "Remove premium styles" button won't make the theme free 😄

dsas · 2023-12-04T12:44:10Z

I think we can just hide the GS one (?), since the "Remove premium styles" button won't make the theme free 😄

Yep, that's what we do in the showcase and onboarding when looking at the theme details; supress the premium styles notice because it's superfluous with the theme notice.

okmttdhr · 2023-12-05T00:55:30Z

@Automattic/lego I just realized that currently we will show two notices when we are previewing a Premium theme and then apply a style variation. See below screenshot:
We need to fix this... I think we can just hide the GS one (?), since the "Remove premium styles" button won't make the theme free 😄

Yes, I was going to address this (mentioned in #84799) 🙂
I just filed it in #79223.

#83630)

okmttdhr mentioned this pull request Oct 30, 2023

☂️ PT: Live Preview in Premium and WooCommerce Themes #79223

Closed

27 tasks

okmttdhr force-pushed the add/live-preview-upgrade-notice branch 2 times, most recently from b52f20a to 5cbf249 Compare November 2, 2023 01:54

okmttdhr added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Nov 2, 2023

okmttdhr force-pushed the add/live-preview-upgrade-notice branch from 5cbf249 to 87eb5ee Compare November 2, 2023 02:08

okmttdhr self-assigned this Nov 2, 2023

okmttdhr requested a review from a team November 2, 2023 05:05

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

okmttdhr marked this pull request as ready for review November 2, 2023 05:06

okmttdhr changed the title ~~Live Preview: upgrade-needed notices~~ Live Preview: Add the upgrade-needed notice for Premium and Woo themes Nov 2, 2023

okmttdhr requested a review from lucasmendes-design November 2, 2023 05:17

This comment was marked as resolved.

Sign in to view

dlind1 reviewed Nov 3, 2023

View reviewed changes

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx Outdated Show resolved Hide resolved

okmttdhr force-pushed the add/live-preview-upgrade-notice branch from ec67d77 to 0453764 Compare November 6, 2023 05:50

okmttdhr commented Nov 6, 2023

View reviewed changes

okmttdhr force-pushed the add/live-preview-upgrade-notice branch from 0453764 to 51accd9 Compare November 7, 2023 06:24

taipeicoder reviewed Nov 7, 2023

View reviewed changes

autumnfjeld mentioned this pull request Nov 7, 2023

Improve Site Editor sticky notice banner #83984

Closed

fushar reviewed Nov 29, 2023

View reviewed changes

apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrade-notice.tsx Outdated Show resolved Hide resolved

okmttdhr added 12 commits November 29, 2023 10:44

Add the upgrade notice

9fc2c0d

Make the logic available to both general and upgrade notice

4b9e60f

Avoid showing the redundant notice

4d347c8

Combine the copies

30424aa

Convey two pieces of info

355b5c0

Support the site with a custom domain

24c73e7

Fixed UI that appeared to be off

fecbe82

Woo Commerce -> WooCommerce

d442358

Remove unnecessary rendering

f26b93d

Update apps/wpcom-block-editor/src/wpcom/features/live-preview/upgrad…

76fef97

…e-notice.tsx

Remove requiredPlan

d792e75

Add a comment about required plan

2f9b04b

okmttdhr force-pushed the add/live-preview-upgrade-notice branch from 48ab0a2 to 2f9b04b Compare November 29, 2023 01:45

okmttdhr merged commit 575d080 into trunk Nov 30, 2023
12 checks passed

okmttdhr deleted the add/live-preview-upgrade-notice branch November 30, 2023 03:40

github-actions bot removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Nov 30, 2023

okmttdhr changed the title ~~Live Preview: Add the upgrade-needed notice for Premium and Woo themes~~ Live Preview: Add the upgrade notice for Premium and Woo themes Nov 30, 2023

fushar mentioned this pull request Dec 1, 2023

Live Preview: dismiss sticky notice after activating the theme (season 2) #84730

Merged

7 tasks

okmttdhr mentioned this pull request Dec 1, 2023

Live Preview: Add the upgrade notice on the sidebar for Premium and Woo themes #84676

Merged

8 tasks

This was referenced Dec 6, 2023

Live preview: Ensure showing only one notice simultaneously by hiding the Global Style notice #84899

Closed

Live Preview: Disable the Global Styles limit when live previewing Woo and Premium themes #84924

Merged

okmttdhr mentioned this pull request Dec 11, 2023

Live Preview: Introduce the upgrade modal in Premium and WooCommerce themes #85013

Merged

7 tasks

cpapazoglou pushed a commit that referenced this pull request Dec 11, 2023

Live Preview: Add the upgrade-needed notice for Premium and Woo themes (

69d6526

#83630)

sejas mentioned this pull request Jul 4, 2024

Rotate unlock string for GB unstable APIs in Calypso apps v18.7.0 #92384

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Live Preview: Add the upgrade notice for Premium and Woo themes #83630

Live Preview: Add the upgrade notice for Premium and Woo themes #83630

okmttdhr commented Oct 30, 2023 •

edited

Loading

github-actions bot commented Oct 30, 2023 •

edited by matticbot

Loading

matticbot commented Oct 30, 2023 •

edited

Loading

matticbot commented Oct 30, 2023

a8ci18n commented Nov 2, 2023 •

edited

Loading

This comment was marked as resolved.

okmttdhr Nov 6, 2023

okmttdhr Nov 6, 2023

okmttdhr commented Nov 6, 2023

autumnfjeld commented Nov 6, 2023

okmttdhr commented Nov 6, 2023

taipeicoder commented Nov 6, 2023

okmttdhr commented Nov 6, 2023

okmttdhr commented Nov 7, 2023

taipeicoder commented Nov 7, 2023

autumnfjeld commented Nov 7, 2023 •

edited

Loading

a8ci18n commented Nov 30, 2023

fushar commented Dec 4, 2023

dsas commented Dec 4, 2023

okmttdhr commented Dec 5, 2023

		@@ -0,0 +1,101 @@
		import { useDispatch, useSelect } from '@wordpress/data';

		@@ -0,0 +1,48 @@
		import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';

Live Preview: Add the upgrade notice for Premium and Woo themes #83630

Live Preview: Add the upgrade notice for Premium and Woo themes #83630

Conversation

okmttdhr commented Oct 30, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 30, 2023 • edited by matticbot Loading

matticbot commented Oct 30, 2023 • edited Loading

matticbot commented Oct 30, 2023

a8ci18n commented Nov 2, 2023 • edited Loading

This comment was marked as resolved.

okmttdhr Nov 6, 2023

Choose a reason for hiding this comment

okmttdhr Nov 6, 2023

Choose a reason for hiding this comment

okmttdhr commented Nov 6, 2023

autumnfjeld commented Nov 6, 2023

okmttdhr commented Nov 6, 2023

taipeicoder commented Nov 6, 2023

okmttdhr commented Nov 6, 2023

okmttdhr commented Nov 7, 2023

taipeicoder commented Nov 7, 2023

autumnfjeld commented Nov 7, 2023 • edited Loading

a8ci18n commented Nov 30, 2023

fushar commented Dec 4, 2023

dsas commented Dec 4, 2023

okmttdhr commented Dec 5, 2023

okmttdhr commented Oct 30, 2023 •

edited

Loading

github-actions bot commented Oct 30, 2023 •

edited by matticbot

Loading

matticbot commented Oct 30, 2023 •

edited

Loading

a8ci18n commented Nov 2, 2023 •

edited

Loading

autumnfjeld commented Nov 7, 2023 •

edited

Loading