Subscriptions Block: Stop saving localized attributes defaults in the…

… block content (#16361) When a block is created in English and the site switched to a second language before the block is migrated, the block will be deemed invalid. This change will attempt to fall back to English defaults for the placeholder text in the saved shortcode that causes the invalidation. This will not change migrated attributes only the generated content from the deprecated block save function. It also will only cover blocks first created in English and using default text. If the block was created in a second language, there is no means to determine the language and therefore the default text for that translation to fall back to. Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Automattic · Jul 21, 2020 · 01eeddd · 01eeddd
1 parent 1172af4
commit 01eeddd
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 22 deletions.
diff --git a/extensions/blocks/subscriptions/deprecated/index.js b/extensions/blocks/subscriptions/deprecated/index.js
@@ -4,5 +4,7 @@
 
 import deprecatedV1 from './v1';
 import deprecatedV2 from './v2';
+import deprecatedV3 from './v3';
+import deprecatedV4 from './v4';
 
-export default [ deprecatedV1, deprecatedV2 ];
+export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4 ];
diff --git a/extensions/blocks/subscriptions/deprecated/v3/attributes.js b/extensions/blocks/subscriptions/deprecated/v3/attributes.js
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	subscribePlaceholder: {
+		type: 'string',
+		default: __( 'Enter your email address', 'jetpack' ),
+	},
+	showSubscribersTotal: {
+		type: 'boolean',
+		default: false,
+	},
+	buttonOnNewLine: {
+		type: 'boolean',
+		default: false,
+	},
+	submitButtonText: {
+		type: 'string',
+		default: __( 'Sign Up', '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: 'number',
+	},
+	customFontSize: {
+		type: 'number',
+	},
+	borderRadius: {
+		type: 'number',
+	},
+	borderWeight: {
+		type: 'number',
+	},
+	borderColor: {
+		type: 'string',
+	},
+	customBorderColor: {
+		type: 'string',
+	},
+	padding: {
+		type: 'number',
+	},
+	spacing: {
+		type: 'number',
+	},
+};
diff --git a/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js b/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass as getGradientClass,
+	getFontSizeClass,
+} from '@wordpress/block-editor';
+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 default function getSubscriptionsShortcode( className, attributes, checkTextDefaults = null ) {
+	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
+		);
+	};
+
+	let placeholderText = subscribePlaceholder;
+	let buttonText = submitButtonText;
+
+	if ( 'check-text-defaults' === checkTextDefaults ) {
+		placeholderText = subscribePlaceholder === definedAttributes.subscribePlaceholder.default
+			? 'Enter your email address'
+			: subscribePlaceholder;
+		buttonText = submitButtonText === definedAttributes.submitButtonText.default
+			? 'Sign Up'
+			: submitButtonText;
+	}
+
+	return (
+		<div className={ getBlockClassName() }>
+			<RawHTML>
+				{ `
+			[jetpack_subscription_form
+				subscribe_placeholder="${ placeholderText }"
+				show_subscribers_total="${ showSubscribersTotal }"
+				button_on_newline="${ buttonOnNewLine }"
+				submit_button_text="${ buttonText }"
+				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"
+			]` }
+			</RawHTML>
+		</div>
+	);
+}
diff --git a/extensions/blocks/subscriptions/deprecated/v3/index.js b/extensions/blocks/subscriptions/deprecated/v3/index.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import definedAttributes from './attributes';
+import getSubscriptionsShortcode from './get-subscriptions-shortcode';
+
+export default {
+	attributes: definedAttributes,
+	save: ( { className, attributes } ) => getSubscriptionsShortcode( className, attributes ),
+};
diff --git a/extensions/blocks/subscriptions/deprecated/v4/index.js b/extensions/blocks/subscriptions/deprecated/v4/index.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import definedAttributes from '../v3/attributes';
+import getSubscriptionsShortcode from '../v3/get-subscriptions-shortcode';
+
+export default {
+	attributes: definedAttributes,
+	save: ( { className, attributes } ) =>
+		getSubscriptionsShortcode( className, attributes, 'check-text-defaults' ),
+};
diff --git a/extensions/blocks/subscriptions/save.js b/extensions/blocks/subscriptions/save.js
@@ -8,10 +8,12 @@ import {
 	getFontSizeClass,
 } from '@wordpress/block-editor';
 import classnames from 'classnames';
+import { reduce } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import defaultAttributes from './attributes';
 import {
 	DEFAULT_BORDER_RADIUS_VALUE,
 	DEFAULT_BORDER_WEIGHT_VALUE,
@@ -102,29 +104,45 @@ export default function Save( { className, attributes } ) {
 		);
 	};
 
+	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_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
-				subscribe_placeholder="${ subscribePlaceholder }"
-				show_subscribers_total="${ showSubscribersTotal }"
-				button_on_newline="${ buttonOnNewLine }"
-				submit_button_text="${ submitButtonText }"
-				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"
-			]` }
-			</RawHTML>
+			<RawHTML>{ `[jetpack_subscription_form${ shortcodeAttributesStringified }]` }</RawHTML>
 		</div>
 	);
 }