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 ( +
+ + { ` + [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" + ]` } + +
+ ); +} diff --git a/extensions/blocks/subscriptions/deprecated/v3/index.js b/extensions/blocks/subscriptions/deprecated/v3/index.js new file mode 100644 index 0000000000000..303a7cb15226b --- /dev/null +++ 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 new file mode 100644 index 0000000000000..3d68f7dfbb241 --- /dev/null +++ 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 index 955a47fd75805..03e930f221015 100644 --- 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 (
- - { ` - [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" - ]` } - + { `[jetpack_subscription_form${ shortcodeAttributesStringified }]` }
); }