@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

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

@@ -0,0 +1,341 @@
+<?php
+/**
+ * Renders the frequency-based Donate block.
+ *
+ * @package WordPress
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php';
+
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
+
+/**
+ * Renders the frequency-based Donate block.
+ */
+class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Donate_Renderer_Base {
+	/**
+	 * Renders the frequency selection of the donation form.
+	 *
+	 * @param string $frequency_slug Frequency slug.
+	 * @param string $frequency_name Frequency name.
+	 * @param number $uid Unique ID.
+	 * @param array  $configuration The donations settings.
+	 *
+	 * @return string
+	 */
+	private static function render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ) {
+		ob_start();
+		?>
+		<input
+			type='radio'
+			value='<?php echo esc_attr( $frequency_slug ); ?>'
+			id='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			name="<?php echo esc_attr( self::FREQUENCY_PARAM ); ?>"
+			<?php
+			checked(
+				$configuration['defaultFrequency'],
+				$frequency_slug
+			);
+			?>
+		/>
+		<label for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'>
+			<?php echo esc_html( $frequency_name ); ?>
+		</label>
+		<?php
+		return ob_get_clean();
+	}
+
+	/**
+	 * Renders the frequency selection of the donation form in accessible tabs.
+	 *
+	 * @param string $frequency_slug Frequency slug.
+	 * @param string $frequency_name Frequency name.
+	 * @param number $uid Unique ID.
+	 * @param array  $configuration The donations settings.
+	 *
+	 * @return string
+	 */
+	private static function render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ) {
+		ob_start();
+		?>
+		<button
+			role='tab'
+			type='button'
+			aria-controls='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			class="wpbnbd__button freq-label<?php echo esc_attr( $frequency_slug === $configuration['defaultFrequency'] ? ' wpbnbd__button--active' : '' ); ?>"
+			data-tab-id="<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			id="tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>"
+			<?php echo "aria-selected='" . ( $frequency_slug === $configuration['defaultFrequency'] ? 'true' : 'false' ) . "'"; ?>
+			>
+				<?php echo esc_html( $frequency_name ); ?>
+		</button>
+		<?php
+		return ob_get_clean();
+	}
+
+	/**
+	 * Renders the footer of the donation form.
+	 *
+	 * @param array $attributes The block attributes.
+	 *
+	 * @return string
+	 */
+	private static function render_footer( $attributes ) {
+		$campaign          = $attributes['campaign'] ?? false;
+		$button_style_attr = 'style="' . self::get_button_style( $attributes ) . '"';
+
+		ob_start();
+		?>
+		<p class='wp-block-newspack-blocks-donate__thanks thanks'>
+			<?php echo wp_kses_post( $attributes['thanksText'] ); ?>
+		</p>
+
+		<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; ?>
+
+		<?php
+		return ob_get_clean();
+	}
+
+	/**
+	 * Render the form header.
+	 *
+	 * @param array  $configuration The donations settings.
+	 * @param string $uid ID of the block.
+	 */
+	private static function render_form_header( $configuration, $uid ) {
+		?>
+			<?php if ( ! self::renders_single_frequency( $configuration ) ) : ?>
+				<div role='tablist' class='tab-container'>
+					<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+						<?php echo self::render_frequency_tab( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+					<?php endforeach; ?>
+				</div>
+			<?php endif; ?>
+		<?php
+	}
+
+	/**
+	 * Does the block render just a single frequency?
+	 *
+	 * @param array $configuration The donations settings.
+	 */
+	private static function renders_single_frequency( $configuration ) {
+		return count( $configuration['frequencies'] ) === 1;
+	}
+
+	/**
+	 * Render the frequency-based layout.
+	 *
+	 * @param array $attributes Block attributes.
+	 */
+	public static function render( $attributes ) {
+		$uid = wp_rand( 10000, 99999 ); // Unique identifier to prevent labels colliding with other instances of Donate block.
+
+		$configuration = self::get_configuration( $attributes );
+
+		// Calculate the value for the "step" property of the custom amount donation value `input` element.
+		$input_element_step_attribute = '1';
+		$thousand_separator = get_option( 'woocommerce_price_thousand_sep', false );
+		$decimals = get_option( 'woocommerce_price_num_decimals', 2 );
+		if ( $thousand_separator !== '.' && $decimals > 0 ) {
+			// According to the HTML spec, a float can only use a dot (https://html.spec.whatwg.org/dev/common-microsyntaxes.html#valid-floating-point-number).
+			// Therefore, an `input[type="number"]` with a `,` decimal separator is invalid HTML.
+			// To support separators other than a dot would mean using a standard `input[type="text"]` element,
+			// with JS handling the validation and input filtering. This might be revisited in the future.
+			$input_element_step_attribute = '0.' . str_repeat( '0', $decimals - 1 ) . '1';
+		}
+
+		ob_start();
+
+		/**
+		 * For AMP-compatibility, the donation forms were implemented as pure HTML forms (no JS).
+		 * Each frequency and tier option is a radio input, styled to look like a button.
+		 * As the radio inputs are checked/unchecked, fields are hidden/displayed using only CSS.
+		 */
+		if ( ! $configuration['tiered'] ) :
+			?>
+		<div
+			class="untiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
+			id="<?php echo esc_attr( $configuration['uid'] ); ?>"
+		>
+			<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'>
+						<?php echo self::render_form_header( $configuration, $uid ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+							<?php $amount = $configuration['amounts'][ $frequency_slug ][3]; ?>
+							<div
+								class="wp-block-newspack-blocks-donate__frequency donation-frequency__<?php echo esc_attr( $frequency_slug ); ?> frequency"
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+							>
+								<?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'
+									>
+										<?php echo esc_html__( 'Donation amount', 'newspack-blocks' ); ?>
+										<?php echo esc_html( trim( self::get_frequency_label( $frequency_slug, true ) ) ); ?>
+									</label>
+									<div class='wp-block-newspack-blocks-donate__money-input money-input'>
+										<span class='currency'>
+											<?php echo esc_html( $configuration['currencySymbol'] ); ?>
+										</span>
+										<input
+											type='number'
+											min='<?php echo esc_attr( $configuration['minimumDonation'] ); ?>'
+											name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_untiered'
+											value='<?php echo esc_attr( $amount ); ?>'
+											id='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
+											step='<?php echo esc_attr( $input_element_step_attribute ); ?>'
+										/>
+									</div>
+									<?php else : ?>
+									<input
+										type='radio'
+										name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>'
+										value='<?php echo esc_attr( $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( $amount, $frequency_slug ) ); ?>
+									</label>
+									<?php endif; ?>
+								</div>
+							</div>
+
+						<?php endforeach; ?>
+					</div>
+				</div>
+					<?php echo self::render_footer( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+			</form>
+		</div>
+
+			<?php
+			else :
+				$suggested_amounts = $configuration['amounts'];
+				?>
+
+		<div
+			class="tiered <?php echo esc_html( $configuration['container_classnames'] ); ?>"
+			id="<?php echo esc_attr( $configuration['uid'] ); ?>"
+		>
+			<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'>
+						<?php echo self::render_form_header( $configuration, $uid ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+							<div
+								class='wp-block-newspack-blocks-donate__frequency frequency'
+								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								role='tabpanel'
+								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
+								>
+								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+								<div class='wp-block-newspack-blocks-donate__tiers tiers'>
+									<?php foreach ( $suggested_amounts[ $frequency_slug ] as $index => $amount ) : ?>
+										<?php
+											$decimals         = intval( $amount ) == floatval( $amount ) ? 0 : 2;
+											$format_options   = [ 'decimals' => $decimals ];
+											$formatted_amount = function_exists( 'wc_price' ) ?
+												wp_strip_all_tags( \wc_price( (float) $amount, $format_options ) ) :
+												$configuration['currencySymbol'] . number_format( $amount, $decimals );
+										?>
+										<div
+											class='wp-block-newspack-blocks-donate__tier donation-tier__<?php echo esc_attr( $frequency_slug ); ?>'
+											data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
+										>
+											<?php if ( 3 === $index ) : // The "other" tier. ?>
+												<input
+													type='radio'
+													class='other-input'
+													name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>'
+													value='other'
+													id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other'
+												/>
+												<label
+													class='tier-select-label tier-label'
+													for='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other'
+												>
+												<?php echo esc_html__( 'Other', 'newspack-blocks' ); ?>
+												</label>
+												<label
+													class='odl'
+													for='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
+												>
+												<?php echo esc_html__( 'Donation amount', 'newspack-blocks' ); ?>
+												<?php echo esc_html( trim( self::get_frequency_label( $frequency_slug, true ) ) ); ?>
+												</label>
+												<div class='wp-block-newspack-blocks-donate__money-input money-input'>
+													<span class='currency'>
+													<?php echo esc_html( $configuration['currencySymbol'] ); ?>
+													</span>
+													<input
+														type='number'
+														min='<?php echo esc_attr( $configuration['minimumDonation'] ); ?>'
+														name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_other'
+														id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
+														step='<?php echo esc_attr( $input_element_step_attribute ); ?>'
+													/>
+												</div>
+												<?php
+												else :
+													?>
+												<input
+													type='radio'
+													name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>'
+													value='<?php echo esc_attr( $amount ); ?>'
+													id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-<?php echo (int) $index; ?>'
+													<?php checked( 1, $index ); ?>
+												/>
+												<label
+													class='tier-select-label tier-label'
+													for='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-<?php echo (int) $index; ?>'
+												>
+													<?php echo wp_kses_post( $formatted_amount ); ?>
+												</label>
+											<?php endif; ?>
+										</div>
+									<?php endforeach; ?>
+									<?php if ( self::renders_single_frequency( $configuration ) ) : ?>
+										<div class='wp-block-newspack-blocks-donate__frequency-label'>
+											<div>
+											<?php echo esc_html( trim( self::get_frequency_label( $frequency_slug, true ) ) ); ?>
+
+											</div>
+										</div>
+									<?php endif; ?>
+								</div>
+							</div>
+
+						<?php endforeach; ?>
+					</div>
+				</div>
+					<?php echo self::render_footer( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+			</form>
+		</div>
+				<?php
+		endif;
+
+			return apply_filters( 'newspack_blocks_donate_block_html', ob_get_clean(), $attributes );
+	}
+}

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

@@ -0,0 +1,184 @@
+<?php
+/**
+ * Renders the tiers-based Donate block.
+ *
+ * @package WordPress
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php';
+
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
+
+/**
+ * Renders the tiers-based Donate block.
+ */
+class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate_Renderer_Base {
+	/**
+	 * Get displayed amounts.
+	 *
+	 * @param array $amounts Amounts.
+	 */
+	private static function get_displayed_amounts( $amounts ) {
+		$disabled_in_tiers_based_layout_tier_index = 3;
+		return array_slice( $amounts, 0, $disabled_in_tiers_based_layout_tier_index );
+	}
+
+	/**
+	 * Render the single option.
+	 *
+	 * @param array  $attributes Block attributes.
+	 * @param int    $index Option index.
+	 * @param int    $amount Option amount.
+	 * @param string $selected_frequency Selected frequency.
+	 * @param bool   $is_any_recommended Is any option recommended.
+	 */
+	private static function render_single_tier( $attributes, $index, $amount, $selected_frequency, $is_any_recommended ) {
+		$configuration         = self::get_configuration( $attributes );
+		$has_recommend_label   = isset( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] ) && ! empty( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] );
+		$has_description       = isset( $attributes['tiersBasedOptions'][ $index ]['description'] ) && ! empty( $attributes['tiersBasedOptions'][ $index ]['description'] );
+		$is_reverse_style      = ! $has_recommend_label && $is_any_recommended;
+		$button_style_attr     = 'style="' . self::get_button_style( $attributes, $is_reverse_style ) . '"';
+
+		ob_start();
+		?>
+		<div class="wpbnbd__tiers__tier <?php echo $has_recommend_label ? 'wpbnbd__tiers__tier--recommended' : ''; ?>">
+			<div class="wpbnbd__tiers__top">
+				<h2 class="wpbnbd__tiers__heading">
+					<?php echo esc_html( $attributes['tiersBasedOptions'][ $index ]['heading'] ); ?>
+				</h2>
+				<?php if ( $has_recommend_label ) : ?>
+				<h3 class="wpbnbd__tiers__recommend-label">
+					<?php echo esc_html( wp_strip_all_tags( $attributes['tiersBasedOptions'][ $index ]['recommendLabel'] ) ); ?>
+				</h3>
+				<?php endif; ?>
+			</div>
+			<div class="wpbnbd__tiers__amount">
+				<span>
+					<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+						<?php $amount = $configuration['amounts'][ $frequency_slug ][ $index ]; ?>
+						<span
+							style="<?php echo $frequency_slug === $selected_frequency ? '' : 'display:none;'; ?>"
+							class="donation-tier__<?php echo esc_attr( $frequency_slug ); ?>"
+							data-frequency-slug="<?php echo esc_attr( $frequency_slug ); ?>"
+							data-amount="<?php echo esc_attr( $amount ); ?>"
+							data-tier-index="<?php echo esc_attr( $index ); ?>"
+							data-checkout="<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>"
+						>
+							<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $amount, $frequency_slug ) ); ?>
+						</span>
+					<?php endforeach; ?>
+				</span>
+			</div>
+			<button
+				type='submit'
+				name="<?php echo esc_attr( self::TIER_PARAM_PREFIX ); ?><?php echo esc_attr( $selected_frequency ); ?>"
+				value="<?php echo esc_attr( $configuration['amounts'][ $selected_frequency ][ $index ] ); ?>"
+				data-tier-index="<?php echo esc_attr( $index ); ?>"
+				<?php echo $button_style_attr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+			>
+				<?php echo esc_html( $attributes['tiersBasedOptions'][ $index ]['buttonText'] ); ?>
+			</button>
+			<?php if ( $has_description ) : ?>
+			<div class="wpbnbd__tiers__description">
+				<?php echo wp_kses_post( $attributes['tiersBasedOptions'][ $index ]['description'] ); ?>
+			</div>
+			<?php endif; ?>
+		</div>
+
+		<?php
+		return ob_get_clean();
+	}
+
+	/**
+	 * Render the tiers-based layout.
+	 *
+	 * @param array $attributes Block attributes.
+	 */
+	public static function render( $attributes ) {
+		$configuration             = self::get_configuration( $attributes );
+		$displayed_frequencies     = array_keys( $configuration['frequencies'] );
+		if ( isset( $attributes['defaultFrequency'] ) && in_array( $attributes['defaultFrequency'], $displayed_frequencies, true ) ) {
+			$intial_selected_frequency = $attributes['defaultFrequency'];
+		} else {
+			$intial_selected_frequency = $displayed_frequencies[0];
+		}
+
+		$displayed_amounts          = self::get_displayed_amounts( $configuration['amounts'][ $intial_selected_frequency ] );
+		$config_related_attributes  = array_map(
+			function ( $option ) {
+				return [ 'heading' => $option['heading'] ];
+			},
+			$attributes['tiersBasedOptions']
+		);
+
+		$configuration_for_tiers_based = [
+			self::FREQUENCY_PARAM,
+			self::TIER_PARAM_PREFIX,
+			$intial_selected_frequency,
+			$config_related_attributes,
+			$configuration['amounts'],
+			( new DateTime() )->modify( '+1 month' )->format( 'F d, Y' ),
+			( new DateTime() )->modify( '+1 year' )->format( 'F d, Y' ),
+			$attributes['buttonColor'],
+		];
+
+		$is_any_recommended = array_reduce(
+			$attributes['tiersBasedOptions'],
+			function ( $carry, $item ) {
+				return ( $carry || ( isset( $item['recommendLabel'] ) && ! empty( $item['recommendLabel'] ) ) );
+			},
+			false
+		);
+
+		ob_start();
+		?>
+		<div
+			class="<?php echo esc_attr( $configuration['container_classnames'] ); ?>"
+			id="<?php echo esc_attr( $configuration['uid'] ); ?>"
+			data-tiers-based-config="<?php echo esc_attr( htmlspecialchars( wp_json_encode( $configuration_for_tiers_based ), ENT_QUOTES, 'UTF-8' ) ); ?>"
+		>
+			<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 ); ?>">
+					<div class="wpbnbd__tiers">
+						<?php if ( count( $configuration['frequencies'] ) > 1 ) : ?>
+							<div class="wpbnbd__tiers__selection">
+								<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
+									<button
+										type="button"
+										data-frequency-slug="<?php echo esc_attr( $frequency_slug ); ?>"
+										data-frequency-label="<?php echo esc_attr( self::get_frequency_label( $frequency_slug ) ); ?>"
+										class="wpbnbd__button <?php echo $intial_selected_frequency === $frequency_slug ? 'wpbnbd__button--active' : ''; ?>"
+									><?php echo esc_html( $frequency_name ); ?></button>
+								<?php endforeach; ?>
+							</div>
+						<?php endif; ?>
+						<?php
+							$keys = array_keys( $configuration['frequencies'] );
+							$frequency_slug = reset( $keys );
+						?>
+						<div class="wpbnbd__tiers__options">
+							<?php foreach ( $displayed_amounts as $index => $amount ) : ?>
+								<?php
+									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>
+						<ul class="wpbnbd__tiers__options__dots">
+							<?php foreach ( $displayed_amounts as $index => $amount ) : ?>
+								<li></li>
+							<?php endforeach; ?>
+						</ul>
+					</div>
+				</div>
+
+			</form>
+		</div>
+
+		<?php
+		return apply_filters( 'newspack_blocks_donate_block_html', ob_get_clean(), $attributes );
+	}
+}

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

@@ -0,0 +1,117 @@
+<?php
+/**
+ * Server-side rendering of the `newspack-blocks/donate` block.
+ *
+ * @package WordPress
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php';
+require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php';
+
+/**
+ * Server-side rendering of the `newspack-blocks/donate` block.
+ */
+class Newspack_Blocks_Donate_Renderer {
+
+	/**
+	 * Get the keys of the billing fields to render for logged out users.
+	 *
+	 * @return array
+	 */
+	public static function get_billing_fields_keys() {
+		$fields = [
+			'billing_first_name',
+			'billing_last_name',
+			'billing_email',
+		];
+		/**
+		 * Filters the billing fields used on modal checkout.
+		 *
+		 * @param array $fields Billing fields.
+		 */
+		return apply_filters( 'newspack_blocks_donate_billing_fields_keys', $fields );
+	}
+
+	/**
+	 * Enqueue frontend scripts and styles.
+	 *
+	 * @param string $handle_slug The slug of the script to enqueue.
+	 * @param array  $dependencies The dependencies of the script to enqueue.
+	 */
+	private static function enqueue_scripts( $handle_slug, $dependencies = [ 'wp-i18n' ] ) {
+		$has_css = true;
+		switch ( $handle_slug ) {
+			case 'frequency-based':
+				$filename = 'frequencyBased';
+				break;
+			case 'tiers-based':
+				$filename = 'tiersBased';
+				break;
+			default:
+				$filename = false;
+				break;
+		}
+
+		if ( false === $filename ) {
+			return;
+		}
+
+		$handle      = Newspack_Blocks::SCRIPT_HANDLES[ $handle_slug ];
+		$script_data = Newspack_Blocks::script_enqueue_helper( NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . '/' . $filename . '.js' );
+		wp_enqueue_script(
+			$handle,
+			$script_data['script_path'],
+			$dependencies,
+			NEWSPACK_BLOCKS__VERSION,
+			true
+		);
+		wp_script_add_data( $handle, 'async', true );
+
+		if ( $has_css ) {
+			$style_path = NEWSPACK_BLOCKS__BLOCKS_DIRECTORY . $filename . '.css';
+			wp_enqueue_style(
+				$handle,
+				plugins_url( $style_path, NEWSPACK_BLOCKS__PLUGIN_FILE ),
+				[],
+				NEWSPACK_BLOCKS__VERSION
+			);
+			wp_style_add_data( $handle, 'rtl', 'replace' );
+		}
+	}
+
+	/**
+	 * Renders the `newspack-blocks/donate` block on server.
+	 *
+	 * @param array $attributes The block attributes.
+	 *
+	 * @return string
+	 */
+	public static function render( $attributes ) {
+		if ( ! class_exists( 'Newspack\Donations' ) ) {
+			return '';
+		}
+
+		$configuration = Newspack_Blocks_Donate_Renderer_Frequency_Based::get_configuration( $attributes );
+		if ( \is_wp_error( $configuration ) ) {
+			return '';
+		}
+
+		Newspack_Blocks::enqueue_view_assets( 'donate' );
+		wp_script_add_data( 'newspack-blocks-donate', 'async', true );
+
+		if ( true === $attributes['useModalCheckout'] ) {
+			\Newspack_Blocks\Modal_Checkout::enqueue_modal();
+		}
+
+		if ( $configuration['is_tier_based_layout'] ) {
+			self::enqueue_scripts( 'tiers-based' );
+			return Newspack_Blocks_Donate_Renderer_Tiers_Based::render( $attributes );
+		} else {
+			self::enqueue_scripts( 'frequency-based' );
+			return Newspack_Blocks_Donate_Renderer_Frequency_Based::render( $attributes );
+		}
+	}
+}
+new Newspack_Blocks_Donate_Renderer();