Update subscriptions block to handle CSS unit font sizes (#18936)

Due to Gutenberg updating its FontSizePicker and theme.json to handle CSS units, those values are now strings which were incompatible with the approach in the subscriptions block shortcode for custom font sizes.
Automattic · Mar 3, 2021 · 92a66a4 · 92a66a4
1 parent 89de4d0
commit 92a66a4
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 14 deletions.
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;
 	}