Donations block: fix non lolcalized strings

projects/plugins/jetpack/changelog/fix-donation-block-translations

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Donations Block: fix non localized strings

projects/plugins/jetpack/extensions/blocks/donations/block.json

@@ -45,32 +45,23 @@
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
-				"heading": "Make a one-time donation",
-				"extraText": "Your contribution is appreciated.",
-				"buttonText": "Donate"
+				"amounts": [ 5, 15, 100 ]
 			}
 		},
 		"monthlyDonation": {
 			"type": "object",
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
-				"heading": "Make a monthly donation",
-				"extraText": "Your contribution is appreciated.",
-				"buttonText": "Donate monthly"
+				"amounts": [ 5, 15, 100 ]
 			}
 		},
 		"annualDonation": {
 			"type": "object",
 			"default": {
 				"show": true,
 				"planId": null,
-				"amounts": [ 5, 15, 100 ],
-				"heading": "Make a yearly donation",
-				"extraText": "Your contribution is appreciated.",
-				"buttonText": "Donate yearly"
+				"amounts": [ 5, 15, 100 ]
 			}
 		},
 		"showCustomAmount": {

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

@@ -53,43 +53,50 @@ function render_block( $attr, $content ) {
 
 	require_once JETPACK__PLUGIN_DIR . '/_inc/lib/class-jetpack-currencies.php';
 
+	$default_texts = get_default_texts();
+
 	$donations = array(
 		'one-time' => array_merge(
 			array(
-				'title' => __( 'One-Time', 'jetpack' ),
-				'class' => 'donations__one-time-item',
+				'title'      => __( 'One-Time', 'jetpack' ),
+				'class'      => 'donations__one-time-item',
+				'heading'    => $default_texts['oneTimeDonation']['heading'],
+				'buttonText' => $default_texts['oneTimeDonation']['buttonText'],
 			),
 			$attr['oneTimeDonation']
 		),
 	);
 	if ( $attr['monthlyDonation']['show'] ) {
 		$donations['1 month'] = array_merge(
 			array(
-				'title' => __( 'Monthly', 'jetpack' ),
-				'class' => 'donations__monthly-item',
+				'title'      => __( 'Monthly', 'jetpack' ),
+				'class'      => 'donations__monthly-item',
+				'heading'    => $default_texts['monthlyDonation']['heading'],
+				'buttonText' => $default_texts['monthlyDonation']['buttonText'],
 			),
 			$attr['monthlyDonation']
 		);
 	}
 	if ( $attr['annualDonation']['show'] ) {
 		$donations['1 year'] = array_merge(
 			array(
-				'title' => __( 'Yearly', 'jetpack' ),
-				'class' => 'donations__annual-item',
+				'title'      => __( 'Yearly', 'jetpack' ),
+				'class'      => 'donations__annual-item',
+				'heading'    => $default_texts['annualDonation']['heading'],
+				'buttonText' => $default_texts['annualDonation']['buttonText'],
 			),
 			$attr['annualDonation']
 		);
 	}
 
-	$choose_amount_text = isset( $attr['chooseAmountText'] ) && ! empty( $attr['chooseAmountText'] ) ? $attr['chooseAmountText'] : __( 'Choose an amount', 'jetpack' );
-	$custom_amount_text = isset( $attr['customAmountText'] ) && ! empty( $attr['customAmountText'] ) ? $attr['customAmountText'] : __( 'Or enter a custom amount', 'jetpack' );
-
-	$currency   = $attr['currency'];
-	$nav        = '';
-	$headings   = '';
-	$amounts    = '';
-	$extra_text = '';
-	$buttons    = '';
+	$choose_amount_text = isset( $attr['chooseAmountText'] ) && ! empty( $attr['chooseAmountText'] ) ? $attr['chooseAmountText'] : $default_texts['chooseAmountText'];
+	$custom_amount_text = isset( $attr['customAmountText'] ) && ! empty( $attr['customAmountText'] ) ? $attr['customAmountText'] : $default_texts['customAmountText'];
+	$currency           = $attr['currency'];
+	$nav                = '';
+	$headings           = '';
+	$amounts            = '';
+	$extra_text         = '';
+	$buttons            = '';
 	foreach ( $donations as $interval => $donation ) {
 		$plan_id = (int) $donation['planId'];
 		$plan    = get_post( $plan_id );
@@ -127,7 +134,7 @@ function render_block( $attr, $content ) {
 		$extra_text .= sprintf(
 			'<p class="%1$s">%2$s</p>',
 			esc_attr( $donation['class'] ),
-			wp_kses_post( $donation['extraText'] )
+			wp_kses_post( $donation['extraText'] ?? $default_texts['extraText'] )
 		);
 		$buttons    .= sprintf(
 			'<a class="wp-block-button__link donations__donate-button %1$s" href="%2$s">%3$s</a>',
@@ -188,6 +195,52 @@ function render_block( $attr, $content ) {
 	);
 }
 
+/**
+ * Get the default texts for the block.
+ *
+ * @return array
+ */
+function get_default_texts() {
+	return array(
+		'chooseAmountText' => __( 'Choose an amount', 'jetpack' ),
+		'customAmountText' => __( 'Or enter a custom amount', 'jetpack' ),
+		'extraText'        => __( 'Your contribution is appreciated.', 'jetpack' ),
+		'oneTimeDonation'  => array(
+			'heading'    => __( 'Make a one-time donation', 'jetpack' ),
+			'buttonText' => __( 'Donate', 'jetpack' ),
+		),
+		'monthlyDonation'  => array(
+			'heading'    => __( 'Make a monthly donation', 'jetpack' ),
+			'buttonText' => __( 'Donate monthly', 'jetpack' ),
+		),
+		'annualDonation'   => array(
+			'heading'    => __( 'Make a yearly donation', 'jetpack' ),
+			'buttonText' => __( 'Donate yearly', 'jetpack' ),
+		),
+	);
+}
+
+/**
+ * Make default texts available to the editor.
+ */
+function load_editor_scripts() {
+	// Only relevant to the editor right now.
+	if ( ! is_admin() ) {
+		return;
+	}
+
+	$data = array(
+		'defaultTexts' => get_default_texts(),
+	);
+
+	wp_add_inline_script(
+		'jetpack-blocks-editor',
+		'var Jetpack_DonationsBlock = ' . wp_json_encode( $data, JSON_HEX_TAG | JSON_HEX_AMP ) . ';',
+		'before'
+	);
+}
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\load_editor_scripts' );
+
 /**
  * Determine if AMP should be disabled on posts having Donations blocks.
  *

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

@@ -1,4 +1,7 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { getDefaultTexts } from './utils';
+
+const DEFAULT_TEXTS = getDefaultTexts();
 
 const Save = ( { attributes } ) => {
 	const blockProps = useBlockProps.save();
@@ -15,43 +18,52 @@ const Save = ( { attributes } ) => {
 
 	return (
 		<div { ...blockProps }>
-			<RichText.Content tagName="h4" value={ oneTimeDonation.heading } />
-			<RichText.Content tagName="p" value={ oneTimeDonation.extraText } />
+			<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.oneTimeDonation?.heading } />
+			<RichText.Content
+				tagName="p"
+				value={ oneTimeDonation.extraText ?? DEFAULT_TEXTS.extraText }
+			/>
 			<RichText.Content
 				tagName="a"
 				className="jetpack-donations-fallback-link"
 				href={ fallbackLinkUrl }
 				rel="noopener noreferrer noamphtml"
 				target="_blank"
-				value={ oneTimeDonation.buttonText }
+				value={ DEFAULT_TEXTS.oneTimeDonation?.buttonText }
 			/>
 			{ monthlyDonation.show && (
 				<>
 					<hr className="donations__separator" />
-					<RichText.Content tagName="h4" value={ monthlyDonation.heading } />
-					<RichText.Content tagName="p" value={ monthlyDonation.extraText } />
+					<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.monthlyDonation?.heading } />
+					<RichText.Content
+						tagName="p"
+						value={ monthlyDonation.extraText ?? DEFAULT_TEXTS.extraText }
+					/>
 					<RichText.Content
 						tagName="a"
 						className="jetpack-donations-fallback-link"
 						href={ fallbackLinkUrl }
 						rel="noopener noreferrer noamphtml"
 						target="_blank"
-						value={ monthlyDonation.buttonText }
+						value={ DEFAULT_TEXTS.monthlyDonation?.buttonText }
 					/>
 				</>
 			) }
 			{ annualDonation.show && (
 				<>
 					<hr className="donations__separator" />
-					<RichText.Content tagName="h4" value={ annualDonation.heading } />
-					<RichText.Content tagName="p" value={ annualDonation.extraText } />
+					<RichText.Content tagName="h4" value={ DEFAULT_TEXTS.annualDonation?.heading } />
+					<RichText.Content
+						tagName="p"
+						value={ annualDonation.extraText ?? DEFAULT_TEXTS.extraText }
+					/>
 					<RichText.Content
 						tagName="a"
 						className="jetpack-donations-fallback-link"
 						href={ fallbackLinkUrl }
 						rel="noopener noreferrer noamphtml"
 						target="_blank"
-						value={ annualDonation.buttonText }
+						value={ DEFAULT_TEXTS.annualDonation?.buttonText }
 					/>
 				</>
 			) }

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

@@ -6,7 +6,9 @@ import {
 	minimumTransactionAmountForCurrency,
 } from '../../shared/currencies';
 import Amount from './amount';
-import { DEFAULT_CHOOSE_AMOUNT_TEXT, DEFAULT_CUSTOM_AMOUNT_TEXT } from './constants';
+import { getDefaultTexts } from './utils';
+
+const DEFAULT_TEXTS = getDefaultTexts();
 
 const Tab = ( { activeTab, attributes, setAttributes } ) => {
 	const {
@@ -15,8 +17,8 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
 		monthlyDonation,
 		annualDonation,
 		showCustomAmount,
-		chooseAmountText = DEFAULT_CHOOSE_AMOUNT_TEXT,
-		customAmountText = DEFAULT_CUSTOM_AMOUNT_TEXT,
+		chooseAmountText = DEFAULT_TEXTS.chooseAmountText,
+		customAmountText = DEFAULT_TEXTS.customAmountText,
 	} = attributes;
 
 	const donationAttributes = {
@@ -25,9 +27,9 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
 		'1 year': 'annualDonation',
 	};
 
-	const getDonationValue = key => attributes[ donationAttributes[ activeTab ] ][ key ];
+	const donationAttribute = donationAttributes[ activeTab ];
+	const getDonationValue = key => attributes[ donationAttribute ][ key ];
 	const setDonationValue = ( key, value ) => {
-		const donationAttribute = donationAttributes[ activeTab ];
 		const donation = attributes[ donationAttribute ];
 		setAttributes( {
 			[ donationAttribute ]: {
@@ -66,7 +68,7 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
 			<RichText
 				tagName="h4"
 				placeholder={ __( 'Write a message…', 'jetpack' ) }
-				value={ getDonationValue( 'heading' ) }
+				value={ getDonationValue( 'heading' ) || DEFAULT_TEXTS[ donationAttribute ]?.heading }
 				onChange={ value => setDonationValue( 'heading', value ) }
 			/>
 			<RichText
@@ -112,14 +114,16 @@ const Tab = ( { activeTab, attributes, setAttributes } ) => {
 			<RichText
 				tagName="p"
 				placeholder={ __( 'Write a message…', 'jetpack' ) }
-				value={ getDonationValue( 'extraText' ) }
+				value={ getDonationValue( 'extraText' ) ?? DEFAULT_TEXTS.extraText }
 				onChange={ value => setDonationValue( 'extraText', value ) }
 			/>
 			<div className="wp-block-button donations__donate-button-wrapper">
 				<RichText
 					className="wp-block-button__link donations__donate-button"
 					placeholder={ __( 'Write a message…', 'jetpack' ) }
-					value={ getDonationValue( 'buttonText' ) }
+					value={
+						getDonationValue( 'buttonText' ) || DEFAULT_TEXTS[ donationAttribute ]?.buttonText
+					}
 					onChange={ value => setButtonText( value ) }
 					allowedFormats={ allowedFormatsForButton }
 				/>

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

@@ -0,0 +1,19 @@
+/**
+ * Return the default texts defined in `donations.php` and injected client side by assigning them
+ * to the `Jetpack_DonationsBlock` attribute of the window object.
+ *
+ * @returns {object} Defaut texts for the block.
+ */
+export function getDefaultTexts() {
+	if ( 'undefined' === typeof window ) {
+		return {};
+	}
+
+	const texts = window.Jetpack_DonationsBlock?.defaultTexts;
+
+	if ( 'object' !== typeof texts ) {
+		return {};
+	}
+
+	return texts;
+}