@automattic/newspack-blocks 1.53.0 → 1.54.0

package/src/blocks/donate/index.js

@@ -10,6 +10,7 @@ import { payment } from '@wordpress/icons';
  * Internal dependencies
  */
 import edit from './edit';
+import metadata from './block.json';
 
 /**
  * Style dependencies - will load in editor
@@ -17,7 +18,10 @@ import edit from './edit';
 import './editor.scss';
 import './view.scss';
 
-export const name = 'donate';
+const { name, attributes, category, supports } = metadata;
+
+// Name must be exported separately.
+export { name };
 export const title = __( 'Donate', 'newspack-blocks' );
 
 export const settings = {
@@ -26,7 +30,7 @@ export const settings = {
 		src: payment,
 		foreground: '#36f',
 	},
-	category: 'newspack',
+	category,
 	keywords: [
 		__( 'donate', 'newspack-blocks' ),
 		__( 'memberships', 'newspack-blocks' ),
@@ -45,45 +49,8 @@ export const settings = {
 			</ExternalLink>
 		</>
 	),
-	attributes: {
-		className: {
-			type: 'string',
-		},
-		manual: {
-			type: 'boolean',
-		},
-		suggestedAmounts: {
-			type: 'array',
-			default: [ 0, 0, 0 ],
-		},
-		suggestedAmountUntiered: {
-			type: 'integer',
-			default: 0,
-		},
-		tiered: {
-			type: 'boolean',
-			default: true,
-		},
-		campaign: {
-			type: 'string',
-		},
-		thanksText: {
-			type: 'string',
-			default: __( 'Your contribution is appreciated.', 'newspack-blocks' ),
-		},
-		buttonText: {
-			type: 'string',
-			default: __( 'Donate Now', 'newspack-blocks' ),
-		},
-		defaultFrequency: {
-			type: 'string',
-			default: 'month',
-		},
-	},
-	supports: {
-		html: false,
-		align: false,
-	},
+	attributes,
+	supports,
 	edit,
 	save: () => null, // to use view.php
 };

package/src/blocks/donate/streamlined/style.scss

@@ -1,6 +1,6 @@
-@import '../../../shared/sass/colors';
-@import '../../../shared/sass/mixins';
-@import '../../../shared/sass/variables';
+@use '../../../shared/sass/colors';
+@use '../../../shared/sass/mixins';
+@use '../../../shared/sass/variables';
 
 @keyframes loader {
 	0% {
@@ -39,7 +39,7 @@
 		}
 
 		&__card {
-			border: 1px solid $color__border;
+			border: 1px solid variables.$color__border;
 			border-radius: 3px;
 			padding: 0.34rem 0.66rem;
 			min-height: 32px;
@@ -60,7 +60,7 @@
 			border-radius: 3px;
 			font-family: sans-serif;
 
-			@include media( tablet ) {
+			@include mixins.media( tablet ) {
 				font-size: 14px;
 				line-height: 1.2;
 			}
@@ -92,9 +92,9 @@
 
 		&__messages {
 			> div {
-				border: 0 solid $color__info;
+				border: 0 solid colors.$color__info;
 				border-left-width: 4px;
-				font-size: $font__size-sm;
+				font-size: variables.$font__size-sm;
 				margin-top: 0.76rem;
 				padding: 0.38rem 0.76rem;
 				&:empty {
@@ -103,12 +103,12 @@
 					padding: 0;
 				}
 				&.type-error {
-					background-color: rgba( $color__error, 0.075 );
-					border-color: $color__error;
+					background-color: rgba( colors.$color__error, 0.075 );
+					border-color: colors.$color__error;
 				}
 				&.type-success {
-					background-color: rgba( $color__success, 0.075 );
-					border-color: $color__success;
+					background-color: rgba( colors.$color__success, 0.075 );
+					border-color: colors.$color__success;
 				}
 			}
 		}
@@ -136,12 +136,12 @@
 				align-items: flex-end;
 				justify-content: space-between;
 				flex-wrap: wrap;
-				@include media( tablet ) {
+				@include mixins.media( tablet ) {
 					flex-wrap: nowrap;
 				}
 				input {
 					margin-bottom: 0.5rem;
-					@include media( tablet ) {
+					@include mixins.media( tablet ) {
 						margin-bottom: 0;
 						width: 50%;
 						&:last-child {
@@ -153,7 +153,7 @@
 		}
 
 		&__info {
-			color: $color__text-light;
+			color: colors.$color__text-light;
 			font-size: 0.7em;
 			font-style: italic;
 			padding-left: 1.5em;
@@ -192,7 +192,7 @@
 			> * {
 				margin-top: 10px;
 				width: 100%;
-				@include media( mobile ) {
+				@include mixins.media( mobile ) {
 					width: auto;
 				}
 			}
@@ -200,7 +200,7 @@
 
 		&__request-button {
 			min-width: 190px;
-			@include media( mobile ) {
+			@include mixins.media( mobile ) {
 				margin-right: 1em;
 			}
 			&--invisible {
@@ -212,7 +212,7 @@
 	&__stripe {
 		margin: 0.38rem 0.76rem 0.76rem;
 
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			margin-left: 1.5rem;
 			margin-right: 1.5rem;
 		}

package/src/blocks/donate/view.php

@@ -5,6 +5,41 @@
  * @package WordPress
  */
 
+/**
+ * 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
+ */
+function newspack_blocks_render_block_donate_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='donation_frequency'
+			<?php
+			checked(
+				$configuration['defaultFrequency'],
+				$frequency_slug
+			);
+			?>
+		/>
+		<label
+			for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
+			class='donation-frequency-label freq-label'
+		>
+			<?php echo esc_html( $frequency_name ); ?>
+		</label>
+	<?php
+	return ob_get_clean();
+}
+
 /**
  * Renders the footer of the donation form.
  *
@@ -167,8 +202,8 @@ function newspack_blocks_render_block_donate( $attributes ) {
 
 	Newspack_Blocks::enqueue_view_assets( 'donate' );
 
-	$settings = Newspack\Donations::get_donation_settings();
-	if ( is_wp_error( $settings ) || ! $settings['created'] ) {
+	$configuration = Newspack\Donations::get_donation_settings();
+	if ( is_wp_error( $configuration ) ) {
 		return '';
 	}
 
@@ -179,30 +214,82 @@ function newspack_blocks_render_block_donate( $attributes ) {
 		$classname = 'is-style-default';
 	}
 
-	/* If block is in "manual" mode, override certain state properties with values stored in attributes */
-	if ( $attributes['manual'] ?? false ) {
-		$settings = array_merge( $settings, $attributes );
-	}
-
 	$frequencies = [
 		'once'  => __( 'One-time', 'newspack-blocks' ),
 		'month' => __( 'Monthly', 'newspack-blocks' ),
 		'year'  => __( 'Annually', 'newspack-blocks' ),
 	];
 
-	$selected_frequency = $attributes['defaultFrequency'] ?? 'month';
-	$suggested_amounts  = $settings['suggestedAmounts'];
+	/* If block is in "manual" mode, override certain state properties with values stored in attributes */
+	if ( $attributes['manual'] ?? false ) {
+		// Migrate old attributes.
+		if ( empty( $attributes['amounts'] ) && isset( $attributes['suggestedAmounts'] ) ) {
+			$other_amount = $configuration['amounts']['month'][3];
+			if ( isset( $attributes['suggestedAmountUntiered'] ) ) {
+				$other_amount = $attributes['suggestedAmountUntiered'];
+			}
+			$suggested_amounts     = $attributes['suggestedAmounts'];
+			$multiplied_amounts    = [
+				$suggested_amounts[0] * 12,
+				$suggested_amounts[1] * 12,
+				$suggested_amounts[2] * 12,
+				$other_amount * 12,
+			];
+			$attributes['amounts'] = [
+				'once'  => $multiplied_amounts,
+				'month' => [
+					$suggested_amounts[0],
+					$suggested_amounts[1],
+					$suggested_amounts[2],
+					$other_amount,
+				],
+				'year'  => $multiplied_amounts,
+			];
+		}
+		if ( isset( $attributes['tiered'] ) ) {
+			$configuration['tiered'] = $attributes['tiered'];
+		}
+		if ( isset( $attributes['amounts'] ) && ! empty( $attributes['amounts'] ) ) {
+			$configuration['amounts'] = $attributes['amounts'];
+		}
 
-	$uid = wp_rand( 10000, 99999 ); // Unique identifier to prevent labels colliding with other instances of Donate block.
+		if ( isset( $attributes['disabledFrequencies'] ) ) {
+			foreach ( $attributes['disabledFrequencies'] as $frequency_slug => $is_disabled ) {
+				if ( $is_disabled ) {
+					$configuration['disabledFrequencies'][ $frequency_slug ] = true;          }
+			}
+		}
+	}
+
+	foreach ( array_keys( $frequencies ) as $frequency_slug ) {
+		if ( $configuration['disabledFrequencies'][ $frequency_slug ] ) {
+			unset( $frequencies[ $frequency_slug ] );
+		}
+	}
+
+	// Ensure default frequency is valid (not disabled).
+	foreach ( array_keys( $configuration['disabledFrequencies'] ) as $frequency_slug ) {
+		if ( $configuration['defaultFrequency'] === $frequency_slug && $configuration['disabledFrequencies'][ $frequency_slug ] ) {
+			$non_disabled_frequencies          = array_keys(
+				array_filter(
+					$configuration['disabledFrequencies'],
+					function ( $item ) {
+						return ! $item;
+					}
+				)
+			);
+			$configuration['defaultFrequency'] = $non_disabled_frequencies[0];
+		}
+	}
 
-	$form_footer = newspack_blocks_render_block_donate_footer( $attributes );
+	$uid = wp_rand( 10000, 99999 ); // Unique identifier to prevent labels colliding with other instances of Donate block.
 
 	if ( Newspack_Blocks::is_rendering_streamlined_block() ) {
-		$stripe_data           = \Newspack\Stripe_Connection::get_stripe_data();
-		$currency              = $stripe_data['currency'];
-		$settings_for_frontend = [
+		$stripe_data                = \Newspack\Stripe_Connection::get_stripe_data();
+		$currency                   = $stripe_data['currency'];
+		$configuration_for_frontend = [
 			$currency,
-			$settings['currencySymbol'],
+			$configuration['currencySymbol'],
 			get_bloginfo( 'name' ),
 			Newspack\Stripe_Connection::is_currency_zero_decimal( $currency ),
 			$stripe_data['location_code'],
@@ -212,8 +299,22 @@ function newspack_blocks_render_block_donate( $attributes ) {
 			$stripe_data['usedPublishableKey'],
 		];
 	} else {
-		$settings_for_frontend = [];
+		$configuration_for_frontend = [];
+	}
+
+	$frequencies_count    = count( $frequencies );
+	$container_classnames = 'wp-block-newspack-blocks-donate wpbnbd ' . $classname . ' wpbnbd-frequencies--' . $frequencies_count;
+
+	$frequency_padding = '(0.76rem + 1.6em + 1px)';
+	switch ( $classname ) {
+		case 'is-style-alternate':
+			$frequency_padding = '( 1.14rem + 1.6em ) + 8px';
+			break;
+		case 'is-style-minimal':
+			$frequency_padding = '( 0.76rem + 1.6em + 4px )';
+			break;
 	}
+	$frequencies_container_styles = 'padding-top: calc( ' . $frequencies_count . ' * ' . $frequency_padding . ' );';
 
 	ob_start();
 
@@ -222,201 +323,152 @@ function newspack_blocks_render_block_donate( $attributes ) {
 	 * 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 ( ! $settings['tiered'] ) :
-
+	if ( ! $configuration['tiered'] ) :
 		?>
-		<div class="wp-block-newspack-blocks-donate wpbnbd untiered <?php echo esc_html( $classname ); ?>">
-			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $settings_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
+		<div class="untiered <?php echo esc_html( $container_classnames ); ?>">
+			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
 				<input type='hidden' name='newspack_donate' value='1' />
 				<div class='wp-block-newspack-blocks-donate__options'>
-					<?php foreach ( $frequencies as $frequency_slug => $frequency_name ) : ?>
-						<?php
-							$formatted_amount = 'year' === $frequency_slug || 'once' === $frequency_slug ? 12 * $settings['suggestedAmountUntiered'] : $settings['suggestedAmountUntiered'];
-						?>
-
-						<div class='wp-block-newspack-blocks-donate__frequency frequency'>
-							<input
-								type='radio'
-								value='<?php echo esc_attr( $frequency_slug ); ?>'
-								id='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-								name='donation_frequency'
-								<?php checked( $selected_frequency, $frequency_slug ); ?>
-							/>
-							<label
-								for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-								class='donation-frequency-label freq-label'
-							>
-								<?php echo esc_html( $frequency_name ); ?>
-							</label>
-							<div class='input-container'>
-								<label
-									class='donate-label'
-									for='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
-								>
-									<?php echo esc_html__( 'Donation amount', 'newspack-blocks' ); ?>
-								</label>
-								<div class='wp-block-newspack-blocks-donate__money-input money-input'>
-									<span class='currency'>
-										<?php echo esc_html( $settings['currencySymbol'] ); ?>
-									</span>
-									<input
-										type='number'
-										name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_untiered'
-										value='<?php echo esc_attr( $formatted_amount ); ?>'
-										id='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
-									/>
+					<div class='wp-block-newspack-blocks-donate__frequencies frequencies' style="<?php echo esc_attr( $frequencies_container_styles ); ?>">
+						<?php foreach ( $frequencies as $frequency_slug => $frequency_name ) : ?>
+							<?php
+								$formatted_amount = $configuration['amounts'][ $frequency_slug ][3];
+							?>
+
+							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
+								<?php echo newspack_blocks_render_block_donate_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+								<div class='input-container'>
+									<label
+										class='donate-label'
+										for='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
+									>
+										<?php echo esc_html__( 'Donation amount', 'newspack-blocks' ); ?>
+									</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='0'
+											name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_untiered'
+											value='<?php echo esc_attr( $formatted_amount ); ?>'
+											id='newspack-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-untiered-input'
+										/>
+									</div>
 								</div>
 							</div>
-						</div>
-					<?php endforeach; ?>
+
+						<?php endforeach; ?>
+					</div>
 				</div>
-				<?php echo $form_footer; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+				<?php echo newspack_blocks_render_block_donate_footer( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 			</form>
 		</div>
+
 		<?php
-	else :
+		else :
+			$suggested_amounts = $configuration['amounts'];
+			?>
 
-		?>
-		<div class="wp-block-newspack-blocks-donate wpbnbd tiered <?php echo esc_html( $classname ); ?>">
-			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $settings_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
+		<div class="tiered <?php echo esc_html( $container_classnames ); ?>">
+			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $configuration_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
 				<input type='hidden' name='newspack_donate' value='1' />
 				<div class='wp-block-newspack-blocks-donate__options'>
-					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
+					<div class='wp-block-newspack-blocks-donate__frequencies frequencies' style="<?php echo esc_attr( $frequencies_container_styles ); ?>">
 						<?php foreach ( $frequencies as $frequency_slug => $frequency_name ) : ?>
 
 							<div class='wp-block-newspack-blocks-donate__frequency frequency'>
-								<input
-									type='radio'
-									value='<?php echo esc_attr( $frequency_slug ); ?>'
-									id='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-									name='donation_frequency'
-									<?php checked( $selected_frequency, $frequency_slug ); ?>
-								/>
-								<label
-									for='newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-									class='donation-frequency-label freq-label'
-								>
-									<?php echo esc_html( $frequency_name ); ?>
-								</label>
-
+								<?php echo newspack_blocks_render_block_donate_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 as $index => $suggested_amount ) : ?>
+									<?php foreach ( $suggested_amounts[ $frequency_slug ] as $index => $amount ) : ?>
 										<div class='wp-block-newspack-blocks-donate__tier'>
 											<?php
-												$amount           = 'year' === $frequency_slug || 'once' === $frequency_slug ? 12 * $suggested_amount : $suggested_amount;
-												$formatted_amount = $settings['currencySymbol'] . $amount;
-											?>
-											<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 esc_html( $formatted_amount ); ?>
-											</label>
+											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' ); ?>
+												</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='0'
+														name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_other'
+														value='<?php echo esc_attr( $amount ); ?>'
+														id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
+													/>
+												</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 esc_html( $configuration['currencySymbol'] . $amount ); ?>
+												</label>
+													<?php
+												endif;
+												?>
 										</div>
 									<?php endforeach; ?>
-
-									<div class='wp-block-newspack-blocks-donate__tier'>
-										<?php $amount = 'year' === $frequency_slug || 'once' === $frequency_slug ? 12 * $suggested_amounts[1] : $suggested_amounts[1]; ?>
-										<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='other-donate-label odl'
-											for='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
-										>
-											<?php echo esc_html__( 'Donation amount', 'newspack-blocks' ); ?>
-										</label>
-										<div class='wp-block-newspack-blocks-donate__money-input money-input'>
-											<span class='currency'>
-												<?php echo esc_html( $settings['currencySymbol'] ); ?>
-											</span>
-											<input
-												type='number'
-												name='donation_value_<?php echo esc_attr( $frequency_slug ); ?>_other'
-												value='<?php echo esc_attr( $amount ); ?>'
-												id='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-other-input'
-											/>
-										</div>
-									</div>
-
 								</div>
 							</div>
+
 						<?php endforeach; ?>
 					</div>
 				</div>
-				<?php echo $form_footer; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+				<?php echo newspack_blocks_render_block_donate_footer( $attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 			</form>
 		</div>
-		<?php
+			<?php
 	endif;
 
-	return apply_filters( 'newspack_blocks_donate_block_html', ob_get_clean(), $attributes );
+		return apply_filters( 'newspack_blocks_donate_block_html', ob_get_clean(), $attributes );
 }
 
 /**
  * Registers the `newspack-blocks/donate` block on server.
  */
 function newspack_blocks_register_donate() {
+	$block_json = json_decode(
+		file_get_contents( __DIR__ . '/block.json' ), // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
+		true
+	);
+
 	register_block_type(
-		'newspack-blocks/donate',
-		array(
-			'attributes'      => array(
-				'className'               => [
-					'type' => 'string',
-				],
-				'manual'                  => [
-					'type' => 'boolean',
-				],
-				'suggestedAmounts'        => [
-					'type'    => 'array',
-					'items'   => [
-						'type' => 'number',
-					],
-					'default' => [ 0, 0, 0 ],
-				],
-				'suggestedAmountUntiered' => [
-					'type' => 'number',
-				],
-				'tiered'                  => [
-					'type'    => 'boolean',
-					'default' => true,
-				],
-				'campaign'                => [
-					'type' => 'string',
-				],
-				'thanksText'              => [
-					'type'    => 'string',
-					'default' => __( 'Your contribution is appreciated.', 'newspack-blocks' ),
-				],
-				'buttonText'              => [
-					'type'    => 'string',
-					'default' => __( 'Donate Now', 'newspack-blocks' ),
-				],
-				'defaultFrequency'        => [
-					'type'    => 'string',
-					'default' => 'month',
-				],
-			),
+		'newspack-blocks/' . $block_json['name'],
+		[
+			'attributes'      => $block_json['attributes'],
 			'render_callback' => 'newspack_blocks_render_block_donate',
-			'supports'        => [],
-		)
+			'supports'        => $block_json['supports'],
+		]
 	);
 }
 add_action( 'init', 'newspack_blocks_register_donate' );