From ad1ca7f29d6d5eb142a8bdacff685915a61db7ba Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 22 Feb 2021 12:00:14 +1000 Subject: [PATCH] Update subscriptions block to handle CSS unit font sizes Due to Gutenberg updating its FontSizePicker and theme.json to handle CSS units, those values are now strings which were incompatible with the approach in the subscriptions block shortcode for custom font sizes. --- .../blocks/subscriptions/attributes.js | 4 +- .../blocks/subscriptions/constants.js | 2 +- .../blocks/subscriptions/deprecated/index.js | 3 +- .../v3/get-subscriptions-shortcode.js | 13 +- .../subscriptions/deprecated/v3/index.js | 7 + .../subscriptions/deprecated/v4/index.js | 7 + .../subscriptions/deprecated/v5/index.js | 17 ++ .../subscriptions/deprecated/v5/save.js | 147 ++++++++++++++++++ .../extensions/blocks/subscriptions/edit.js | 5 +- .../jetpack/modules/subscriptions/views.php | 4 +- 10 files changed, 195 insertions(+), 14 deletions(-) create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js index 7e6815e484553..f2ee4615156a5 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js @@ -51,10 +51,10 @@ export default { type: 'string', }, fontSize: { - type: 'number', + type: 'string', }, customFontSize: { - type: 'number', + type: 'string', }, borderRadius: { type: 'number', diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js index ff9625781b419..930bbb49864c0 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/constants.js @@ -14,4 +14,4 @@ export const MIN_SPACING_VALUE = 0; export const MAX_SPACING_VALUE = 50; export const DEFAULT_SPACING_VALUE = 10; -export const DEFAULT_FONTSIZE_VALUE = 16; +export const DEFAULT_FONTSIZE_VALUE = '16px'; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js index c511e4f787de8..7d84110812861 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/index.js @@ -6,5 +6,6 @@ import deprecatedV1 from './v1'; import deprecatedV2 from './v2'; import deprecatedV3 from './v3'; import deprecatedV4 from './v4'; +import deprecatedV5 from './v5'; -export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4 ]; +export default [ deprecatedV1, deprecatedV2, deprecatedV3, deprecatedV4, deprecatedV5 ]; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js index 39f748669a665..473c051cd23fe 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/get-subscriptions-shortcode.js @@ -13,13 +13,12 @@ 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 const DEFAULT_BORDER_RADIUS_VALUE = 0; +export const DEFAULT_BORDER_WEIGHT_VALUE = 1; +export const DEFAULT_PADDING_VALUE = 15; +export const DEFAULT_SPACING_VALUE = 10; +export const DEFAULT_FONTSIZE_VALUE = 16; export default function getSubscriptionsShortcode( className, diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js index 303a7cb15226b..a297b30110462 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v3/index.js @@ -6,5 +6,12 @@ import getSubscriptionsShortcode from './get-subscriptions-shortcode'; export default { attributes: definedAttributes, + migrate: attributes => { + return { + ...attributes, + fontSize: `${ attributes.fontSize }px`, + customFontSize: `${ attributes.customFontSize }px`, + }; + }, save: ( { className, attributes } ) => getSubscriptionsShortcode( className, attributes ), }; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js index 3d68f7dfbb241..5b3fae075cab3 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v4/index.js @@ -6,6 +6,13 @@ import getSubscriptionsShortcode from '../v3/get-subscriptions-shortcode'; export default { attributes: definedAttributes, + migrate: attributes => { + return { + ...attributes, + fontSize: `${ attributes.fontSize }px`, + customFontSize: `${ attributes.customFontSize }px`, + }; + }, save: ( { className, attributes } ) => getSubscriptionsShortcode( className, attributes, 'check-text-defaults' ), }; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js new file mode 100644 index 0000000000000..40ffd8c7cf245 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/index.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import definedAttributes from '../v3/attributes'; +import save from './save'; + +export default { + attributes: definedAttributes, + migrate: attributes => { + return { + ...attributes, + fontSize: `${ attributes.fontSize }px`, + customFontSize: `${ attributes.customFontSize }px`, + }; + }, + save, +}; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js new file mode 100644 index 0000000000000..be25ffc091d30 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/deprecated/v5/save.js @@ -0,0 +1,147 @@ +/** + * External dependencies + */ +import { RawHTML } from '@wordpress/element'; +import { + getColorClassName, + __experimentalGetGradientClass as getGradientClass, + getFontSizeClass, +} from '@wordpress/block-editor'; +import classnames from 'classnames'; +import { reduce } from 'lodash'; + +/** + * Internal dependencies + */ +import definedAttributes from '../v3/attributes'; + +export const DEFAULT_BORDER_RADIUS_VALUE = 0; +export const DEFAULT_BORDER_WEIGHT_VALUE = 1; +export const DEFAULT_PADDING_VALUE = 15; +export const DEFAULT_SPACING_VALUE = 10; +export const DEFAULT_FONTSIZE_VALUE = 16; + +export default function Save( { className, attributes } ) { + 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 + ); + }; + + const shortcodeAttributes = { + subscribe_placeholder: + subscribePlaceholder !== definedAttributes.subscribePlaceholder.default + ? subscribePlaceholder + : undefined, + show_subscribers_total: showSubscribersTotal, + button_on_newline: buttonOnNewLine, + submit_button_text: + submitButtonText !== definedAttributes.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${ shortcodeAttributesStringified }]` } +
+ ); +} diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js index 4f4443e8bdc2e..524be32480366 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js @@ -63,7 +63,8 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => { buttonBackgroundColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).backgroundColor, - fallbackTextColor: textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color, + fallbackTextColor: + textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color, }; } ); @@ -161,7 +162,7 @@ function SubscriptionEdit( props ) { borderColor: borderColor.color, borderRadius: borderRadius ? borderRadius + 'px' : DEFAULT_BORDER_RADIUS_VALUE + 'px', borderWidth: borderWeight ? borderWeight + 'px' : DEFAULT_BORDER_WEIGHT_VALUE + 'px', - fontSize: fontSize.size ? fontSize.size + 'px' : DEFAULT_FONTSIZE_VALUE + 'px', + fontSize: fontSize.size ? fontSize.size : DEFAULT_FONTSIZE_VALUE, padding: getPaddingStyleValue( padding ), }; diff --git a/projects/plugins/jetpack/modules/subscriptions/views.php b/projects/plugins/jetpack/modules/subscriptions/views.php index 96fa3cd48cc00..e9a017995e94c 100644 --- a/projects/plugins/jetpack/modules/subscriptions/views.php +++ b/projects/plugins/jetpack/modules/subscriptions/views.php @@ -776,7 +776,9 @@ function jetpack_do_subscription_form( $instance ) { } if ( isset( $instance['custom_font_size'] ) && 'undefined' !== $instance['custom_font_size'] ) { - $style = 'font-size: ' . $instance['custom_font_size'] . 'px; '; + $style = 'font-size: ' . $instance['custom_font_size']; + $style .= is_numeric( $instance['custom_font_size'] ) ? 'px; ' : '; '; // Handle deprecated numeric font size values. + $submit_button_styles .= $style; $email_field_styles .= $style; }