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

miksansegundo · 2023-12-06T13:52:33Z

Related to #79223 #83630 #84676
Closes #84899

Proposed Changes

Do not enqueue the assets that limit Global Styles when live previewing a Premium theme if the site doesn't have a premium plan or higher.
The effect of the change above ^ is showing only one notice asking users to upgrade because the Global Styles notice won't appear when users change styles.
Plus, because the Global Styles gateway doesn't replace the Styles Welcome Guide, that guide appears when users click on the styles icon ☯️ and helps them to learn more about the Global Styles feature.
- We could also show that guide to users when live previewing any theme because it adds value. WDYT?

BTW. I reported a minor issue on the copy of the Styles Welcome Guide that has been fixed.

BEFORE	AFTER

Testing Instructions

In your sandbox run install-plugin.sh etk fix/live-preview-unique-notice

Upgrade Notice for Premium themes

Prepare a simple site with the Personal plan or lower plan.
Sandbox that site
Access https://<your-site>/wp-admin/site-editor.php?wp_theme_preview=<premium-theme> to preview a premium theme (e.g., premium/outland).
Change global styles and expect to see only the upgrade notice "You are previewing..."
Repeat the test on atomic uploading the ETK plugin for this branch

Screen.Recording.2566-12-06.at.20.11.47.mov

Upgrade Notice for Woo themes

Prepare a simple site with the Premium plan or higher plan.
Sandbox that site
Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a premium theme (e.g., premium/tsubaki).
Change global styles and expect to see only the upgrade notice "You are previewing..."
Repeat the test on atomic uploading the ETK plugin for this branch

Screen.Recording.2566-12-06.at.20.13.25.mov

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

…s on Dotcom

github-actions · 2023-12-06T13:52:46Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-12-06T13:54:45Z

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.

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php

okmttdhr · 2023-12-06T23:51:15Z

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php

+		array_filter(
+			$software_sets,
+			function ( $software_set ) {
+				return $software_set->product_slug === 'woo-on-plans';


Could you update to check woo-on-plans here as well? 🙇 : https://github.com/Automattic/wp-calypso/blob/fba40b1/apps/wpcom-block-editor/src/wpcom/features/live-preview/hooks/use-previewing-theme.ts#L13

I realized that would be safer now (but might be changed to support bundle themes).
#84483 (comment)

Sure, I'm on it.

okmttdhr

LGTM with nits comments 👍
Thanks for working on this PR.

taipeicoder

Nice solution! Tested:

Upgrade Notice for Premium themes
- Prepare a simple site with the Personal plan or lower plan.
- Sandbox that site
- Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a premium theme (e.g., premium/outland).
- ✅ Change global styles and expect to see only the upgrade notice "You are previewing..."
- ✅ Repeat the test on atomic uploading the ETK plugin for this branch
Upgrade Notice for Woo themes
- Prepare a simple site with the Personal plan or lower plan.
- Sandbox that site
- Access https:///wp-admin/site-editor.php?wp_theme_preview= to preview a premium theme (e.g., premium/tsubaki).
- ✅ Change global styles and expect to see only the upgrade notice "You are previewing..."
- ✅ Repeat the test on atomic uploading the ETK plugin for this branch

taipeicoder · 2023-12-07T00:30:52Z

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php

@@ -62,6 +62,16 @@ function wpcom_should_limit_global_styles( $blog_id = 0 ) {
 		return false;
 	}

+	// Do not limit Global Styles when live previewing a Woo theme without a Business plan or higher.


I wonder if it's simpler to just check for "Do not limit Global Styles when live previewing a premium theme, and the site has a premium plan or higher", since we only want to know about these conditions in particular:

Is live previewing.

Is premium theme.

wpcom_site_has_feature( WPCOM_Features::GLOBAL_STYLES, $blog_id ) is true.

This way we don't need to check whether the premium theme is Premium or WooCommerce 🙂

Thanks! I have implemented that logic but struggled while testing it because wpcom_site_has_feature( WPCOM_Features::GLOBAL_STYLES, $blog_id ) always returns false when a sandboxed site has a premium plan or higher.

I've asked T-Rex about that in p1701937616146419-slack-C04DZ8M0GHW

… theme with a Premium plan or higher

matticbot · 2023-12-07T08:36:45Z

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

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

editing-toolkit
wpcom-block-editor

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

miksansegundo · 2023-12-07T08:38:44Z

I updated the code to make it simpler but won't work when testing on our sandbox. I vote for deploying and testing it on production. Thoughts?

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php

taipeicoder · 2023-12-07T09:18:36Z

I updated the code to make it simpler but won't work when testing on our sandbox. I vote for deploying and testing it on production. Thoughts?

Yes, let's deploy 🚢

…s/index.php Co-authored-by: Griffith Chen <griffith.chen@automattic.com>

miksansegundo · 2023-12-07T12:38:22Z

It's working fine 😍
Please retest when you can 🙏

…o and Premium themes (#84924) * Disable Global Styles limit for live previewing woo and premium themes on Dotcom * Simplify by not limiting Global Styles when live previewing a Premium theme with a Premium plan or higher * Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php Co-authored-by: Griffith Chen <griffith.chen@automattic.com> * Update naming and comments to be more clear --------- Co-authored-by: Griffith Chen <griffith.chen@automattic.com>

Disable Global Styles limit for live previewing woo and premium theme…

023e73a

…s on Dotcom

miksansegundo requested review from a team December 6, 2023 13:52

miksansegundo self-assigned this Dec 6, 2023

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 6, 2023

okmttdhr reviewed Dec 6, 2023

View reviewed changes

okmttdhr approved these changes Dec 6, 2023

View reviewed changes

taipeicoder approved these changes Dec 7, 2023

View reviewed changes

Simplify by not limiting Global Styles when live previewing a Premium…

ebc619e

… theme with a Premium plan or higher

taipeicoder reviewed Dec 7, 2023

View reviewed changes

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php Outdated Show resolved Hide resolved

miksansegundo commented Dec 7, 2023

View reviewed changes

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/index.php Show resolved Hide resolved

miksansegundo and others added 2 commits December 7, 2023 16:51

Update apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-style…

e7fa6b1

…s/index.php Co-authored-by: Griffith Chen <griffith.chen@automattic.com>

Update naming and comments to be more clear

e093b46

miksansegundo force-pushed the fix/live-preview-unique-notice branch from 1b3b86c to e093b46 Compare December 7, 2023 10:04

miksansegundo merged commit 2a2109a into trunk Dec 7, 2023
12 checks passed

miksansegundo deleted the fix/live-preview-unique-notice branch December 7, 2023 11:58

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 Dec 7, 2023

okmttdhr mentioned this pull request Dec 20, 2023

Live Preview: Update banner design: Reduce height & change color #85472

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

miksansegundo commented Dec 6, 2023 •

edited

Loading

github-actions bot commented Dec 6, 2023 •

edited by matticbot

Loading

matticbot commented Dec 6, 2023

okmttdhr Dec 6, 2023

miksansegundo Dec 7, 2023

okmttdhr left a comment

taipeicoder left a comment •

edited

Loading

taipeicoder Dec 7, 2023

miksansegundo Dec 7, 2023

matticbot commented Dec 7, 2023 •

edited

Loading

miksansegundo commented Dec 7, 2023

taipeicoder commented Dec 7, 2023

miksansegundo commented Dec 7, 2023

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

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

Conversation

miksansegundo commented Dec 6, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Dec 6, 2023 • edited by matticbot Loading

matticbot commented Dec 6, 2023

okmttdhr Dec 6, 2023

Choose a reason for hiding this comment

miksansegundo Dec 7, 2023

Choose a reason for hiding this comment

okmttdhr left a comment

Choose a reason for hiding this comment

taipeicoder left a comment • edited Loading

Choose a reason for hiding this comment

taipeicoder Dec 7, 2023

Choose a reason for hiding this comment

miksansegundo Dec 7, 2023

Choose a reason for hiding this comment

matticbot commented Dec 7, 2023 • edited Loading

miksansegundo commented Dec 7, 2023

taipeicoder commented Dec 7, 2023

miksansegundo commented Dec 7, 2023

miksansegundo commented Dec 6, 2023 •

edited

Loading

github-actions bot commented Dec 6, 2023 •

edited by matticbot

Loading

taipeicoder left a comment •

edited

Loading

matticbot commented Dec 7, 2023 •

edited

Loading