Subscriptions: Add unit tests and fixtures to validate block content parsing

projects/plugins/jetpack/changelog/add-subscription-block-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: compat
+
+Subscriptions block: adding unit tests only. Changelog entry not required.

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

@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, PanelBody, RangeControl } from '@wordpress/components';
+import {
+	ContrastChecker,
+	PanelColorSettings,
+	FontSizePicker,
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonWidthControl } from '../button/button-width-panel';
+import {
+	MIN_BORDER_RADIUS_VALUE,
+	MAX_BORDER_RADIUS_VALUE,
+	DEFAULT_BORDER_RADIUS_VALUE,
+	MIN_BORDER_WEIGHT_VALUE,
+	MAX_BORDER_WEIGHT_VALUE,
+	DEFAULT_BORDER_WEIGHT_VALUE,
+	MIN_PADDING_VALUE,
+	MAX_PADDING_VALUE,
+	DEFAULT_PADDING_VALUE,
+	MIN_SPACING_VALUE,
+	MAX_SPACING_VALUE,
+	DEFAULT_SPACING_VALUE,
+	DEFAULT_FONTSIZE_VALUE,
+} from './constants';
+
+export default function SubscriptionControls( {
+	buttonBackgroundColor,
+	borderColor,
+	buttonGradient,
+	borderRadius,
+	borderWeight,
+	buttonOnNewLine,
+	emailFieldBackgroundColor,
+	fallbackButtonBackgroundColor,
+	fallbackTextColor,
+	fontSize,
+	isGradientAvailable,
+	padding,
+	setAttributes,
+	setButtonBackgroundColor,
+	setTextColor,
+	showSubscribersTotal,
+	spacing,
+	subscriberCount,
+	textColor,
+	buttonWidth,
+} ) {
+	return (
+		<>
+			{ isGradientAvailable && (
+				<PanelColorGradientSettings
+					title={ __( 'Color Settings', 'jetpack' ) }
+					className="wp-block-jetpack-subscriptions__backgroundpanel"
+					settings={ [
+						{
+							colorValue: buttonBackgroundColor.color,
+							onColorChange: setButtonBackgroundColor,
+							gradientValue: buttonGradient.gradientValue,
+							onGradientChange: buttonGradient.setGradient,
+							label: __( 'Button Background Color', 'jetpack' ),
+						},
+						{
+							colorValue: textColor.color,
+							onColorChange: setTextColor,
+							label: __( 'Button Text Color', 'jetpack' ),
+						},
+						{
+							colorValue: borderColor.color,
+							onColorChange: newBorderColor => {
+								// Note: setBorderColor from withColors hook does not
+								// work correctly with shortcode border color rendering.
+								setAttributes( {
+									borderColor: newBorderColor,
+									customBorderColor: newBorderColor,
+								} );
+							},
+							label: __( 'Border Color', 'jetpack' ),
+						},
+					] }
+					initialOpen={ true }
+				>
+					<ContrastChecker
+						{ ...{
+							fontSize: fontSize.size,
+							textColor: textColor.color,
+							backgroundColor: emailFieldBackgroundColor.color,
+							fallbackButtonBackgroundColor,
+							fallbackTextColor,
+						} }
+					/>
+				</PanelColorGradientSettings>
+			) }
+			{ ! isGradientAvailable && (
+				<PanelColorSettings
+					title={ __( 'Background Colors', 'jetpack' ) }
+					className="wp-block-jetpack-subscriptions__backgroundpanel"
+					colorSettings={ [
+						{
+							value: buttonBackgroundColor.color,
+							onChange: setButtonBackgroundColor,
+							label: __( 'Button Background Color', 'jetpack' ),
+						},
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Button Text Color', 'jetpack' ),
+						},
+						{
+							value: borderColor.color,
+							onColorChange: newBorderColor => {
+								// Note: setBorderColor from withColors hook does not
+								// work correctly with shortcode border color rendering.
+								setAttributes( {
+									borderColor: newBorderColor,
+									customBorderColor: newBorderColor,
+								} );
+							},
+							label: __( 'Border Color', 'jetpack' ),
+						},
+					] }
+					initialOpen={ false }
+				>
+					<ContrastChecker
+						{ ...{
+							fontSize: fontSize.size,
+							textColor: textColor.color,
+							backgroundColor: emailFieldBackgroundColor.color,
+							fallbackButtonBackgroundColor,
+							fallbackTextColor,
+						} }
+					/>
+				</PanelColorSettings>
+			) }
+
+			<PanelBody
+				title={ __( 'Text Settings', 'jetpack' ) }
+				initialOpen={ false }
+				className="wp-block-jetpack-subscriptions__textpanel"
+			>
+				<FontSizePicker
+					withSlider={ true }
+					value={ fontSize.size }
+					onChange={ selectedFontSize => {
+						// Note: setFontSize from withFontSizes hook does not
+						// work correctly with shortcode font size rendering.
+						const newFontSize = selectedFontSize ? selectedFontSize : DEFAULT_FONTSIZE_VALUE;
+						setAttributes( {
+							fontSize: newFontSize,
+							customFontSize: newFontSize,
+						} );
+					} }
+				/>
+			</PanelBody>
+
+			<PanelBody
+				title={ __( 'Border Settings', 'jetpack' ) }
+				initialOpen={ false }
+				className="wp-block-jetpack-subscriptions__borderpanel"
+			>
+				<RangeControl
+					value={ borderRadius }
+					label={ __( 'Border Radius', 'jetpack' ) }
+					min={ MIN_BORDER_RADIUS_VALUE }
+					max={ MAX_BORDER_RADIUS_VALUE }
+					initialPosition={ DEFAULT_BORDER_RADIUS_VALUE }
+					allowReset
+					onChange={ newBorderRadius => setAttributes( { borderRadius: newBorderRadius } ) }
+				/>
+
+				<RangeControl
+					value={ borderWeight }
+					label={ __( 'Border Weight', 'jetpack' ) }
+					min={ MIN_BORDER_WEIGHT_VALUE }
+					max={ MAX_BORDER_WEIGHT_VALUE }
+					initialPosition={ DEFAULT_BORDER_WEIGHT_VALUE }
+					allowReset
+					onChange={ newBorderWeight => setAttributes( { borderWeight: newBorderWeight } ) }
+				/>
+			</PanelBody>
+
+			<PanelBody
+				title={ __( 'Spacing Settings', 'jetpack' ) }
+				initialOpen={ false }
+				className="wp-block-jetpack-subscriptions__spacingpanel"
+			>
+				<RangeControl
+					value={ padding }
+					label={ __( 'Space Inside', 'jetpack' ) }
+					min={ MIN_PADDING_VALUE }
+					max={ MAX_PADDING_VALUE }
+					initialPosition={ DEFAULT_PADDING_VALUE }
+					allowReset
+					onChange={ newPaddingValue => setAttributes( { padding: newPaddingValue } ) }
+				/>
+
+				<RangeControl
+					value={ spacing }
+					label={ __( 'Space Between', 'jetpack' ) }
+					min={ MIN_SPACING_VALUE }
+					max={ MAX_SPACING_VALUE }
+					initialPosition={ DEFAULT_SPACING_VALUE }
+					allowReset
+					onChange={ newSpacingValue => setAttributes( { spacing: newSpacingValue } ) }
+				/>
+
+				<ButtonWidthControl
+					width={ buttonWidth }
+					onChange={ newButtonWidth => setAttributes( { buttonWidth: newButtonWidth } ) }
+				/>
+			</PanelBody>
+
+			<PanelBody
+				title={ __( 'Display Settings', 'jetpack' ) }
+				initialOpen={ false }
+				className="wp-block-jetpack-subscriptions__displaypanel"
+			>
+				<ToggleControl
+					label={ __( 'Show subscriber count', 'jetpack' ) }
+					checked={ showSubscribersTotal }
+					onChange={ () => {
+						setAttributes( { showSubscribersTotal: ! showSubscribersTotal } );
+					} }
+					help={ () => {
+						if ( ! subscriberCount || subscriberCount < 1 ) {
+							return __(
+								'This will remain hidden on your website until you have at least one subscriber.',
+								'jetpack'
+							);
+						}
+					} }
+				/>
+
+				<ToggleControl
+					label={ __( 'Place button on new line', 'jetpack' ) }
+					checked={ buttonOnNewLine }
+					onChange={ () => {
+						setAttributes( { buttonOnNewLine: ! buttonOnNewLine } );
+					} }
+				/>
+			</PanelBody>
+		</>
+	);
+}

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js

@@ -8,4 +8,7 @@ import deprecatedV3 from './v3';
 import deprecatedV4 from './v4';
 import deprecatedV5 from './v5';
 
-export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4, deprecatedV5 ];
+// 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 [ deprecatedV5, deprecatedV4, deprecatedV3, deprecatedV2, deprecatedV1 ];

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v1/index.js

@@ -5,24 +5,26 @@ import { __ } from '@wordpress/i18n';
 import { isEmpty } from 'lodash';
 import { RawHTML } from '@wordpress/element';
 
+/**
+ * Deprecation reason:
+ *
+ * Block moved from `subscribeButton` attribute to `submitButtonText` when it
+ * had an empty value set.
+ */
 export default {
 	attributes: {
 		subscribeButton: { type: 'string', default: __( 'Subscribe', 'jetpack' ) },
 		showSubscribersTotal: { type: 'boolean', default: false },
 	},
-	migrate: attr => {
+	migrate: oldAttributes => {
 		return {
-			subscribeButton: '',
-			submitButtonText: attr.subscribeButton,
-			showSubscribersTotal: attr.showSubscribersTotal,
-			customBackgroundButtonColor: '',
-			customTextButtonColor: '',
-			submitButtonClasses: '',
+			submitButtonText: oldAttributes.subscribeButton,
+			showSubscribersTotal: oldAttributes.showSubscribersTotal,
 		};
 	},
-
 	isEligible: attr => {
-		if ( ! isEmpty( attr.subscribeButton ) ) {
+		// Newer block versions do not have `subscribeButton` attribute.
+		if ( ! attr.hasOwnProperty( 'subscribeButton' ) || ! isEmpty( attr.subscribeButton ) ) {
 			return false;
 		}
 		return true;

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v2/index.js

@@ -8,6 +8,12 @@ import { __ } from '@wordpress/i18n';
  */
 import save from './save';
 
+/**
+ * Deprecation reason:
+ *
+ * Addition of option to display button on new line and renaming of color
+ * attributes to better support use of SubmitButton component.
+ */
 export default {
 	attributes: {
 		subscribePlaceholder: { type: 'string', default: __( 'Email Address', 'jetpack' ) },

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js

@@ -4,13 +4,19 @@
 import definedAttributes from './attributes';
 import getSubscriptionsShortcode from './get-subscriptions-shortcode';
 
+/**
+ * Deprecation reason:
+ *
+ * Shortcode generation changed to omit undefined attributes.
+ */
 export default {
 	attributes: definedAttributes,
 	migrate: attributes => {
+		const { fontSize, customFontSize } = attributes;
 		return {
 			...attributes,
-			fontSize: `${ attributes.fontSize }px`,
-			customFontSize: `${ attributes.customFontSize }px`,
+			fontSize: fontSize ? `${ fontSize }px` : undefined,
+			customFontSize: customFontSize ? `${ customFontSize }px` : undefined,
 		};
 	},
 	save: ( { className, attributes } ) => getSubscriptionsShortcode( className, attributes ),

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js

@@ -4,13 +4,25 @@
 import definedAttributes from '../v3/attributes';
 import getSubscriptionsShortcode from '../v3/get-subscriptions-shortcode';
 
+/**
+ * Deprecation reason:
+ *
+ * Saving the default submit button text into the shortcode prevented that text
+ * from being translated for non-English locales.
+ *
+ * The `check-text-defaults` flag passed to the `getSubscriptionsShortcode`
+ * function means it will render the English defaults into the shortcode which
+ * can then in turn be detected as "default" text when parsing the shortcode and
+ * then translated appropriately.
+ */
 export default {
 	attributes: definedAttributes,
 	migrate: attributes => {
+		const { fontSize, customFontSize } = attributes;
 		return {
 			...attributes,
-			fontSize: `${ attributes.fontSize }px`,
-			customFontSize: `${ attributes.customFontSize }px`,
+			fontSize: fontSize ? `${ fontSize }px` : undefined,
+			customFontSize: customFontSize ? `${ customFontSize }px` : undefined,
 		};
 	},
 	save: ( { className, attributes } ) =>

projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js

@@ -4,13 +4,20 @@
 import definedAttributes from '../v3/attributes';
 import save from './save';
 
+/**
+ * Deprecation reason
+ *
+ * Gutenberg's font size selector changed to use values including CSS units.
+ * This changed the resulting values in the generated shortcode.
+ */
 export default {
 	attributes: definedAttributes,
 	migrate: attributes => {
+		const { fontSize, customFontSize } = attributes;
 		return {
 			...attributes,
-			fontSize: `${ attributes.fontSize }px`,
-			customFontSize: `${ attributes.customFontSize }px`,
+			fontSize: fontSize ? `${ fontSize }px` : undefined,
+			customFontSize: customFontSize ? `${ customFontSize }px` : undefined,
 		};
 	},
 	save,