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 new file mode 100644 index 0000000000000..421eb175c1d7a --- /dev/null +++ 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 index 3f3fcb95ef376..c07c61abc1d94 100644 --- 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 index f414220e85988..35fc1fd8cb24d 100644 --- 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 index b818d90d24881..2740cfb6f3805 100644 --- 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,