Global Styles: Add Help Link to Plan Limitation Message (#39226)

* Add Help Link to Premium Styles Plan Limitation Message * changelog * Global Styles: Add Learn More to premium styles notice * Use Help Center to display the Learn More support link * Remove reset styles support link in Post editor This is because the new Learn More link covers that functionality * Remove unused CSS styles
Automattic · Oct 25, 2024 · 1577689 · 1577689
1 parent 9bda1d7
commit 1577689
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 27 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/add-help-link-to-plan-limitation-message b/projects/packages/jetpack-mu-wpcom/changelog/add-help-link-to-plan-limitation-message
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Global Styles: add a Help Link to premium styles limitation message
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/index.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/index.php
@@ -169,19 +169,21 @@ function wpcom_global_styles_enqueue_block_editor_assets() {
 
 	Common\wpcom_enqueue_tracking_scripts( 'wpcom-global-styles-editor' );
 
-	$reset_global_styles_support_url = 'https://wordpress.com/support/using-styles/#reset-all-styles';
+	$learn_more_about_styles_support_url = 'https://wordpress.com/support/using-styles/#access-to-styles';
+	$learn_more_about_styles_post_id     = 192200;
 	if ( class_exists( 'WPCom_Languages' ) ) {
-		$reset_global_styles_support_url = WPCom_Languages::localize_url( $reset_global_styles_support_url );
+		$learn_more_about_styles_post_id = WPCom_Languages::localize_url( $learn_more_about_styles_post_id );
 	}
 	wp_localize_script(
 		'wpcom-global-styles-editor',
 		'wpcomGlobalStyles',
 		array(
-			'upgradeUrl'                  => "$calypso_domain/plans/$site_slug?plan=value_bundle&feature=style-customization",
-			'wpcomBlogId'                 => wpcom_global_styles_get_wpcom_current_blog_id(),
-			'resetGlobalStylesSupportUrl' => $reset_global_styles_support_url,
-			'planName'                    => Plans::get_plan( 'value_bundle' )->product_name_short,
-			'modalImage'                  => plugins_url( 'image.svg', __FILE__ ),
+			'upgradeUrl'                 => "$calypso_domain/plans/$site_slug?plan=value_bundle&feature=style-customization",
+			'wpcomBlogId'                => wpcom_global_styles_get_wpcom_current_blog_id(),
+			'planName'                   => Plans::get_plan( 'value_bundle' )->product_name_short,
+			'modalImage'                 => plugins_url( 'image.svg', __FILE__ ),
+			'learnMoreAboutStylesUrl'    => $learn_more_about_styles_support_url,
+			'learnMoreAboutStylesPostId' => $learn_more_about_styles_post_id,
 		)
 	);
 	wp_enqueue_style(

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notice.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notice.scss
@@ -76,13 +76,4 @@
 		/* stylelint-disable-next-line function-url-quotes */
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' aria-hidden='true' focusable='false'%3E%3Cpath d='M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z'%3E%3C/path%3E%3C/svg%3E");
 	}
-
-	&.wpcom-global-styles-action-is-support::before {
-		content: "";
-		width: 15px;
-		height: 14px;
-		margin-right: 4px;
-		/* stylelint-disable-next-line function-url-quotes */
-		mask-image: url('data:image/svg+xml,%3Csvg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.8125 5.6875C5.8125 4.75552 6.56802 4 7.5 4C8.43198 4 9.1875 4.75552 9.1875 5.6875C9.1875 6.55621 8.53108 7.2716 7.6872 7.36473C7.58427 7.37609 7.5 7.45895 7.5 7.5625V8.5M7.5 9.25V10.375M13.5 7C13.5 10.3137 10.8137 13 7.5 13C4.18629 13 1.5 10.3137 1.5 7C1.5 3.68629 4.18629 1 7.5 1C10.8137 1 13.5 3.68629 13.5 7Z" style="stroke: %231E1E1E;" stroke-width="1.5"/%3E%3C/svg%3E%0A');
-	}
 }
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/notices.js
@@ -121,6 +121,9 @@ function GlobalStylesEditNotice() {
 
 	const { createWarningNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { editEntityRecord } = useDispatch( 'core' );
+	const helpCenterDispatch = useDispatch( 'automattic/help-center' );
+	const setShowHelpCenter = helpCenterDispatch?.setShowHelpCenter;
+	const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;
 
 	const upgradePlan = useCallback( () => {
 		window.open( wpcomGlobalStyles.upgradeUrl, '_blank' ).focus();
@@ -145,10 +148,19 @@ function GlobalStylesEditNotice() {
 		trackEvent( 'calypso_global_styles_gating_notice_reset_click', isSiteEditor );
 	}, [ editEntityRecord, globalStylesId, isSiteEditor ] );
 
-	const openResetGlobalStylesSupport = useCallback( () => {
-		window.open( wpcomGlobalStyles.resetGlobalStylesSupportUrl, '_blank' ).focus();
-		trackEvent( 'calypso_global_styles_gating_notice_reset_support_click', isSiteEditor );
-	}, [ isSiteEditor ] );
+	const openLearnMoreAboutStylesDialog = useCallback( () => {
+		if ( setShowHelpCenter && setShowSupportDoc ) {
+			setShowHelpCenter( true );
+			setShowSupportDoc(
+				wpcomGlobalStyles.learnMoreAboutStylesUrl,
+				wpcomGlobalStyles.learnMoreAboutStylesPostId
+			);
+		} else {
+			window.open( wpcomGlobalStyles.learnMoreAboutStylesUrl, '_blank' ).focus();
+		}
+
+		trackEvent( 'calypso_global_styles_gating_learn_more_click', isSiteEditor );
+	}, [ isSiteEditor, setShowHelpCenter, setShowSupportDoc ] );
 
 	const showNotice = useCallback( () => {
 		const actions = [
@@ -175,14 +187,20 @@ function GlobalStylesEditNotice() {
 			} );
 		}
 
+		if ( isSiteEditor ) {
+			actions.push( {
+				label: __( 'Remove premium styles', 'jetpack-mu-wpcom' ),
+				onClick: resetGlobalStyles,
+				variant: 'secondary',
+				noDefaultClasses: true,
+			} );
+		}
+
 		actions.push( {
-			label: __( 'Remove premium styles', 'jetpack-mu-wpcom' ),
-			onClick: isSiteEditor ? resetGlobalStyles : openResetGlobalStylesSupport,
-			variant: isSiteEditor ? 'secondary' : 'link',
+			label: __( 'Learn more', 'jetpack-mu-wpcom' ),
+			onClick: openLearnMoreAboutStylesDialog,
+			variant: 'link',
 			noDefaultClasses: true,
-			className: isSiteEditor
-				? ''
-				: 'wpcom-global-styles-action-has-icon wpcom-global-styles-action-is-external wpcom-global-styles-action-is-support',
 		} );
 
 		const planName = wpcomGlobalStyles.planName;
@@ -207,7 +225,7 @@ function GlobalStylesEditNotice() {
 		createWarningNotice,
 		isPostEditor,
 		isSiteEditor,
-		openResetGlobalStylesSupport,
+		openLearnMoreAboutStylesDialog,
 		previewPost,
 		resetGlobalStyles,
 		upgradePlan,