[Subscription block] Add social followers toggle

projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/subscribers.php

@@ -95,10 +95,10 @@ public function get_subscriber_counts() {
 			delete_transient( 'wpcom_subscribers_totals' );
 		}
 
-		$subscriber_info  = Jetpack_Subscriptions_Widget::fetch_subscriber_counts();
-		$subscriber_count = $subscriber_info['value'];
+		$subscriber_info   = Jetpack_Subscriptions_Widget::fetch_subscriber_counts();
+		$subscriber_counts = $subscriber_info['value'];
 
-		return array( 'counts' => $subscriber_count );
+		return array( 'counts' => $subscriber_counts );
 	}
 }
 

projects/plugins/jetpack/changelog/add-subscription-block-social-toggle

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add a checkbox to include/exclude social followers from subscription block.

projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js

@@ -9,6 +9,10 @@ export default {
 		type: 'boolean',
 		default: false,
 	},
+	includeSocialFollowers: {
+		type: 'boolean',
+		default: true,
+	},
 	buttonOnNewLine: {
 		type: 'boolean',
 		default: false,

projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js

@@ -38,6 +38,7 @@ export default function SubscriptionControls( {
 	fallbackButtonBackgroundColor,
 	fallbackTextColor,
 	fontSize,
+	includeSocialFollowers,
 	isGradientAvailable,
 	padding,
 	setAttributes,
@@ -53,7 +54,7 @@ export default function SubscriptionControls( {
 } ) {
 	return (
 		<>
-			{ subscriberCount > 1 && (
+			{ subscriberCount > 0 && (
 				<InspectorNotice>
 					{ createInterpolateElement(
 						sprintf(
@@ -236,6 +237,14 @@ export default function SubscriptionControls( {
 						}
 					} }
 				/>
+				<ToggleControl
+					disabled={ ! showSubscribersTotal }
+					label={ __( 'Include social followers in count', 'jetpack' ) }
+					checked={ includeSocialFollowers }
+					onChange={ () => {
+						setAttributes( { includeSocialFollowers: ! includeSocialFollowers } );
+					} }
+				/>
 				<ToggleControl
 					label={ __( 'Place button on new line', 'jetpack' ) }
 					checked={ buttonOnNewLine }

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js

@@ -4,11 +4,13 @@ import deprecatedV3 from './v3';
 import deprecatedV4 from './v4';
 import deprecatedV5 from './v5';
 import deprecatedV6 from './v6';
+import deprecatedV7 from './v7';
 
 // Deprecations should run in reverse chronological order. Most probable
 // deprecations to run are the most recent. This ordering makes the process
 // a little more performant.
 export default [
+	deprecatedV7,
 	deprecatedV6,
 	deprecatedV5,
 	deprecatedV4,

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/attributes.js

@@ -0,0 +1,84 @@
+import { __ } from '@wordpress/i18n';
+
+export default {
+	subscribePlaceholder: {
+		type: 'string',
+		default: __( 'Type your email…', 'jetpack' ),
+	},
+	showSubscribersTotal: {
+		type: 'boolean',
+		default: false,
+	},
+	buttonOnNewLine: {
+		type: 'boolean',
+		default: false,
+	},
+	buttonWidth: {
+		type: 'string',
+	},
+	submitButtonText: {
+		type: 'string',
+		default: __( 'Subscribe', 'jetpack' ),
+	},
+	emailFieldBackgroundColor: {
+		type: 'string',
+	},
+	customEmailFieldBackgroundColor: {
+		type: 'string',
+	},
+	emailFieldGradient: {
+		type: 'string',
+	},
+	customEmailFieldGradient: {
+		type: 'string',
+	},
+	buttonBackgroundColor: {
+		type: 'string',
+	},
+	customButtonBackgroundColor: {
+		type: 'string',
+	},
+	buttonGradient: {
+		type: 'string',
+	},
+	customButtonGradient: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
+	fontSize: {
+		type: 'string',
+	},
+	customFontSize: {
+		type: 'string',
+	},
+	borderRadius: {
+		type: 'number',
+	},
+	borderWeight: {
+		type: 'number',
+	},
+	borderColor: {
+		type: 'string',
+	},
+	customBorderColor: {
+		type: 'string',
+	},
+	padding: {
+		type: 'number',
+	},
+	spacing: {
+		type: 'number',
+	},
+	successMessage: {
+		type: 'string',
+		default: __(
+			"Success! An email was just sent to confirm your subscription. Please find the email now and click 'Confirm Follow' to start subscribing.",
+			'jetpack'
+		),
+	},
+};

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/index.js

@@ -0,0 +1,18 @@
+import definedAttributes from './attributes';
+import save from './save';
+
+/**
+ * Deprecation reason
+ *
+ * Added new block attribute `successMessage`, which was already available to the shortcode.
+ */
+export default {
+	attributes: definedAttributes,
+	save,
+	migrate: oldAttributes => {
+		return {
+			includeSocialFollowers: true,
+			...oldAttributes,
+		};
+	},
+};

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v7/save.js

@@ -0,0 +1,146 @@
+import {
+	getColorClassName,
+	__experimentalGetGradientClass as getGradientClass, // eslint-disable-line wpcalypso/no-unsafe-wp-apis
+	getFontSizeClass,
+} from '@wordpress/block-editor';
+import { RawHTML } from '@wordpress/element';
+import classnames from 'classnames';
+import { reduce } from 'lodash';
+import defaultAttributes from './attributes';
+
+const DEFAULT_BORDER_RADIUS_VALUE = 0;
+const DEFAULT_BORDER_WEIGHT_VALUE = 1;
+const DEFAULT_PADDING_VALUE = 15;
+const DEFAULT_SPACING_VALUE = 10;
+const DEFAULT_FONTSIZE_VALUE = '16px';
+
+export default function Save( { className, attributes } ) {
+	const {
+		subscribePlaceholder,
+		showSubscribersTotal,
+		buttonOnNewLine,
+		submitButtonText,
+		emailFieldBackgroundColor,
+		customEmailFieldBackgroundColor,
+		emailFieldGradient,
+		customEmailFieldGradient,
+		buttonBackgroundColor,
+		customButtonBackgroundColor,
+		buttonGradient,
+		customButtonGradient,
+		textColor,
+		customTextColor,
+		fontSize,
+		customFontSize,
+		borderRadius,
+		borderWeight,
+		borderColor,
+		customBorderColor,
+		padding,
+		spacing,
+		buttonWidth,
+		successMessage,
+	} = attributes;
+
+	const isGradientAvailable = !! getGradientClass;
+
+	const textColorClass = getColorClassName( 'color', textColor );
+	const fontSizeClass = getFontSizeClass( fontSize );
+	const borderClass = getColorClassName( 'border-color', borderColor );
+	const buttonBackgroundClass = getColorClassName( 'background-color', buttonBackgroundColor );
+	const buttonGradientClass = isGradientAvailable ? getGradientClass( buttonGradient ) : undefined;
+
+	const emailFieldBackgroundClass = getColorClassName(
+		'background-color',
+		emailFieldBackgroundColor
+	);
+	const emailFieldGradientClass = isGradientAvailable
+		? getGradientClass( emailFieldGradient )
+		: undefined;
+
+	const sharedClasses = classnames(
+		borderRadius === 0 ? 'no-border-radius' : undefined,
+		fontSizeClass,
+		borderClass
+	);
+
+	const submitButtonClasses = classnames(
+		sharedClasses,
+		textColor ? 'has-text-color' : undefined,
+		textColorClass,
+		buttonBackgroundColor || buttonGradient ? 'has-background' : undefined,
+		buttonBackgroundClass,
+		buttonGradientClass
+	);
+
+	const emailFieldClasses = classnames(
+		sharedClasses,
+		emailFieldBackgroundClass,
+		emailFieldGradientClass
+	);
+
+	const emailFieldBackgroundStyle =
+		! emailFieldBackgroundClass && customEmailFieldGradient
+			? customEmailFieldGradient
+			: customEmailFieldBackgroundColor;
+
+	const buttonBackgroundStyle =
+		! buttonBackgroundClass && customButtonGradient
+			? customButtonGradient
+			: customButtonBackgroundColor;
+
+	const buttonWidthStyle = buttonWidth ? buttonWidth : undefined;
+
+	const getBlockClassName = () => {
+		return classnames(
+			className,
+			'wp-block-jetpack-subscriptions__supports-newline',
+			buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
+			showSubscribersTotal ? 'wp-block-jetpack-subscriptions__show-subs' : undefined
+		);
+	};
+
+	const shortcodeAttributes = {
+		subscribe_placeholder:
+			subscribePlaceholder !== defaultAttributes.subscribePlaceholder.default
+				? subscribePlaceholder
+				: undefined,
+		show_subscribers_total: showSubscribersTotal,
+		button_on_newline: buttonOnNewLine,
+		submit_button_text:
+			submitButtonText !== defaultAttributes.submitButtonText.default
+				? submitButtonText
+				: undefined,
+		custom_background_emailfield_color: emailFieldBackgroundStyle,
+		custom_background_button_color: buttonBackgroundStyle,
+		custom_text_button_color: customTextColor,
+		custom_font_size: customFontSize || DEFAULT_FONTSIZE_VALUE,
+		custom_border_radius: borderRadius || DEFAULT_BORDER_RADIUS_VALUE,
+		custom_border_weight: borderWeight || DEFAULT_BORDER_WEIGHT_VALUE,
+		custom_border_color: customBorderColor,
+		custom_button_width: buttonWidthStyle,
+		custom_padding: padding || DEFAULT_PADDING_VALUE,
+		custom_spacing: spacing || DEFAULT_SPACING_VALUE,
+		submit_button_classes: submitButtonClasses,
+		email_field_classes: emailFieldClasses,
+		show_only_email_and_button: true,
+		success_message: successMessage,
+	};
+
+	const shortcodeAttributesStringified = reduce(
+		shortcodeAttributes,
+		( stringifiedAttributes, value, key ) => {
+			if ( undefined === value ) {
+				return stringifiedAttributes;
+			}
+			return stringifiedAttributes + ` ${ key }="${ value }"`;
+		},
+		''
+	);
+
+	return (
+		<div className={ getBlockClassName() }>
+			<RawHTML>{ `[jetpack_subscription_form${ shortcodeAttributesStringified }]` }</RawHTML>
+		</div>
+	);
+}

projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js

@@ -12,7 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { isEqual } from 'lodash';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
-import { getSubscriberCount } from './api';
+import { getSubscriberCounts } from './api';
 import './view.scss';
 import defaultAttributes from './attributes';
 import {
@@ -70,6 +70,7 @@ export function SubscriptionEdit( props ) {
 		borderRadius,
 		borderWeight,
 		buttonWidth,
+		includeSocialFollowers,
 		padding,
 		spacing,
 		submitButtonText,
@@ -174,8 +175,12 @@ export function SubscriptionEdit( props ) {
 	};
 
 	useEffect( () => {
-		getSubscriberCount(
-			count => {
+		getSubscriberCounts(
+			counts => {
+				const count = includeSocialFollowers
+					? counts.email_subscribers + counts.social_followers
+					: counts.email_subscribers;
+
 				setSubscriberCountString(
 					sprintf(
 						/* translators: Placeholder is a number of subscribers. */
@@ -190,7 +195,7 @@ export function SubscriptionEdit( props ) {
 				setSubscriberCount( 0 );
 			}
 		);
-	}, [] );
+	}, [ includeSocialFollowers ] );
 
 	const previousButtonBackgroundColor = usePrevious( buttonBackgroundColor );
 
@@ -218,6 +223,7 @@ export function SubscriptionEdit( props ) {
 					fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
 					fallbackTextColor={ fallbackTextColor }
 					fontSize={ fontSize }
+					includeSocialFollowers={ includeSocialFollowers }
 					isGradientAvailable={ isGradientAvailable }
 					padding={ padding }
 					setAttributes={ setAttributes }

projects/plugins/jetpack/extensions/blocks/subscriptions/save.js

@@ -20,6 +20,7 @@ export default function Save( { className, attributes } ) {
 	const {
 		subscribePlaceholder,
 		showSubscribersTotal,
+		includeSocialFollowers,
 		buttonOnNewLine,
 		submitButtonText,
 		emailFieldBackgroundColor,
@@ -108,6 +109,7 @@ export default function Save( { className, attributes } ) {
 				? subscribePlaceholder
 				: undefined,
 		show_subscribers_total: showSubscribersTotal,
+		include_social_followers: includeSocialFollowers,
 		button_on_newline: buttonOnNewLine,
 		submit_button_text:
 			submitButtonText !== defaultAttributes.submitButtonText.default