[Subscription block] Add social followers toggle

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

@@ -39,6 +39,18 @@ public function register_routes() {
 				),
 			)
 		);
+		// GET /sites/<blog_id>/subscriber/counts - Return splitted number of subscribers for this site
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base . '/counts',
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_subscriber_counts' ),
+					'permission_callback' => array( $this, 'readable_permission_check' ),
+				),
+			)
+		);
 	}
 
 	/**
@@ -72,6 +84,22 @@ public function get_subscriber_count( $request ) { // phpcs:ignore VariableAnaly
 			'count' => $subscriber_count,
 		);
 	}
+
+	/**
+	 * Retrieves splitted subscriber counts
+	 *
+	 * @return array data object containing subscriber counts ['email_subscribers' => 0, 'social_followers' => 0]
+	 */
+	public function get_subscriber_counts() {
+		if ( ! Constants::is_defined( 'TESTING_IN_JETPACK' ) ) {
+			delete_transient( 'wpcom_subscribers_totals' );
+		}
+
+		$subscriber_info  = Jetpack_Subscriptions_Widget::fetch_subscriber_counts();
+		$subscriber_count = $subscriber_info['value'];
+
+		return array( 'counts' => $subscriber_count );
+	}
 }
 
 if (

projects/plugins/jetpack/changelog/add-pre-publish-panel-changes

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Split out the email subscribers & social followers in the pre-publish panel.

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/api.js

@@ -3,12 +3,25 @@ import apiFetch from '@wordpress/api-fetch';
 export function getSubscriberCount( successCallback, failureCallback ) {
 	return apiFetch( {
 		path: '/wpcom/v2/subscribers/count?include_publicize_subscribers=false',
-	} ).then( count => {
+	} ).then( ( { count } = {} ) => {
 		// Handle error condition
-		if ( ! count.hasOwnProperty( 'count' ) ) {
+		if ( typeof count !== 'undefined' ) {
+			successCallback( count );
+		} else {
 			failureCallback();
+		}
+	} );
+}
+
+export function getSubscriberCounts( successCallback, failureCallback ) {
+	return apiFetch( {
+		path: '/wpcom/v2/subscribers/counts',
+	} ).then( ( { counts } = {} ) => {
+		// Handle error condition
+		if ( counts ) {
+			successCallback( counts );
 		} else {
-			successCallback( count.count );
+			failureCallback();
 		}
 	} );
 }

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>
+	);
+}