Subscriptions Block: Stop saving localized attributes defaults in the block content

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 ];

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',
+	},
+};

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

extensions/blocks/subscriptions/deprecated/v3/index.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import getSubscriptionsShortcode from './get-subscriptions-shortcode';
+
+export default {
+	attributes,
+	save: ( { className, attrs } ) => getSubscriptionsShortcode( className, attrs ),
+};

extensions/blocks/subscriptions/deprecated/v4/index.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import attributes from '../v3/attributes';
+import getSubscriptionsShortcode from '../v3/get-subscriptions-shortcode';
+
+export default {
+	attributes,
+	save: ( { className, attrs } ) =>
+		getSubscriptionsShortcode( className, attrs, 'check-text-defaults' ),
+};

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