diff --git a/extensions/blocks/subscriptions/deprecated/index.js b/extensions/blocks/subscriptions/deprecated/index.js index 15c62c3d1685b..c511e4f787de8 100644 --- 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 new file mode 100644 index 0000000000000..e2052b5880f81 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..c35ac192eb7a3 --- /dev/null +++ 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 ( +