[Subscription block] Add social followers toggle (#27443)

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

@@ -77,8 +77,7 @@ public function get_subscriber_count( $request ) { // phpcs:ignore VariableAnaly
 			delete_transient( 'wpcom_subscribers_total_no_publicize' );
 		}
 		$include_publicize_subscribers = isset( $request['include_publicize_subscribers'] ) ? rest_sanitize_boolean( $request['include_publicize_subscribers'] ) : true;
-		$subscriber_info               = Jetpack_Subscriptions_Widget::fetch_subscriber_count( $include_publicize_subscribers );
-		$subscriber_count              = $subscriber_info['value'];
+		$subscriber_count              = Jetpack_Subscriptions_Widget::fetch_subscriber_count( $include_publicize_subscribers );
 
 		return array(
 			'count' => $subscriber_count,
@@ -95,10 +94,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   = Automattic\Jetpack\Extensions\Subscriptions\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

@@ -5,11 +5,13 @@ import deprecatedV4 from './v4';
 import deprecatedV5 from './v5';
 import deprecatedV6 from './v6';
 import deprecatedV7 from './v7';
+import deprecatedV8 from './v8';
 
 // 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 [
+	deprecatedV8,
 	deprecatedV7,
 	deprecatedV6,
 	deprecatedV5,

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v8/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/v8/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,
+	migrate: oldAttributes => {
+		return {
+			includeSocialFollowers: true,
+			...oldAttributes,
+		};
+	},
+	save,
+};

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

@@ -0,0 +1,15 @@
+import classnames from 'classnames';
+
+export default function Save( { className, attributes } ) {
+	const { showSubscribersTotal, buttonOnNewLine } = attributes;
+
+	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
+		);
+	};
+	return <div className={ getBlockClassName() }></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/subscriptions.php

@@ -61,6 +61,66 @@ function is_wpcom() {
 	return defined( 'IS_WPCOM' ) && IS_WPCOM;
 }
 
+/**
+ * Determine the amount of folks currently subscribed to the blog, splitted out in email_subscribers & social_followers
+ *
+ * @return array containing ['value' => ['email_subscribers' => 0, 'social_followers' => 0]]
+ */
+function fetch_subscriber_counts() {
+	$subs_count = 0;
+	if ( is_wpcom() ) {
+		$subs_count = array(
+			'value' => array(
+				'email_subscribers' => \wpcom_subs_total_for_blog(),
+				'social_followers'  => \wpcom_social_followers_total_for_blog(),
+			),
+		);
+	} else {
+		$cache_key  = 'wpcom_subscribers_totals';
+		$subs_count = get_transient( $cache_key );
+		if ( false === $subs_count || 'failed' === $subs_count['status'] ) {
+			$xml = new \Jetpack_IXR_Client();
+			$xml->query( 'jetpack.fetchSubscriberCounts' );
+
+			if ( $xml->isError() ) { // If we get an error from .com, set the status to failed so that we will try again next time the data is requested.
+				$subs_count = array(
+					'status'  => 'failed',
+					'code'    => $xml->getErrorCode(),
+					'message' => $xml->getErrorMessage(),
+					'value'   => ( isset( $subs_count['value'] ) ) ? $subs_count['value'] : array(
+						'email_subscribers' => 0,
+						'social_followers'  => 0,
+					),
+				);
+			} else {
+				$subs_count = array(
+					'status' => 'success',
+					'value'  => $xml->getResponse(),
+				);
+			}
+			set_transient( $cache_key, $subs_count, 3600 ); // Try to cache the result for at least 1 hour.
+		}
+	}
+	return $subs_count;
+}
+
+/**
+ * Returns subscriber count based on include_social_followers attribute
+ *
+ * @param bool $include_social_followers Whether to include social followers in the count.
+ * @return int
+ */
+function get_subscriber_count( $include_social_followers ) {
+	$counts = fetch_subscriber_counts();
+
+	if ( $include_social_followers ) {
+		$subscriber_count = $counts['value']['email_subscribers'] + $counts['value']['social_followers'];
+	} else {
+		$subscriber_count = $counts['value']['email_subscribers'];
+	}
+	return $subscriber_count;
+}
+
 /**
  * Returns true if the block attributes contain a value for the given key.
  *
@@ -265,8 +325,9 @@ function render_block( $attributes, $content ) { // phpcs:ignore VariableAnalysi
 	// The block is using the Jetpack_Subscriptions_Widget backend, hence the need to increase the instance count.
 	Jetpack_Subscriptions_Widget::$instance_count++;
 
-	$classes = get_element_class_names_from_attributes( $attributes );
-	$styles  = get_element_styles_from_attributes( $attributes );
+	$classes                  = get_element_class_names_from_attributes( $attributes );
+	$styles                   = get_element_styles_from_attributes( $attributes );
+	$include_social_followers = isset( $attributes['includeSocialFollowers'] ) ? (bool) get_attribute( $attributes, 'includeSocialFollowers' ) : true;
 
 	$data = array(
 		'widget_id'              => Jetpack_Subscriptions_Widget::$instance_count,
@@ -277,7 +338,6 @@ function render_block( $attributes, $content ) { // phpcs:ignore VariableAnalysi
 				'class' => $classes['block_wrapper'],
 			)
 		),
-
 		'subscribe_placeholder'  => get_attribute( $attributes, 'subscribePlaceholder', esc_html__( 'Type your email…', 'jetpack' ) ),
 		'submit_button_text'     => get_attribute( $attributes, 'submitButtonText', esc_html__( 'Subscribe', 'jetpack' ) ),
 		'success_message'        => get_attribute(
@@ -286,8 +346,7 @@ function render_block( $attributes, $content ) { // phpcs:ignore VariableAnalysi
 			esc_html__( "Success! An email was just sent to confirm your subscription. Please find the email now and click 'Confirm Follow' to start subscribing.", 'jetpack' )
 		),
 		'show_subscribers_total' => (bool) get_attribute( $attributes, 'showSubscribersTotal' ),
-		'subscribers_total'      => Jetpack_Subscriptions_Widget::fetch_subscriber_count( false ),
-
+		'subscribers_total'      => get_subscriber_count( $include_social_followers ),
 		'referer'                => esc_url_raw(
 			( is_ssl() ? 'https' : 'http' ) . '://' . ( isset( $_SERVER['HTTP_HOST'] ) ? wp_unslash( $_SERVER['HTTP_HOST'] ) : '' ) .
 			( isset( $_SERVER['REQUEST_URI'] ) ? wp_unslash( $_SERVER['REQUEST_URI'] ) : '' )
@@ -430,7 +489,6 @@ class="<?php echo esc_attr( $classes['submit_button'] ); ?>"
 function render_jetpack_subscribe_form( $data, $classes, $styles ) {
 	$form_id            = sprintf( 'subscribe-blog-%s', $data['widget_id'] );
 	$subscribe_field_id = apply_filters( 'subscribe_field_id', 'subscribe-field', $data['widget_id'] );
-
 	ob_start();
 
 	Jetpack_Subscriptions_Widget::render_widget_status_messages(
@@ -500,7 +558,7 @@ class="<?php echo esc_attr( $classes['submit_button'] ); ?>"
 					<div class="wp-block-jetpack-subscriptions__subscount">
 						<?php
 						/* translators: %s: number of folks following the blog */
-						echo esc_html( sprintf( _n( 'Join %s other subscriber', 'Join %s other subscribers', $data['subscribers_total']['value'], 'jetpack' ), number_format_i18n( $data['subscribers_total']['value'] ) ) );
+						echo esc_html( sprintf( _n( 'Join %s other subscriber', 'Join %s other subscribers', $data['subscribers_total'], 'jetpack' ), number_format_i18n( $data['subscribers_total'] ) ) );
 						?>
 					</div>
 				<?php endif; ?>

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

@@ -201,6 +201,17 @@ describe( 'Inspector controls', () => {
 			} );
 		} );
 
+		test( 'toggles include social followers', async () => {
+			const user = userEvent.setup();
+			render( <SubscriptionsInspectorControls { ...defaultProps } /> );
+			await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
+			await user.click( screen.getByLabelText( 'Include social followers in count' ) );
+
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				includeSocialFollowers: true,
+			} );
+		} );
+
 		test( 'toggles place button on new line', async () => {
 			const user = userEvent.setup();
 			render( <SubscriptionsInspectorControls { ...defaultProps } /> );