Donations: Save block content (#16705)

* Adds support for saving the content of a donations block into the post content, so the published view contains the block output. * It also follows up #16593 (comment) and implements the content sync logic as suggested there.
Automattic · Aug 6, 2020 · e3860aa · e3860aa
1 parent c07b42b
commit e3860aa
Show file tree

Hide file tree

Showing 12 changed files with 645 additions and 322 deletions.
diff --git a/extensions/blocks/donations/amount.js b/extensions/blocks/donations/amount.js
@@ -15,11 +15,35 @@ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
  */
 import { minimumTransactionAmountForCurrency } from '../../shared/currencies';
 
+const parseAmount = ( amount, currency ) => {
+	if ( ! amount ) {
+		return null;
+	}
+
+	if ( typeof amount === 'number' ) {
+		return amount;
+	}
+
+	amount = parseFloat(
+		amount
+			// Remove any thousand grouping separator.
+			.replace( new RegExp( '\\' + CURRENCIES[ currency ].grouping, 'g' ), '' )
+			// Replace the localized decimal separator with a dot (the standard decimal separator in float numbers).
+			.replace( new RegExp( '\\' + CURRENCIES[ currency ].decimal, 'g' ), '.' )
+	);
+
+	if ( isNaN( amount ) ) {
+		return null;
+	}
+
+	return amount;
+};
+
 const Amount = ( {
 	className = '',
 	currency = null,
 	defaultValue = null,
-	editable = false,
+	disabled = false,
 	label = '',
 	onChange = null,
 	value = '',
@@ -31,33 +55,6 @@ const Amount = ( {
 	const [ isInvalid, setIsInvalid ] = useState( false );
 	const richTextRef = useRef( null );
 
-	const parseAmount = useCallback(
-		amount => {
-			if ( ! amount ) {
-				return null;
-			}
-
-			if ( typeof amount === 'number' ) {
-				return amount;
-			}
-
-			amount = parseFloat(
-				amount
-					// Remove any thousand grouping separator.
-					.replace( new RegExp( '\\' + CURRENCIES[ currency ].grouping, 'g' ), '' )
-					// Replace the localized decimal separator with a dot (the standard decimal separator in float numbers).
-					.replace( new RegExp( '\\' + CURRENCIES[ currency ].decimal, 'g' ), '.' )
-			);
-
-			if ( isNaN( amount ) ) {
-				return null;
-			}
-
-			return amount;
-		},
-		[ currency ]
-	);
-
 	const setAmount = useCallback(
 		amount => {
 			setEditedValue( amount );
@@ -74,7 +71,7 @@ const Amount = ( {
 				setIsInvalid( true );
 			}
 		},
-		[ currency, parseAmount, onChange ]
+		[ currency, onChange ]
 	);
 
 	const setFocus = () => {
@@ -125,7 +122,7 @@ const Amount = ( {
 				tabIndex={ 0 }
 			>
 				{ CURRENCIES[ currency ].symbol }
-				{ editable ? (
+				{ ! disabled ? (
 					<RichText
 						allowedFormats={ [] }
 						aria-label={ label }
@@ -148,3 +145,4 @@ const Amount = ( {
 };
 
 export default Amount;
+export { parseAmount };
diff --git a/extensions/blocks/donations/attributes.js b/extensions/blocks/donations/attributes.js
@@ -8,41 +8,43 @@ export default {
 		type: 'string',
 		default: 'USD',
 	},
-	amounts: {
-		type: 'array',
-		items: {
-			type: 'number',
+	oneTimeDonation: {
+		type: 'object',
+		default: {
+			show: true,
+			planId: null,
+			amounts: [ 5, 15, 100 ],
+			heading: __( 'Make a one-time donation', 'jetpack' ),
+			extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
+			buttonText: __( 'Donate', 'jetpack' ),
 		},
-		default: [ 5, 15, 100 ],
 	},
-	oneTimePlanId: {
-		type: 'number',
-		default: null,
-	},
-	monthlyPlanId: {
-		type: 'number',
-		default: null,
+	monthlyDonation: {
+		type: 'object',
+		default: {
+			show: true,
+			planId: null,
+			amounts: [ 5, 15, 100 ],
+			heading: __( 'Make a monthly donation', 'jetpack' ),
+			extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
+			buttonText: __( 'Donate monthly', 'jetpack' ),
+		},
 	},
-	annuallyPlanId: {
-		type: 'number',
-		default: null,
+	annualDonation: {
+		type: 'object',
+		default: {
+			show: true,
+			planId: null,
+			amounts: [ 5, 15, 100 ],
+			heading: __( 'Make a yearly donation', 'jetpack' ),
+			extraText: __( 'Your contribution is appreciated.', 'jetpack' ),
+			buttonText: __( 'Donate yearly', 'jetpack' ),
+		},
 	},
 	showCustomAmount: {
 		type: 'boolean',
 		default: true,
 	},
-	oneTimeHeading: {
-		type: 'string',
-		default: __( 'Make a one-time donation', 'jetpack' ),
-	},
-	monthlyHeading: {
-		type: 'string',
-		default: __( 'Make a monthly donation', 'jetpack' ),
-	},
-	annualHeading: {
-		type: 'string',
-		default: __( 'Make a yearly donation', 'jetpack' ),
-	},
 	chooseAmountText: {
 		type: 'string',
 		default: __( 'Choose an amount', 'jetpack' ),
@@ -51,20 +53,4 @@ export default {
 		type: 'string',
 		default: __( 'Or enter a custom amount', 'jetpack' ),
 	},
-	extraText: {
-		type: 'string',
-		default: __( 'Your contribution is appreciated.', 'jetpack' ),
-	},
-	oneTimeButtonText: {
-		type: 'string',
-		default: __( 'Donate', 'jetpack' ),
-	},
-	monthlyButtonText: {
-		type: 'string',
-		default: __( 'Donate monthly', 'jetpack' ),
-	},
-	annualButtonText: {
-		type: 'string',
-		default: __( 'Donate yearly', 'jetpack' ),
-	},
 };
diff --git a/extensions/blocks/donations/common.scss b/extensions/blocks/donations/common.scss
@@ -0,0 +1,105 @@
+// Common styles for both views (editor and frontend).
+
+.wp-block-jetpack-donations {
+	.donations__container {
+		border: 1px solid $light-gray-700;
+	}
+
+	.donations__nav {
+		display: flex;
+		border-bottom: 1px solid $light-gray-700;
+	}
+
+	.donations__nav-item {
+		font-weight: bold;
+		display: inline-block;
+		flex-grow: 1;
+		text-align: center;
+		font-size: 16px;
+		padding: 16px;
+		height: auto;
+		border-radius: 0;
+		border-left: 1px solid $light-gray-700;
+		background-color: $white;
+		color: $dark-gray-800;
+		box-shadow: none;
+		text-transform: none;
+		text-decoration: none;
+		outline: none;
+
+		&:focus,
+		&:active {
+			border-radius: 0;
+		}
+
+		&:first-child {
+			border-left: none;
+		}
+
+		// Complex selector needed to override specificity.
+		&:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
+			background-color: $light-gray-100;
+			box-shadow: none;
+		}
+
+		// Complex selector needed to override specificity.
+		&.is-active,
+		&.is-active:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
+			background-color: $blue-wordpress-700;
+			box-shadow: none;
+			color: $white;
+		}
+	}
+
+	.donations__content {
+		padding: 0 24px;
+	}
+
+	.donations__amounts {
+		margin-top: 30px;
+		margin-bottom: 30px;
+	}
+
+	.donations__amount {
+		display: inline-block;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	.donations__amount .wp-block-button__link {
+		background-color: $white;
+		color: $dark-gray-800;
+		border: 1px solid $light-gray-700;
+		cursor: text;
+		text-decoration: none;
+		text-transform: none;
+
+		&.has-focus {
+			box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-wordpress-700;
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&.has-error {
+			box-shadow: 0 0 0 1px $white, 0 0 0 3px $alert-red;
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
+
+	.donations__custom-amount  .donations__amount-value {
+		margin-left: 4px;
+		min-width: 60px;
+	}
+
+	.donations__separator {
+		line-height: 8px;
+		height: 8px;
+		margin-bottom: 30px;
+		margin-top: 30px;
+	}
+
+	.donations__donate-button {
+		margin-bottom: 30px;
+	}
+}
diff --git a/extensions/blocks/donations/context.js b/extensions/blocks/donations/context.js
diff --git a/extensions/blocks/donations/controls.js b/extensions/blocks/donations/controls.js
@@ -24,7 +24,24 @@ import { CURRENCIES } from '@automattic/format-currency';
 
 const Controls = props => {
 	const { attributes, setAttributes, products, siteSlug } = props;
-	const { currency, monthlyPlanId, annuallyPlanId, showCustomAmount } = attributes;
+	const { currency, monthlyDonation, annualDonation, showCustomAmount } = attributes;
+
+	const toggleDonation = ( interval, show ) => {
+		const donationAttributes = {
+			'1 month': 'monthlyDonation',
+			'1 year': 'annualDonation',
+		};
+		const donationAttribute = donationAttributes[ interval ];
+		const donation = attributes[ donationAttribute ];
+
+		setAttributes( {
+			[ donationAttribute ]: {
+				...donation,
+				show,
+				planId: show ? products[ interval ] : null,
+			},
+		} );
+	};
 
 	return (
 		<>
@@ -78,17 +95,13 @@ const Controls = props => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
 					<ToggleControl
-						checked={ !! monthlyPlanId }
-						onChange={ value =>
-							setAttributes( { monthlyPlanId: value ? products[ '1 month' ] : null } )
-						}
+						checked={ monthlyDonation.show }
+						onChange={ value => toggleDonation( '1 month', value ) }
 						label={ __( 'Show monthly donations', 'jetpack' ) }
 					/>
 					<ToggleControl
-						checked={ !! annuallyPlanId }
-						onChange={ value =>
-							setAttributes( { annuallyPlanId: value ? products[ '1 year' ] : null } )
-						}
+						checked={ annualDonation.show }
+						onChange={ value => toggleDonation( '1 year', value ) }
 						label={ __( 'Show annual donations', 'jetpack' ) }
 					/>
 					<ToggleControl