Global Styles: Show notice in privacy settings

apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/api/class-global-styles-info-rest-api.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * WPCOM Global Styles Info API.
+ *
+ * @package full-site-editing-plugin
+ */
+
+/**
+ * This class contains the necessary endpoints to interact with global styles outside the editor context.
+ */
+class Global_Styles_Info_Rest_API extends WP_REST_Controller {
+
+	/**
+	 * Class constructor
+	 */
+	public function __construct() {
+		$this->namespace                       = 'wpcom/v2';
+		$this->rest_base                       = 'global-styles-info';
+		$this->wpcom_is_site_specific_endpoint = true;
+		$this->wpcom_is_wpcom_only_endpoint    = true;
+		add_action( 'rest_api_init', array( $this, 'register_routes' ) );
+	}
+
+	/**
+	 * Here we register the routes this API will expose.
+	 *
+	 * @return void
+	 */
+	public function register_routes() {
+
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base,
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_global_styles_info' ),
+					'permission_callback' => array( $this, 'permissions_check' ),
+				),
+			)
+		);
+	}
+
+	/**
+	 * Checks if the user has the necessary permissions to get global styles information.
+	 *
+	 * @return bool|WP_Error
+	 */
+	public function permissions_check() {
+		if ( ! current_user_can( 'edit_theme_options' ) ) {
+			return new WP_Error(
+				'rest_cannot_view',
+				__( 'Your user is not permitted to access this resource.', 'full-site-editing' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns if the current blog has Global Styles in use and if Global Styles should be limited.
+	 *
+	 * @return array
+	 */
+	public function get_global_styles_info() {
+		return array(
+			'globalStylesInUse'       => wpcom_global_styles_in_use(),
+			'shouldLimitGlobalStyles' => wpcom_should_limit_global_styles(),
+		);
+	}
+}
+
+if ( function_exists( 'wpcom_rest_api_v2_load_plugin' ) ) {
+	wpcom_rest_api_v2_load_plugin( 'Global_Styles_Info_Rest_API' );
+}

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

@@ -220,3 +220,8 @@ function wpcom_display_global_styles_banner( $custom_controls ) {
 	return $custom_controls;
 }
 add_filter( 'wpcom_custom_launch_bar_controls', 'wpcom_display_global_styles_banner' );
+
+/**
+ * Include the Rest API that returns the global style information for a give WordPress site.
+ */
+require_once __DIR__ . '/api/class-global-styles-info-rest-api.php';

client/landing/stepper/declarative-flow/internals/steps-repository/components/accent-color-control/index.tsx

@@ -11,8 +11,8 @@ import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormLabel from 'calypso/components/forms/form-label';
 import FormInput from 'calypso/components/forms/form-text-input';
 import PremiumBadge from 'calypso/components/premium-badge';
-import { usePremiumGlobalStyles } from 'calypso/landing/stepper/hooks/use-premium-global-styles';
 import { tip } from 'calypso/signup/icons';
+import { usePremiumGlobalStyles } from 'calypso/state/sites/hooks/use-premium-global-styles';
 
 import './style.scss';
 

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/test/unified-design-picker.tsx

@@ -39,6 +39,10 @@ jest.mock( '../../../../../hooks/use-site', () => ( {
 	useSite: () => MOCKED_SITE,
 } ) );
 
+jest.mock( 'calypso/state/sites/hooks/use-premium-global-styles', () => ( {
+	usePremiumGlobalStyles: () => ( { shouldLimitGlobalStyles: false } ),
+} ) );
+
 /**
  * Mock wpcom-proxy-request so that we could use wpcom-xhr-request to call the endpoint
  * and get the response from nock

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -21,9 +21,9 @@ import { useQuerySitePurchases } from 'calypso/components/data/query-site-purcha
 import FormattedHeader from 'calypso/components/formatted-header';
 import PremiumBadge from 'calypso/components/premium-badge';
 import WebPreview from 'calypso/components/web-preview/content';
-import { usePremiumGlobalStyles } from 'calypso/landing/stepper/hooks/use-premium-global-styles';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { urlToSlug } from 'calypso/lib/url';
+import { usePremiumGlobalStyles } from 'calypso/state/sites/hooks/use-premium-global-styles';
 import { requestActiveTheme } from 'calypso/state/themes/actions';
 import { getPurchasedThemes } from 'calypso/state/themes/selectors/get-purchased-themes';
 import { isThemePurchased } from 'calypso/state/themes/selectors/is-theme-purchased';

client/my-sites/site-settings/form-general.jsx

@@ -32,6 +32,7 @@ import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
 import isUnlaunchedSite from 'calypso/state/selectors/is-unlaunched-site';
 import siteHasFeature from 'calypso/state/selectors/site-has-feature';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
+import { usePremiumGlobalStyles } from 'calypso/state/sites/hooks/use-premium-global-styles';
 import { launchSite } from 'calypso/state/sites/launch/actions';
 import {
 	getSiteOption,
@@ -260,6 +261,12 @@ export class SiteSettingsFormGeneral extends Component {
 		} );
 	};
 
+	trackAdvancedCustomizationUpgradeClick = () => {
+		this.props.recordTracksEvent( 'calypso_global_styles_gating_settings_notice_upgrade_click', {
+			cta_name: 'settings_site_privacy',
+		} );
+	};
+
 	trackFiverrLogoMakerClick = () => {
 		this.props.recordTracksEvent( 'calypso_site_icon_fiverr_logo_maker_cta_click', {
 			cta_name: 'site_icon_fiverr_logo_maker',
@@ -342,6 +349,7 @@ export class SiteSettingsFormGeneral extends Component {
 			siteIsJetpack,
 			siteIsAtomic,
 			translate,
+			shouldShowPremiumStylesNotice,
 		} = this.props;
 
 		const blogPublic = parseInt( fields.blog_public, 10 );
@@ -365,6 +373,7 @@ export class SiteSettingsFormGeneral extends Component {
 					! isWPForTeamsSite &&
 					! isAtomicAndEditingToolkitDeactivated && (
 						<>
+							{ shouldShowPremiumStylesNotice && this.advancedCustomizationNotice() }
 							<FormLabel className={ comingSoonFormLabelClasses }>
 								<FormRadio
 									name="blog_public"
@@ -698,6 +707,35 @@ export class SiteSettingsFormGeneral extends Component {
 			</div>
 		);
 	}
+
+	advancedCustomizationNotice() {
+		const { translate, siteSlug } = this.props;
+		const upgradeUrl = '/plans/' + siteSlug;
+		const siteUrl = `https://${ siteSlug }`;
+
+		return (
+			<>
+				<div className="site-settings__advanced-customization-notice">
+					<div className="site-settings__advanced-customization-notice-cta">
+						<Gridicon icon="info-outline" />
+						<span>
+							{ translate( 'Your style changes wont be public until you upgrade your plan.' ) }
+						</span>
+					</div>
+					<div className="site-settings__advanced-customization-notice-buttons">
+						<Button href={ siteUrl }>{ translate( 'View site' ) }</Button>
+						<Button
+							className="is-primary"
+							href={ upgradeUrl }
+							onClick={ this.trackAdvancedCustomizationUpgradeClick }
+						>
+							{ translate( 'Upgrade' ) }
+						</Button>
+					</div>
+				</div>
+			</>
+		);
+	}
 }
 
 const mapDispatchToProps = ( dispatch, ownProps ) => {
@@ -767,7 +805,18 @@ const getFormSettings = ( settings ) => {
 	return formSettings;
 };
 
+const SiteSettingsFormGeneralWithGlobalStylesNotice = ( props ) => {
+	const { globalStylesInUse, shouldLimitGlobalStyles } = usePremiumGlobalStyles();
+
+	return (
+		<SiteSettingsFormGeneral
+			{ ...props }
+			shouldShowPremiumStylesNotice={ globalStylesInUse && shouldLimitGlobalStyles }
+		/>
+	);
+};
+
 export default flowRight(
 	connectComponent,
 	wrapSettingsForm( getFormSettings )
-)( SiteSettingsFormGeneral );
+)( SiteSettingsFormGeneralWithGlobalStylesNotice );

client/my-sites/site-settings/style.scss

@@ -625,3 +625,38 @@ button.site-settings__general-settings-set-guessed-timezone.button.is-borderless
 	margin-top: -16px;
 	margin-bottom: 16px;
 }
+
+.site-settings__advanced-customization-notice {
+	display: flex;
+	padding: 20px;
+	background-color: #f4f4f4;
+	align-items: center;
+	justify-content: space-between;
+
+	.site-settings__advanced-customization-notice-cta {
+		display: flex;
+		align-items: center;
+	}
+
+	svg.gridicon.gridicons-info-outline {
+		color: #d38d16;
+		padding-right: 10px;
+	}
+
+	.site-settings__advanced-customization-notice-buttons {
+		display: flex;
+
+		.button.is-primary {
+			margin-left: 10px;
+
+		}
+	}
+
+	@media (max-width: 1100px) {
+		flex-direction: column;
+
+		.site-settings__advanced-customization-notice-buttons {
+			padding-top: 10px;
+		}
+	}
+}

client/state/sites/hooks/use-premium-global-styles.ts

@@ -0,0 +1,78 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import wpcom from 'calypso/lib/wp';
+import { getSite } from 'calypso/state/sites/selectors';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+
+type GlobalStylesInfo = {
+	shouldLimitGlobalStyles: boolean;
+	globalStylesInUse: boolean;
+};
+
+type Site = {
+	isCreated: boolean;
+	id: number;
+};
+
+const NEW_SITE_GLOBAL_STYLES_INFO: GlobalStylesInfo = {
+	// The next line should be replaced with true once the Gating global styles feature is live.
+	// That will make all non-created sites to limit global styles.
+	shouldLimitGlobalStyles: isEnabled( 'limit-global-styles' ),
+	globalStylesInUse: false,
+};
+
+// While we are loading the Global Styles Info we can't assume that we should limit global styles, or we would be
+// showing notices for paid sites until we fetch the data from the server.
+const DEFAULT_GLOBAL_STYLES_INFO: GlobalStylesInfo = {
+	shouldLimitGlobalStyles: false,
+	globalStylesInUse: false,
+};
+
+const getGSInfoEndpointForSite = ( siteId: number ) => ( {
+	path: `sites/${ siteId }/global-styles-info`,
+	apiNamespace: 'wpcom/v2/',
+} );
+
+const mapSiteIdToSite = ( siteId: number | null ) => ( {
+	isCreated: !! siteId,
+	id: siteId ?? 0,
+} );
+
+const getGlobalStylesInfoForSite = ( site: Site ) => {
+	if ( ! site.isCreated ) {
+		return NEW_SITE_GLOBAL_STYLES_INFO;
+	}
+
+	const globalStylesInfoEndpoint = getGSInfoEndpointForSite( site.id );
+	return wpcom.req.get( globalStylesInfoEndpoint );
+};
+
+export function usePremiumGlobalStyles(): GlobalStylesInfo {
+	const params = new URLSearchParams( window.location.search );
+	const siteSlugParam = params.get( 'siteSlug' );
+	const siteIdParam = params.get( 'siteId' );
+	const selectedSiteId = useSelector( getSelectedSiteId );
+
+	// When site id is null it means that the site hasn't been created yet.
+	const siteId = useSelector( ( state ) => {
+		const siteIdOrSlug = selectedSiteId ?? siteIdParam ?? siteSlugParam;
+		if ( ! siteIdOrSlug ) {
+			return null;
+		}
+		const site = getSite( state, siteIdOrSlug );
+		return site?.ID ?? null;
+	} );
+
+	const site = mapSiteIdToSite( siteId );
+
+	const { data } = useQuery(
+		[ 'globalStylesInfo', site ],
+		() => getGlobalStylesInfoForSite( site ),
+		{
+			placeholderData: DEFAULT_GLOBAL_STYLES_INFO,
+		}
+	);
+
+	return data;
+}