WIP Donations block: Update donations block to use inner blocks

projects/plugins/jetpack/changelog/update-donations-block-to-inner-blocks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Ported Donations block from RichText to InnerBlocks.

projects/plugins/jetpack/extensions/blocks/donations/amount/amount.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Donations Amount Child Block.
+ *
+ * @package automattic/jetpack
+ */
+
+namespace Automattic\Jetpack\Extensions\Donations_Editable;
+
+use Automattic\Jetpack\Blocks;
+use Jetpack_Currencies;
+use Jetpack_Gutenberg;
+use Jetpack_Memberships;
+
+const DONATIONS_AMOUNT_BLOCK_NAME = 'donations-amount';
+
+/**
+ * Registers the block for use in Gutenberg
+ * This is done via an action so that we can disable
+ * registration if we need to.
+ */
+function register_donations_amount_block() {
+	Blocks::jetpack_register_block(
+		DONATIONS_AMOUNT_BLOCK_NAME,
+		array(
+			'render_callback' => __NAMESPACE__ . '\render_amount_block',
+		)
+	);
+}
+
+add_action( 'init', __NAMESPACE__ . '\register_donations_amount_block' );
+
+/**
+ * Render callback.
+ *
+ * @param array $attr Array containing the block attributes.
+ *
+ * @return string
+ */
+function render_amount_block( $attr ) {
+	jetpack_require_lib( 'class-jetpack-currencies' );
+
+	Jetpack_Gutenberg::load_styles_as_required( DONATIONS_AMOUNT_BLOCK_NAME );
+
+	if ( $attr['disabled'] ) {
+		$default_custom_amount = Jetpack_Memberships::SUPPORTED_CURRENCIES[ $attr['currency'] ] * 100;
+		return sprintf(
+			'<div class="donations__amount donations__custom-amount">
+				%1$s
+				<div class="donations__amount-value" data-currency="%2$s" data-empty-text="%3$s"></div>
+			</div>',
+			esc_html( Jetpack_Currencies::CURRENCIES[ $attr['currency'] ]['symbol'] ),
+			esc_attr( $attr['currency'] ),
+			esc_attr( Jetpack_Currencies::format_price( $default_custom_amount, $attr['currency'], false ) )
+		);
+	}
+
+	return sprintf(
+		'<div class="donations__amount" data-amount="%1$s">%2$s</div>',
+		esc_attr( $attr['amount'] ),
+		esc_html( Jetpack_Currencies::format_price( $attr['amount'], $attr['currency'] ) )
+	);
+}

projects/plugins/jetpack/extensions/blocks/donations/amount.js → projects/plugins/jetpack/extensions/blocks/donations/amount/edit.js

@@ -1,53 +1,48 @@
 /**
  * External dependencies
  */
-import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
 import classnames from 'classnames';
+import { minimumTransactionAmountForCurrency, parseAmount } from '../../../shared/currencies';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import DonationsContext from '../common/context';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { minimumTransactionAmountForCurrency, parseAmount } from '../../shared/currencies';
+import { RichText } from '@wordpress/block-editor';
+import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from '@wordpress/element';
 
-const Amount = ( {
-	className = null,
-	currency = null,
-	defaultValue = null,
-	disabled = false,
-	label = '',
-	onChange = null,
-	value = '',
-} ) => {
+const Edit = props => {
+	const { attributes, setAttributes } = props;
+	const { baseAmountMultiplier, className, label, amount, disabled = false } = attributes;
+	const { currency } = useContext( DonationsContext );
+	const defaultValue = useMemo(
+		() => minimumTransactionAmountForCurrency( currency ) * baseAmountMultiplier,
+		[ currency, baseAmountMultiplier ]
+	);
 	const [ editedValue, setEditedValue ] = useState(
-		formatCurrency( value, currency, { symbol: '' } )
+		formatCurrency( amount, currency, { symbol: '' } )
 	);
 	const [ isFocused, setIsFocused ] = useState( false );
 	const [ isInvalid, setIsInvalid ] = useState( false );
 	const richTextRef = useRef( null );
 
 	const setAmount = useCallback(
-		amount => {
-			setEditedValue( amount );
-
-			if ( ! onChange ) {
-				return;
-			}
-
-			const parsedAmount = parseAmount( amount, currency );
+		newAmount => {
+			setEditedValue( newAmount );
+			setAttributes( { amount: newAmount, currency } );
+			const parsedAmount = parseAmount( newAmount, currency );
 			if ( parsedAmount && parsedAmount >= minimumTransactionAmountForCurrency( currency ) ) {
-				onChange( parsedAmount );
 				setIsInvalid( false );
-			} else if ( amount ) {
+			} else if ( newAmount ) {
 				setIsInvalid( true );
 			}
 		},
-		[ currency, onChange ]
+		[ currency, setAttributes ]
 	);
 
 	const setFocus = () => {
@@ -73,17 +68,8 @@ const Amount = ( {
 		if ( isFocused || editedValue ) {
 			return;
 		}
-
 		setAmount( formatCurrency( defaultValue, currency, { symbol: '' } ) );
-	}, [ currency, defaultValue, editedValue, isFocused, setAmount ] );
-
-	// Syncs the edited value with the actual value whenever the latter changes (e.g. new default amount after a currency change).
-	useEffect( () => {
-		if ( isFocused || isInvalid ) {
-			return;
-		}
-		setEditedValue( formatCurrency( value, currency, { symbol: '' } ) );
-	}, [ currency, isFocused, isInvalid, setAmount, value ] );
+	}, [ currency, editedValue, isFocused, setAmount, defaultValue ] );
 
 	return (
 		<div
@@ -99,23 +85,21 @@ const Amount = ( {
 			{ CURRENCIES[ currency ].symbol }
 			{ disabled ? (
 				<div className="donations__amount-value">
-					{ formatCurrency( value ? value : defaultValue, currency, { symbol: '' } ) }
+					{ formatCurrency( amount ? amount : defaultValue, currency, { symbol: '' } ) }
 				</div>
 			) : (
 				<RichText
 					allowedFormats={ [] }
 					aria-label={ label }
 					keepPlaceholderOnFocus={ true }
 					multiline={ false }
-					onChange={ amount => setAmount( amount ) }
-					placeholder={ formatCurrency( defaultValue, currency, { symbol: '' } ) }
+					onChange={ newAmount => setAmount( newAmount ) }
 					ref={ richTextRef }
 					value={ editedValue }
-					withoutInteractiveFormatting
 				/>
 			) }
 		</div>
 	);
 };
 
-export default Amount;
+export default Edit;

projects/plugins/jetpack/extensions/blocks/donations/amount/index.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { button as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+
+const name = 'donations-amount';
+const BUTTON_BEHAVIOUR_TITLE = __( 'Amount selector', 'jetpack' );
+const INPUT_BEHAVIOUR_TITLE = __( 'Custom amount field', 'jetpack' );
+
+const settings = {
+	title: __( 'Donations amount button', 'jetpack' ),
+	description: __( 'Button that determines a fixed donation amount', 'jetpack' ),
+	category: 'earn',
+	attributes: {
+		baseAmountMultiplier: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+		},
+		currency: {
+			type: 'string',
+		},
+		amount: {
+			type: 'string',
+		},
+		disabled: {
+			type: 'boolean',
+		},
+	},
+	__experimentalLabel: ( { disabled } ) =>
+		disabled ? INPUT_BEHAVIOUR_TITLE : BUTTON_BEHAVIOUR_TITLE,
+	icon,
+	supports: {
+		align: true,
+		alignWide: true,
+		html: false,
+		lightBlockWrapper: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	styles: [
+		{ name: 'fill', label: __( 'Fill', 'jetpack' ), isDefault: true },
+		{ name: 'outline', label: __( 'Outline', 'jetpack' ) },
+	],
+	edit,
+	save,
+};
+
+export { name, settings };

projects/plugins/jetpack/extensions/blocks/donations/amount/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const Save = () => <InnerBlocks.Content />;
+
+export default Save;

projects/plugins/jetpack/extensions/blocks/donations/common/constants.js

@@ -0,0 +1,4 @@
+export const ONE_TIME_DONATION = 'oneTimeDonation';
+export const MONTHLY_DONATION = 'monthlyDonation';
+export const ANNUAL_DONATION = 'annualDonation';
+export const DEFAULT_TAB = ONE_TIME_DONATION;

projects/plugins/jetpack/extensions/blocks/donations/common/context.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_TAB } from './constants';
+
+const defaultContext = {
+	activeTab: DEFAULT_TAB,
+	fallbackLinkUrl: '',
+	products: [],
+	currency: '',
+	showCustomAmount: true,
+};
+
+const Context = createContext( defaultContext );
+
+export default Context;

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

@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import { CURRENCIES } from '@automattic/format-currency';
-
 /**
  * WordPress dependencies
  */
-import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import {
 	Button,
 	Dashicon,
@@ -20,32 +14,28 @@ import {
 	ToolbarItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { DOWN } from '@wordpress/keycodes';
 
+/**
+ * External dependencies
+ */
+import getSiteFragment from '../../shared/get-site-fragment';
+
 /**
  * Internal dependencies
  */
+import { ANNUAL_DONATION, MONTHLY_DONATION } from './common/constants';
+import { CURRENCIES } from '@automattic/format-currency';
 import { SUPPORTED_CURRENCIES } from '../../shared/currencies';
-import getSiteFragment from '../../shared/get-site-fragment';
 
 const Controls = props => {
-	const { attributes, setAttributes } = props;
-	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 ];
+	const { attributes, setAttributes, onChangeTab } = props;
+	const { showCustomAmount, currency } = attributes;
 
-		setAttributes( {
-			[ donationAttribute ]: {
-				...donation,
-				show,
-			},
-		} );
+	const toggleDonation = ( donationType, show ) => {
+		setAttributes( { [ donationType ]: show } );
+		onChangeTab( donationType, show );
 	};
 
 	return (
@@ -104,13 +94,13 @@ const Controls = props => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
 					<ToggleControl
-						checked={ monthlyDonation.show }
-						onChange={ value => toggleDonation( '1 month', value ) }
+						checked={ attributes[ MONTHLY_DONATION ] }
+						onChange={ value => toggleDonation( MONTHLY_DONATION, value ) }
 						label={ __( 'Show monthly donations', 'jetpack' ) }
 					/>
 					<ToggleControl
-						checked={ annualDonation.show }
-						onChange={ value => toggleDonation( '1 year', value ) }
+						checked={ attributes[ ANNUAL_DONATION ] }
+						onChange={ value => toggleDonation( ANNUAL_DONATION, value ) }
 						label={ __( 'Show annual donations', 'jetpack' ) }
 					/>
 					<ToggleControl