fix: make amount + frequency label translatable

src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -14,7 +14,7 @@ import { RichText } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { AmountValueInput } from './components';
-import { getColorForContrast } from '../utils';
+import { getColorForContrast, getFrequencyLabel } from '../utils';
 import { FREQUENCIES } from '../consts';
 import type { ComponentProps, DonationFrequencySlug } from '../types';
 
@@ -89,17 +89,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		</button>
 	);
 
-	const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => {
-		switch ( frequencySlug ) {
-			case 'once':
-				return '';
-			case 'month':
-				return __( ' per month', 'newspack-blocks' );
-			case 'year':
-				return __( ' per year', 'newspack-blocks' );
-		}
-	};
-
 	// This code is fired on tab select and updates aria elements, tabindex states, and radio buttons
 	const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' );
 
@@ -148,9 +137,15 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 											className="tier-select-label tier-label"
 											htmlFor={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
 										>
-											{ settings.currencySymbol +
-												untieredAmount.toFixed( 2 ).replace( /\.?0*$/, '' ) +
-												getFrequencyLabel( frequencySlug ) }
+											<div
+												dangerouslySetInnerHTML={ {
+													__html: getFrequencyLabel(
+														settings.currencySymbol,
+														untieredAmount.toFixed( 2 ).replace( /\.?0*$/, '' ),
+														frequencySlug
+													),
+												} }
+											/>
 										</label>
 									</>
 								) }

src/blocks/donate/edit/TierBasedLayout.tsx

@@ -15,20 +15,9 @@ import type {
 	DonateBlockAttributes,
 	TierBasedOptionValue,
 } from '../types';
-import { getColorForContrast } from '../utils';
+import { getColorForContrast, getFrequencyLabel } from '../utils';
 import { FREQUENCIES, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX } from '../consts';
 
-const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => {
-	switch ( frequencySlug ) {
-		case 'once':
-			return __( 'once', 'newspack-blocks' );
-		case 'month':
-			return __( 'per month', 'newspack-blocks' );
-		case 'year':
-			return __( 'per year', 'newspack-blocks' );
-	}
-};
-
 const TierBasedLayout = ( props: ComponentProps ) => {
 	const { amounts, availableFrequencies, attributes } = props;
 	const [ currentFrequency, setCurrencyFrequency ] = useState( availableFrequencies[ 0 ] );
@@ -108,14 +97,15 @@ const TierBasedLayout = ( props: ComponentProps ) => {
 								</h3>
 							</div>
 							<div className="wpbnbd__tiers__amount">
-								<h3 className="wpbnbd__tiers__amount__number">
-									{ props.settings.currencySymbol }
-									<span>{ amount }</span>
-								</h3>
-								<span className="wpbnbd__tiers__amount__frequency">
-									{ ' ' }
-									{ getFrequencyLabel( currentFrequency ) }
-								</span>
+								<div
+									dangerouslySetInnerHTML={ {
+										__html: getFrequencyLabel(
+											props.settings.currencySymbol,
+											amount.toFixed( 2 ).replace( /\.?0*$/, '' ),
+											currentFrequency
+										),
+									} }
+								/>
 							</div>
 							<div
 								className="submit-button"

src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php

@@ -17,10 +17,12 @@ abstract class Newspack_Blocks_Donate_Renderer_Base {
 	private static $configurations_cache = []; // phpcs:ignore Squiz.Commenting.VariableComment.Missing
 
 	/**
-	 * Get frequency label.
+	 * Get translatable frequency label.
 	 *
 	 * @param string $frequency_slug Frequency slug.
 	 * @param bool   $hide_once_label Whether to hide the "once" label.
+	 *
+	 * @return string
 	 */
 	public static function get_frequency_label( $frequency_slug, $hide_once_label = false ) {
 		switch ( $frequency_slug ) {
@@ -33,6 +35,35 @@ public static function get_frequency_label( $frequency_slug, $hide_once_label =
 		}
 	}
 
+	/**
+	 * Get a formatted HTML string containing amount and frequency of a donation.
+	 *
+	 * @param string $currency_symbol Currency symbol.
+	 * @param float  $amount Amount.
+	 * @param string $frequency Frequency.
+	 * @param bool   $hide_once_label Whether to hide the "once" label.
+	 *
+	 * @return string
+	 */
+	public static function get_formatted_amount( $currency_symbol, $amount, $frequency, $hide_once_label = false ) {
+		/*
+		* Translators: This formatted HTML string displays the amount and frequency of a donation. The relative order may depend on the language being translated to.
+		* Example string: <h3 class="wpbnbd__tiers__amount__number">$100</h3>
+		*                 <span class="wpbnbd__tiers__amount__frequency">per month</span>
+		*/
+		$formatted_amount = sprintf(
+			_x( // phpcs:ignore WordPress.WP.I18n.MissingTranslatorsComment
+				'%1$s %2$s',
+				'%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.',
+				'newspack-blocks'
+			),
+			'<h3 class="wpbnbd__tiers__amount__number">' . $currency_symbol . $amount . '</h3>',
+			'<span class="wpbnbd__tiers__amount__frequency">' . self::get_frequency_label( $frequency, $hide_once_label ) . '</span>'
+		);
+
+		return $formatted_amount;
+	}
+
 	/**
 	 * Get configuration, based on block attributes and global settings.
 	 *

src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php

@@ -180,7 +180,7 @@ class='donate-label'
 										class='tier-select-label tier-label'
 										for='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
 									>
-										<?php echo esc_html( $configuration['currencySymbol'] . $formatted_amount . self::get_frequency_label( $frequency_slug, true ) ); ?>
+										<?php echo wp_kses_post( self::get_formatted_amount( $configuration['currencySymbol'], $formatted_amount, $frequency_slug ) ); ?>
 									</label>
 									<?php endif; ?>
 								</div>

src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php

@@ -61,8 +61,7 @@ private static function render_single_tier( $attributes, $index, $amount, $selec
 							data-amount="<?php echo esc_attr( $configuration['amounts'][ $frequency_slug ][ $index ] ); ?>"
 							data-tier-index="<?php echo esc_attr( $index ); ?>"
 						>
-							<h3 class="wpbnbd__tiers__amount__number"><?php echo esc_html( $configuration['currencySymbol'] ); ?><?php echo esc_html( $configuration['amounts'][ $frequency_slug ][ $index ] ); ?></h3>
-							<span class="wpbnbd__tiers__amount__frequency"><?php echo esc_html( self::get_frequency_label( $frequency_slug ) ); ?></span>
+							<?php echo wp_kses_post( self::get_formatted_amount( $configuration['currencySymbol'], $amount, $frequency_slug ) ); ?>
 						</span>
 					<?php endforeach; ?>
 				</span>

src/blocks/donate/styles/view.scss

@@ -19,6 +19,19 @@
 		}
 	}
 
+	&__tiers {
+		&__amount {
+			margin-bottom: 16px;
+			&__number {
+				display: inline;
+				font-size: 29px;
+			}
+			&__frequency {
+				font-size: 13px;
+			}
+		}
+	}
+
 	mark {
 		background-color: transparent;
 	}

src/blocks/donate/utils.ts

@@ -1,3 +1,4 @@
+import { __, _x, sprintf } from '@wordpress/i18n';
 import type { DonationFrequencySlug } from './types';
 
 const hexToRGB = ( hex: string ): number[] => {
@@ -48,3 +49,37 @@ export const getMigratedAmount = (
 		untieredAmount * multiplier,
 	];
 };
+
+export const getFrequencyLabel = (
+	currencySymbol: string,
+	amount: string,
+	frequencySlug: DonationFrequencySlug
+) => {
+	let frequencyLabel = '';
+	switch ( frequencySlug ) {
+		case 'once':
+			frequencyLabel = __( 'once', 'newspack-blocks' );
+			break;
+		case 'month':
+			frequencyLabel = __( 'per month', 'newspack-blocks' );
+			break;
+		case 'year':
+			frequencyLabel = __( 'per year', 'newspack-blocks' );
+			break;
+	}
+
+	/*
+	 * Translators: This formatted HTML string displays the amount and frequency of a donation. The relative order may depend on the language being translated to.
+	 * Example string: <h3 class="wpbnbd__tiers__amount__number">$100</h3>
+	 *                 <span class="wpbnbd__tiers__amount__frequency">per month</span>
+	 */
+	return sprintf(
+		_x(
+			'%1$s %2$s',
+			'%1$s is the amount (with currency symbol). %2$s is the frequency of the donation. Inludes embedded HTML tags for styling.',
+			'newspack-blocks'
+		),
+		`<h3 class="wpbnbd__tiers__amount__number">${ currencySymbol }${ amount }</h3>`,
+		`<span class="wpbnbd__tiers__amount__frequency">${ frequencyLabel }</span>`
+	);
+};