Automattic · aaronrobertshaw · Mar 3, 2021 · Feb 22, 2021
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js
@@ -51,10 +51,10 @@ export default {
 		type: 'string',
 	},
 	fontSize: {
-		type: 'number',
+		type: 'string',
 	},
 	customFontSize: {
-		type: 'number',
+		type: 'string',
 	},
 	borderRadius: {
 		type: 'number',

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js
@@ -14,4 +14,4 @@ export const MIN_SPACING_VALUE = 0;
 export const MAX_SPACING_VALUE = 50;
 export const DEFAULT_SPACING_VALUE = 10;
 
-export const DEFAULT_FONTSIZE_VALUE = 16;
+export const DEFAULT_FONTSIZE_VALUE = '16px';
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js
@@ -6,5 +6,6 @@ import deprecatedV1 from './v1';
 import deprecatedV2 from './v2';
 import deprecatedV3 from './v3';
 import deprecatedV4 from './v4';
+import deprecatedV5 from './v5';
 
-export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4 ];
+export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4, deprecatedV5 ];
diff --git a/...gins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js b/...gins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js
@@ -13,13 +13,12 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import definedAttributes from './attributes';
-import {
-	DEFAULT_BORDER_RADIUS_VALUE,
-	DEFAULT_BORDER_WEIGHT_VALUE,
-	DEFAULT_PADDING_VALUE,
-	DEFAULT_SPACING_VALUE,
-	DEFAULT_FONTSIZE_VALUE,
-} from '../../constants';
+
+export const DEFAULT_BORDER_RADIUS_VALUE = 0;
+export const DEFAULT_BORDER_WEIGHT_VALUE = 1;
+export const DEFAULT_PADDING_VALUE = 15;
+export const DEFAULT_SPACING_VALUE = 10;
+export const DEFAULT_FONTSIZE_VALUE = 16;
 
 export default function getSubscriptionsShortcode(
 	className,

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js
@@ -6,5 +6,12 @@ import getSubscriptionsShortcode from './get-subscriptions-shortcode';
 
 export default {
 	attributes: definedAttributes,
+	migrate: attributes => {
+		return {
+			...attributes,
+			fontSize: `${ attributes.fontSize }px`,
+			customFontSize: `${ attributes.customFontSize }px`,
+		};
+	},
 	save: ( { className, attributes } ) => getSubscriptionsShortcode( className, attributes ),
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js
@@ -6,6 +6,13 @@ import getSubscriptionsShortcode from '../v3/get-subscriptions-shortcode';
 
 export default {
 	attributes: definedAttributes,
+	migrate: attributes => {
+		return {
+			...attributes,
+			fontSize: `${ attributes.fontSize }px`,
+			customFontSize: `${ attributes.customFontSize }px`,
+		};
+	},
 	save: ( { className, attributes } ) =>
 		getSubscriptionsShortcode( className, attributes, 'check-text-defaults' ),
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js
@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import definedAttributes from '../v3/attributes';
+import save from './save';
+
+export default {
+	attributes: definedAttributes,
+	migrate: attributes => {
+		return {
+			...attributes,
+			fontSize: `${ attributes.fontSize }px`,
+			customFontSize: `${ attributes.customFontSize }px`,
+		};
+	},
+	save,
+};
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js
@@ -0,0 +1,147 @@
+/**
+ * External dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass as getGradientClass,
+	getFontSizeClass,
+} from '@wordpress/block-editor';
+import classnames from 'classnames';
+import { reduce } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import definedAttributes from '../v3/attributes';
+
+export const DEFAULT_BORDER_RADIUS_VALUE = 0;
+export const DEFAULT_BORDER_WEIGHT_VALUE = 1;
+export const DEFAULT_PADDING_VALUE = 15;
+export const DEFAULT_SPACING_VALUE = 10;
+export const DEFAULT_FONTSIZE_VALUE = 16;
+
+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,
+	} = 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 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 !== definedAttributes.subscribePlaceholder.default
+				? subscribePlaceholder
+				: undefined,
+		show_subscribers_total: showSubscribersTotal,
+		button_on_newline: buttonOnNewLine,
+		submit_button_text:
+			submitButtonText !== definedAttributes.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_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,
+	};
+
+	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>
+	);
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -63,7 +63,8 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 			buttonBackgroundColorValue || ! node
 				? undefined
 				: buttonNode && getComputedStyle( buttonNode ).backgroundColor,
-		fallbackTextColor: textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color,
+		fallbackTextColor:
+			textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color,
 	};
 } );
 
@@ -161,7 +162,7 @@ function SubscriptionEdit( props ) {
 		borderColor: borderColor.color,
 		borderRadius: borderRadius ? borderRadius + 'px' : DEFAULT_BORDER_RADIUS_VALUE + 'px',
 		borderWidth: borderWeight ? borderWeight + 'px' : DEFAULT_BORDER_WEIGHT_VALUE + 'px',
-		fontSize: fontSize.size ? fontSize.size + 'px' : DEFAULT_FONTSIZE_VALUE + 'px',
+		fontSize: fontSize.size ? fontSize.size : DEFAULT_FONTSIZE_VALUE,
 		padding: getPaddingStyleValue( padding ),
 	};
 

diff --git a/projects/plugins/jetpack/modules/subscriptions/views.php b/projects/plugins/jetpack/modules/subscriptions/views.php
@@ -776,7 +776,9 @@ function jetpack_do_subscription_form( $instance ) {
 	}
 
 	if ( isset( $instance['custom_font_size'] ) && 'undefined' !== $instance['custom_font_size'] ) {
-		$style                 = 'font-size: ' . $instance['custom_font_size'] . 'px; ';
+		$style  = 'font-size: ' . $instance['custom_font_size'];
+		$style .= is_numeric( $instance['custom_font_size'] ) ? 'px; ' : '; '; // Handle deprecated numeric font size values.
+
 		$submit_button_styles .= $style;
 		$email_field_styles   .= $style;
 	}