@automattic/newspack-blocks 2.6.2 → 3.0.0-alpha.1

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

@@ -81,7 +81,6 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 	 * @return string
 	 */
 	private static function render_footer( $attributes ) {
-		$configuration     = self::get_configuration( $attributes );
 		$campaign          = $attributes['campaign'] ?? false;
 		$button_style_attr = 'style="' . self::get_button_style( $attributes ) . '"';
 
@@ -91,13 +90,9 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 			<?php echo wp_kses_post( $attributes['thanksText'] ); ?>
 		</p>
 
-		<?php if ( $configuration['is_rendering_stripe_payment_form'] ) : ?>
-			<?php echo self::render_streamlined_payment_ui( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
-		<?php else : ?>
-			<button type='submit' <?php echo $button_style_attr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
-				<?php echo wp_kses_post( $attributes['buttonText'] ); ?>
-			</button>
-		<?php endif; ?>
+		<button type='submit' <?php echo $button_style_attr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+			<?php echo wp_kses_post( $attributes['buttonText'] ); ?>
+		</button>
 		<?php if ( $campaign ) : ?>
 			<input type='hidden' name='campaign' value='<?php echo esc_attr( $campaign ); ?>' />
 		<?php endif; ?>
@@ -129,7 +124,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 			class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
 			id="<?php echo esc_html( $configuration['uid'] ); ?>"
 		>
-			<form data-streamlined-config="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration['configuration_for_streamlined'] ), ENT_QUOTES, 'UTF-8' ) ); ?>">
+			<form>
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
@@ -154,6 +149,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 								>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 								<div class='input-container'>
+									<?php if ( Newspack_Blocks::can_use_name_your_price() ) : ?>
 									<label
 										class='donate-label'
 										for='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
@@ -172,6 +168,21 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 											id='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
 										/>
 									</div>
+									<?php else : ?>
+									<input
+										type='radio'
+										name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>'
+										value='<?php echo esc_attr( $formatted_amount ); ?>'
+										id='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
+										checked
+									/>
+									<label
+										class='tier-select-label tier-label'
+										for='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
+									>
+										<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $formatted_amount, $frequency_slug ) ); ?>
+									</label>
+									<?php endif; ?>
 								</div>
 							</div>
 
@@ -191,7 +202,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 			class="tiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
 			id="<?php echo esc_html( $configuration['uid'] ); ?>"
 		>
-			<form data-streamlined-config="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration['configuration_for_streamlined'] ), ENT_QUOTES, 'UTF-8' ) ); ?>">
+			<form>
 				<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>

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

@@ -13,22 +13,6 @@ require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-new
  * Renders the tiers-based Donate block.
  */
 class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate_Renderer_Base {
-	/**
-	 * Get frequency label.
-	 *
-	 * @param string $frequency_slug Frequency slug.
-	 */
-	private static function get_frequency_label( $frequency_slug ) {
-		switch ( $frequency_slug ) {
-			case 'once':
-				return ' ' . __( 'once', 'newspack-blocks' );
-			case 'month':
-				return ' ' . __( 'per month', 'newspack-blocks' );
-			case 'year':
-				return ' ' . __( 'per year', 'newspack-blocks' );
-		}
-	}
-
 	/**
 	 * Get displayed amounts.
 	 *
@@ -77,8 +61,7 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 							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( Newspack_Blocks::get_formatted_amount( $configuration['amounts'][ $frequency_slug ][ $index ], $frequency_slug ) ); ?>
 						</span>
 					<?php endforeach; ?>
 				</span>
@@ -111,7 +94,6 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 		$displayed_frequencies     = array_keys( $configuration['frequencies'] );
 		$intial_selected_frequency = $displayed_frequencies[0];
 
-		$intial_selected_tier_index = 0;
 		$displayed_amounts          = self::get_displayed_amounts( $configuration['amounts'][ $intial_selected_frequency ] );
 		$config_related_attributes  = array_map(
 			function ( $option ) {
@@ -128,7 +110,6 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 			$configuration['amounts'],
 			( new DateTime() )->modify( '+1 month' )->format( 'F d, Y' ),
 			( new DateTime() )->modify( '+1 year' )->format( 'F d, Y' ),
-			$configuration['is_rendering_stripe_payment_form'],
 			$attributes['buttonColor'],
 		];
 
@@ -145,10 +126,9 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 		<div
 			class="<?php echo esc_html( $configuration['container_classnames'] ); ?>"
 			id="<?php echo esc_html( $configuration['uid'] ); ?>"
-			data-streamlined-config="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration['configuration_for_streamlined'] ), ENT_QUOTES, 'UTF-8' ) ); ?>"
 			data-tiers-based-config="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration_for_tiers_based ), ENT_QUOTES, 'UTF-8' ) ); ?>"
 		>
-			<form data-is-init-form <?php echo 'stripe' === $configuration['platform'] ? 'onsubmit="return false;"' : ''; ?>>
+			<form data-is-init-form>
 				<div class="wpbnbd__tiers__view">
 					<?php echo self::render_hidden_form_inputs( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 					<input type="hidden" name="<?php echo esc_attr( self::FREQUENCY_PARAM ); ?>" value="<?php echo esc_attr( $intial_selected_frequency ); ?>">
@@ -166,7 +146,7 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 						<div class="wpbnbd__tiers__options">
 							<?php foreach ( $displayed_amounts as $index => $amount ) : ?>
 								<?php
-									echo self::render_single_tier( $attributes, $index, $amount, $intial_selected_frequency, $is_any_recommended ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+									echo self::render_single_tier( $attributes, $index, $configuration['amounts'][ $frequency_slug ][ $index ], $intial_selected_frequency, $is_any_recommended ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 								?>
 							<?php endforeach; ?>
 						</div>
@@ -179,33 +159,6 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 				</div>
 
 			</form>
-			<?php if ( $configuration['is_rendering_stripe_payment_form'] ) : ?>
-				<div class="wpbnbd__tiers__view wpbnbd__tiers__view--hidden">
-				<form data-is-streamlined-form onsubmit="return false;">
-					<button class="wpbnbd__tiers__back-button">← <span><?php echo esc_html( __( 'Back', 'newspack-blocks' ) ); ?></span></button>
-					<div class="wpbnbd__tiers__tier-tile">
-						<h2>
-							<?php echo esc_html( $attributes['tiersBasedOptions'][ $intial_selected_tier_index ]['heading'] ); ?>
-						</h2>
-						<div>
-							<div>
-								<h3>
-									<span><?php echo esc_html( $configuration['currencySymbol'] ); ?></span>
-									<span data-amount><?php echo esc_html( $configuration['amounts'][ $intial_selected_frequency ][ $intial_selected_tier_index ] ); ?></span>
-								</h3>
-								<span data-frequency><?php echo esc_html( self::get_frequency_label( $intial_selected_frequency ) ); ?></span>
-							</div>
-							<div class="wpbnbd__tiers__tier-tile__note">
-								<?php echo esc_html( __( 'Renews on', 'newspack-blocks' ) ); ?> <span data-renews-date>-</span>
-							</div>
-						</div>
-					</div>
-					<?php echo self::render_streamlined_payment_ui( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
-					<input data-is-streamlined-input-amount type="hidden" name="" value="0">
-					<input type="hidden" name="<?php echo esc_attr( self::FREQUENCY_PARAM ); ?>" value="<?php echo esc_attr( $intial_selected_frequency ); ?>">
-				</div>
-				</form>
-			<?php endif; ?>
 		</div>
 
 		<?php

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

@@ -75,17 +75,8 @@ class Newspack_Blocks_Donate_Renderer {
 	 * @param array  $dependencies The dependencies of the script to enqueue.
 	 */
 	private static function enqueue_scripts( $handle_slug, $dependencies = [ 'wp-i18n' ] ) {
-		if ( 'streamlined' === $handle_slug ) {
-			if ( method_exists( '\Newspack\Recaptcha', 'can_use_captcha' ) && \Newspack\Recaptcha::can_use_captcha() ) {
-				$dependencies[] = \Newspack\Recaptcha::SCRIPT_HANDLE;
-			}
-		}
-
 		$has_css = true;
 		switch ( $handle_slug ) {
-			case 'streamlined':
-				$filename = 'donateStreamlined';
-				break;
 			case 'frequency-based':
 				$filename = 'frequencyBased';
 				break;
@@ -140,14 +131,10 @@ class Newspack_Blocks_Donate_Renderer {
 			return '';
 		}
 
-		if ( $configuration['is_rendering_stripe_payment_form'] ) {
-			self::enqueue_scripts( 'streamlined' );
-		}
-
 		Newspack_Blocks::enqueue_view_assets( 'donate' );
 		wp_script_add_data( 'newspack-blocks-donate', 'async', true );
 
-		if ( true === $attributes['useModalCheckout'] && ! $configuration['is_rendering_stripe_payment_form'] ) {
+		if ( true === $attributes['useModalCheckout'] ) {
 			\Newspack_Blocks\Modal_Checkout::enqueue_modal();
 		}
 

package/src/blocks/donate/styles/editor.scss

@@ -2,7 +2,6 @@
 @use '../../../shared/sass/colors';
 @use '../../../shared/sass/variables';
 
-@use '../streamlined/style' as streamlined;
 @use '../frequency-based/style' as frequency-based;
 @use '../tiers-based/style' as tiers-based;
 
@@ -41,7 +40,7 @@
 		font-weight: bold;
 		outline: none;
 
-		&[type="submit"] {
+		&[type='submit'] {
 			border: none;
 		}
 	}
@@ -54,27 +53,6 @@
 		padding-left: 20px;
 		padding-right: 20px;
 	}
-	.stripe-payment {
-		&__methods {
-			> * {
-				line-height: 46px !important;
-			}
-		}
-		&__request-button {
-			display: flex;
-			align-items: center;
-			gap: 0.8em;
-			font-size: 0.8em;
-			border-radius: 5px;
-			color: colors.$color__secondary;
-			border: colors.$color__secondary 1px dashed;
-			padding: 0 20px;
-			opacity: 0.5;
-			.components-base-control__field {
-				margin: 0;
-			}
-		}
-	}
 }
 
 .wp-block-newspack-blocks-donate.wpbnbd--frequency-based.tiered {
@@ -97,11 +75,11 @@
 }
 
 .block-editor-block-list__layout
-.block-editor-block-list__block
-.wp-block-newspack-blocks-donate.tiered.is-style-minimal
-.wp-block-newspack-blocks-donate__tiers
-input[type='radio']:checked
-+ .tier-select-label {
+	.block-editor-block-list__block
+	.wp-block-newspack-blocks-donate.tiered.is-style-minimal
+	.wp-block-newspack-blocks-donate__tiers
+	input[type='radio']:checked
+	+ .tier-select-label {
 	background: transparent;
 	color: colors.$color__text-main;
 }

package/src/blocks/donate/styles/style-variations.scss

@@ -33,7 +33,7 @@
 	}
 
 	&.wpbnbd-frequencies {
-		&--2 .tab-container .freq-label:nth-of-type( 2 )  {
+		&--2 .tab-container .freq-label:nth-of-type( 2 ) {
 			border-left-width: 1px;
 		}
 		&--3 .tab-container .freq-label:nth-of-type( 2 ) {
@@ -114,7 +114,7 @@
 
 	.wpbnbd__tiers .wpbnbd__button--active,
 	// Frequency-based version.
-	.tab-container .freq-label.wpbnbd__button--active::after  {
+	.tab-container .freq-label.wpbnbd__button--active::after {
 		background: white;
 		border-radius: 5px;
 		box-shadow: 0 0 0 1px variables.$color__border;
@@ -167,6 +167,12 @@
 			width: calc( 100% + 2px );
 		}
 	}
+
+	@include mixins.media( mobile ) {
+		&.wpbnbd--nyp-disabled .frequencies input[type='radio']:checked ~ .tiers {
+			grid-template-columns: repeat( 3, 1fr );
+		}
+	}
 }
 
 /* Minimal Style */
@@ -174,7 +180,7 @@
 .wpbnbd.is-style-minimal {
 	border: none;
 
-	form:not( [data-is-streamlined-form] ) {
+	form {
 		text-align: center;
 	}
 
@@ -301,7 +307,6 @@
 			&.wpbnbd__button--active {
 				box-shadow: 0 4px 0 currentcolor;
 			}
-
 		}
 	}
 
@@ -322,10 +327,14 @@
 			}
 		}
 	}
-	&:not( .wpbnbd--platform-stripe ) {
-		button[type='submit'] {
-			margin: 0 auto;
-			min-width: 50%;
+	button[type='submit'] {
+		margin: 0 auto;
+		min-width: 50%;
+	}
+
+	@include mixins.media( mobile ) {
+		&.wpbnbd--nyp-disabled .frequency input[type='radio']:checked ~ .tiers {
+			grid-template-columns: repeat( 3, 1fr );
 		}
 	}
 }

package/src/blocks/donate/styles/view.scss

@@ -19,6 +19,15 @@
 		}
 	}
 
+	&__tiers__amount__value {
+		font-size: 13px;
+		.woocommerce-Price-amount {
+			display: inline;
+			font-size: 29px;
+			font-weight: 700;
+		}
+	}
+
 	mark {
 		background-color: transparent;
 	}

package/src/blocks/donate/tiers-based/style.scss

@@ -18,10 +18,6 @@
 				&--hidden {
 					display: none;
 				}
-				.wp-block-newspack-blocks-donate__stripe,
-				.stripe-payment__messages > div {
-					margin: 0 !important;
-				}
 			}
 			&__selection {
 				display: flex;
@@ -103,13 +99,6 @@
 			}
 			&__amount {
 				margin-bottom: 16px;
-				&__number {
-					display: inline;
-					font-size: 29px;
-				}
-				&__frequency {
-					font-size: 13px;
-				}
 			}
 			button[type='submit'],
 			.submit-button {

package/src/blocks/donate/tiers-based/utils.test.js

@@ -0,0 +1,38 @@
+import { parseTiersBasedConfig } from './utils';
+
+describe( 'tiers-based config processing', () => {
+	it( 'decodes a tiers-based config', () => {
+		expect(
+			parseTiersBasedConfig(
+				'["donation_frequency","donation_value_","once",[{"heading":"Small"},{"heading":"Medium"},{"heading":"Large"}],{"once":[9,20,90,20],"month":[7,15,30,15],"year":[84,180,360,180]},"February 09, 2024","January 09, 2025","#dd3333"]'
+			)
+		).toEqual( {
+			amounts: {
+				month: [ 7, 15, 30, 15 ],
+				once: [ 9, 20, 90, 20 ],
+				year: [ 84, 180, 360, 180 ],
+			},
+			buttonColor: '#dd3333',
+			initialFrequency: 'once',
+			params: {
+				frequency: 'donation_frequency',
+				tierPrefix: 'donation_value_',
+			},
+			renewsAt: {
+				month: 'February 09, 2024',
+				year: 'January 09, 2025',
+			},
+			tiersBasedOptions: [
+				{
+					heading: 'Small',
+				},
+				{
+					heading: 'Medium',
+				},
+				{
+					heading: 'Large',
+				},
+			],
+		} );
+	} );
+} );

package/src/blocks/donate/tiers-based/utils.ts

@@ -13,8 +13,7 @@ export const parseTiersBasedConfig = ( rawConfig = '' ) => {
 				month: items[ 5 ] as string,
 				year: items[ 6 ] as string,
 			},
-			isRenderingStripePaymentForm: items[ 7 ],
-			buttonColor: items[ 8 ],
+			buttonColor: items[ 7 ],
 		};
 	} catch ( error ) {
 		return false;

package/src/blocks/donate/tiers-based/view.ts

@@ -26,7 +26,6 @@ export default ( parentEl: HTMLElement ) => {
 	setupSlider( parentEl, config );
 
 	let selectedFrequency: SelectedFrequency = config.initialFrequency;
-	let selectedTierIndex = 0;
 
 	// Frequency choosing interaction.
 	frequencyButtonsEls.forEach( buttonEl => {
@@ -93,7 +92,6 @@ export default ( parentEl: HTMLElement ) => {
 	tierSelectionButtonsEls.forEach( buttonEl => {
 		buttonEl.addEventListener( 'click', () => {
 			const tierIndex = parseInt( buttonEl.getAttribute( 'data-tier-index' ) || '' );
-			selectedTierIndex = tierIndex;
 			const tierHeadingEl: HTMLElement | null = parentEl.querySelector(
 				'.wpbnbd__tiers__tier-tile h2'
 			);
@@ -129,37 +127,6 @@ export default ( parentEl: HTMLElement ) => {
 		} );
 	} );
 
-	if ( config.isRenderingStripePaymentForm ) {
-		initFormEl.addEventListener( 'submit', e => {
-			e.preventDefault();
-
-			// Update values for the payment form.
-			const paymentFormEl = parentEl.querySelector( 'form[data-is-streamlined-form]' );
-			if ( ! paymentFormEl ) {
-				return;
-			}
-			const paymentFormAmountInputEl = paymentFormEl.querySelector(
-				'input[data-is-streamlined-input-amount]'
-			);
-			const paymentFormFrequencyInputEl = paymentFormEl.querySelector(
-				`input[name="${ config.params.frequency }"]`
-			);
-			if ( ! paymentFormAmountInputEl || ! paymentFormFrequencyInputEl ) {
-				return;
-			}
-			const amount = config.amounts[ selectedFrequency ][ selectedTierIndex ];
-			paymentFormAmountInputEl.setAttribute( 'value', amount );
-			paymentFormAmountInputEl.setAttribute(
-				'name',
-				`${ config.params.tierPrefix }${ selectedFrequency }`
-			);
-			paymentFormFrequencyInputEl.setAttribute( 'value', selectedFrequency );
-			// Trigger a change event, so the UI updates.
-			paymentFormEl.dispatchEvent( new Event( 'change' ) );
-		} );
-		backButton?.addEventListener( 'click', toggleView );
-	}
-
 	window.addEventListener( `newspackPaymentFlowComplete-${ parentEl.id }`, () => {
 		if ( backButton ) {
 			backButton.style.display = 'none';

package/src/blocks/donate/types.ts

@@ -33,8 +33,6 @@ export type DonationSettings = {
 	availableFrequencies: typeof FREQUENCY_SLUGS;
 	feeMultiplier: number;
 	feeStatic: number;
-	stripePublishableKey: string;
-	paymentRequestType: string;
 	captchaSiteKey: string;
 	minimumDonation: number;
 	amounts: DonationAmounts;
@@ -71,21 +69,8 @@ export type TierBasedOptionValue = {
 	recommendLabel: string;
 };
 
-export type AdditionalField = {
-	type: 'text';
-	name: string;
-	label: string;
-	isRequired: boolean;
-	width: number;
-	isNew?: boolean;
-	fieldIndex?: number;
-};
-
 export type DonateBlockAttributes = OverridableConfiguration & {
 	buttonText: string;
-	buttonWithCCText: string;
-	// https://stripe.com/docs/stripe-js/elements/payment-request-button
-	paymentRequestType: 'donate' | 'default' | 'book' | 'buy';
 	buttonColor: string;
 	thanksText: string;
 	defaultFrequency: DonationFrequencySlug;
@@ -104,7 +89,6 @@ export type DonateBlockAttributes = OverridableConfiguration & {
 	suggestedAmounts?: [ number, number, number ];
 	suggestedAmountUntiered?: number;
 	minimumDonation: number;
-	additionalFields: AdditionalField[];
 };
 
 export type ComponentProps = {

package/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,33 @@ export const getMigratedAmount = (
 		untieredAmount * multiplier,
 	];
 };
+
+export const getFrequencyLabel = (
+	amount: number,
+	frequencySlug: DonationFrequencySlug,
+	hideOnceLabel = false
+) => {
+	const template = window.newspack_blocks_data?.tier_amounts_template;
+
+	if ( ! template ) {
+		return '';
+	}
+
+	const formattedAmount = ( amount || 0 ).toFixed( 2 ).replace( /\.?0*$/, '' );
+
+	const frequency =
+		// eslint-disable-next-line no-nested-ternary
+		frequencySlug === 'once'
+			? hideOnceLabel
+				? ''
+				: __( ' once', 'newspack-blocks' )
+			: sprintf(
+					// Translators: %s is the frequency (e.g. per month, per year).
+					_x( ' per %s', 'per `Frequency`', 'newspack-blocks' ),
+					frequencySlug
+			  );
+
+	return template
+		.replace( 'AMOUNT_PLACEHOLDER', formattedAmount )
+		.replace( 'FREQUENCY_PLACEHOLDER', frequency );
+};

package/src/blocks/homepage-articles/block.json

@@ -137,6 +137,24 @@
 			"default": [],
 			"items": { "type": "integer" }
 		},
+		"customTaxonomyExclusions": {
+			"type": "array",
+			"default": [],
+			"items": {
+				"type": "object",
+				"properties": {
+					"slug": {
+						"type": "string"
+					},
+					"terms": {
+						"type": "array",
+						"items": {
+							"type": "integer"
+						}
+					}
+				}
+			}
+		},
 		"specificPosts": {
 			"type": "array",
 			"default": [],

package/src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php

@@ -187,7 +187,7 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 				array_merge(
 					array_map(
 						function( $attribute ) {
-							return false === $attribute ? '0' : str_replace( '#', '%23', $attribute );
+							return false === $attribute ? '0' : $attribute;
 						},
 						$attributes
 					),

package/src/blocks/homepage-articles/edit.js

@@ -293,6 +293,7 @@ class Edit extends Component {
 			tags,
 			tagExclusions,
 			categoryExclusions,
+			customTaxonomyExclusions,
 		} = attributes;
 
 		const imageSizeOptions = [
@@ -370,6 +371,8 @@ class Edit extends Component {
 						onTagExclusionsChange={ handleAttributeChange( 'tagExclusions' ) }
 						categoryExclusions={ categoryExclusions }
 						onCategoryExclusionsChange={ handleAttributeChange( 'categoryExclusions' ) }
+						customTaxonomyExclusions={ customTaxonomyExclusions }
+						onCustomTaxonomyExclusionsChange={ handleAttributeChange( 'customTaxonomyExclusions' ) }
 						postType={ postType }
 					/>
 					{ postLayout === 'grid' && (

package/src/blocks/homepage-articles/utils.ts

@@ -36,6 +36,7 @@ const POST_QUERY_ATTRIBUTES = [
 	'specificMode',
 	'tagExclusions',
 	'categoryExclusions',
+	'customTaxonomyExclusions',
 	'postType',
 	'includedPostStatuses',
 	'deduplicate',
@@ -55,6 +56,7 @@ type HomepageArticlesAttributes = {
 	specificMode: boolean;
 	tagExclusions: TagId[];
 	categoryExclusions: CategoryId[];
+	customTaxonomyExclusions: Taxonomy[];
 };
 
 type HomepageArticlesProps = {
@@ -100,6 +102,7 @@ export const queryCriteriaFromAttributes = ( attributes: Block[ 'attributes' ] )
 		specificMode,
 		tagExclusions,
 		categoryExclusions,
+		customTaxonomyExclusions,
 		includedPostStatuses,
 	} = pick( attributes, POST_QUERY_ATTRIBUTES );
 
@@ -120,6 +123,7 @@ export const queryCriteriaFromAttributes = ( attributes: Block[ 'attributes' ] )
 					tags,
 					tagExclusions,
 					categoryExclusions,
+					customTaxonomyExclusions,
 					customTaxonomies,
 					postType,
 					includedPostStatuses,

package/src/blocks/homepage-articles/view.php

@@ -320,11 +320,11 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
 
 	$articles_rest_url = add_query_arg(
 		array_merge(
-			array_map(
+			map_deep(
+				$attributes,
 				function( $attribute ) {
-					return false === $attribute ? '0' : str_replace( '#', '%23', $attribute );
-				},
-				$attributes
+					return false === $attribute ? '0' : $attribute;
+				}
 			),
 			[
 				'page' => 2,