@automattic/newspack-blocks 4.28.0 → 4.29.0-alpha.1

package/src/blocks/checkout-button/coupon-control.js

@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { BaseControl, TextControl, FormTokenField, Button, Spinner } from '@wordpress/components';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Searchable WooCommerce coupon picker for the Checkout Button block.
+ *
+ * Type to search existing coupons; selecting one stores its code in the block's
+ * `coupon` attribute, clearing it removes the coupon. Mirrors the product picker.
+ *
+ * @param {Object}   props
+ * @param {string}   props.value    Currently selected coupon code.
+ * @param {Function} props.onChange Called with the selected coupon code (or '').
+ * @return {JSX.Element} The control.
+ */
+export default function CouponControl( { value, onChange } ) {
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( [] );
+	const [ selected, setSelected ] = useState( false );
+	const [ isChanging, setIsChanging ] = useState( false );
+
+	function fetchSuggestions( search ) {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v3/coupons?search=${ encodeURIComponent( search ) }`,
+		} )
+			.then( coupons => {
+				setSuggestions( coupons.map( coupon => coupon.code ) );
+			} )
+			.finally( () => setInFlight( false ) );
+	}
+
+	function fetchSaved() {
+		setInFlight( true );
+		return apiFetch( {
+			path: `/wc/v3/coupons?code=${ encodeURIComponent( value ) }`,
+		} )
+			.then( coupons => {
+				// Keep the stored value even if the lookup returns nothing.
+				setSelected( coupons.length ? coupons[ 0 ].code : value );
+			} )
+			.catch( () => setSelected( value ) )
+			.finally( () => setInFlight( false ) );
+	}
+
+	useEffect( () => {
+		setIsChanging( false );
+		if ( value ) {
+			fetchSaved();
+		} else {
+			setSelected( false );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ value ] );
+
+	function onTokenChange( tokens ) {
+		setIsChanging( false );
+		onChange( tokens[ 0 ] || '' );
+	}
+
+	const debouncedFetch = useMemo(
+		() => debounce( fetchSuggestions, 200 ),
+		// fetchSuggestions only closes over stable state setters, so an empty
+		// dependency array is intentional.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+	);
+
+	// Cancel a pending debounced fetch if the control unmounts, so it can't
+	// fire and update state after the component is gone.
+	useEffect( () => () => debouncedFetch.cancel(), [ debouncedFetch ] );
+
+	function handleInputChange( search ) {
+		if ( search.length > 2 ) {
+			setInFlight( true );
+			debouncedFetch( search );
+		} else {
+			// Cancel any fetch queued for a longer previous query so it can't
+			// fire after the input was shortened or cleared.
+			debouncedFetch.cancel();
+			setInFlight( false );
+		}
+	}
+
+	if ( value && ! selected && inFlight ) {
+		return <Spinner />;
+	}
+
+	if ( selected && ! isChanging ) {
+		return (
+			<div className="newspack-checkout-button__coupon-field">
+				<BaseControl label={ __( 'Coupon', 'newspack-blocks' ) } id="newspack-checkout-button-coupon">
+					<TextControl value={ selected } __next40pxDefaultSize disabled />
+					<Button variant="link" onClick={ () => setIsChanging( true ) }>
+						{ __( 'Edit', 'newspack-blocks' ) }
+					</Button>{ ' ' }
+					<Button
+						variant="link"
+						isDestructive
+						onClick={ () => {
+							setSelected( false );
+							onChange( '' );
+						} }
+					>
+						{ __( 'Remove', 'newspack-blocks' ) }
+					</Button>
+				</BaseControl>
+			</div>
+		);
+	}
+
+	return (
+		<div className="newspack-checkout-button__coupon-field">
+			<FormTokenField
+				placeholder={ __( 'Type to search for a coupon…', 'newspack-blocks' ) }
+				label={ __( 'Coupon', 'newspack-blocks' ) }
+				maxLength={ 1 }
+				value={ [] }
+				onChange={ onTokenChange }
+				onInputChange={ handleInputChange }
+				suggestions={ suggestions }
+				__next40pxDefaultSize
+			/>
+			{ inFlight && <Spinner /> }
+			{ selected && (
+				<Button variant="link" onClick={ () => setIsChanging( false ) }>
+					{ __( 'Cancel', 'newspack-blocks' ) }
+				</Button>
+			) }
+		</div>
+	);
+}

package/src/blocks/checkout-button/edit.js

@@ -41,6 +41,7 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import './edit.scss';
 import RedirectAfterSuccess from '../../components/redirect-after-success';
+import CouponControl from './coupon-control';
 
 function getVariationName( variation ) {
 	const attributes = [];
@@ -158,7 +159,7 @@ function ProductControl( props ) {
 		return <Spinner />;
 	}
 	return (
-		<div className="newspack-checkout-button__product-field" style={ { marginBottom: '16px' } }>
+		<div className="newspack-checkout-button__product-field">
 			{ selected && ! isChanging ? (
 				<>
 					<BaseControl label={ __( 'Product', 'newspack-blocks' ) } id="selected-product-control">
@@ -201,7 +202,7 @@ function ProductControl( props ) {
 
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
-	const { placeholder, style, text, product, price, variation, width } = attributes;
+	const { placeholder, style, text, product, price, variation, width, coupon } = attributes;
 
 	const [ productData, setProductData ] = useState( {} );
 	const [ variations, setVariations ] = useState( [] );
@@ -337,6 +338,9 @@ function CheckoutButtonEdit( props ) {
 							</>
 						) }
 					</ProductControl>
+					{ newspack_blocks_data?.coupons_enabled && (
+						<CouponControl value={ coupon } onChange={ value => setAttributes( { coupon: value } ) } />
+					) }
 					<WidthControl selectedWidth={ width } setAttributes={ setAttributes } />
 				</PanelBody>
 				<PanelBody title={ __( 'After purchase', 'newspack-blocks' ) }>

package/src/blocks/checkout-button/edit.scss

@@ -1,7 +1,9 @@
 @use "newspack-colors" as np-colors;
 
 .newspack-checkout-button {
-	&__product-field {
+	&__product-field,
+	&__coupon-field {
+		margin-bottom: 16px;
 		&__error {
 			color: np-colors.$error-500;
 			font-size: 0.9em;
@@ -64,4 +66,3 @@
 		width: auto;
 	}
 }
-

package/src/blocks/checkout-button/view.php

@@ -62,6 +62,7 @@ function render_callback( $attributes ) {
 	$after_success_behavior     = $attributes['afterSuccessBehavior'] ?? '';
 	$after_success_button_label = $attributes['afterSuccessButtonLabel'] ?? '';
 	$after_success_url          = $attributes['afterSuccessURL'] ?? '';
+	$coupon                     = $attributes['coupon'] ?? '';
 	$is_variable                = $attributes['is_variable'];
 
 	if ( $is_variable && $variation_id ) {
@@ -114,6 +115,12 @@ function render_callback( $attributes ) {
 		$hidden_fields .= $after_success_button_label ? '<input type="hidden" name="after_success_button_label" value="' . esc_attr( $after_success_button_label ) . '" />' : '';
 		$hidden_fields .= $after_success_url ? '<input type="hidden" name="after_success_url" value="' . esc_attr( $after_success_url ) . '" />' : '';
 	}
+	// Always emit the coupon field (not gated on the gateway check): it is
+	// applied server-side for both the modal and the redirect checkout flows.
+	// Strict check so a coupon code of "0" is still emitted.
+	if ( '' !== $coupon ) {
+		$hidden_fields .= '<input type="hidden" name="coupon" value="' . esc_attr( $coupon ) . '" />';
+	}
 
 	ob_start();
 	/**
@@ -153,8 +160,8 @@ function render_callback( $attributes ) {
 		$checkout_data = Checkout_Data::get_checkout_data( $product );
 
 		$form = sprintf(
-			'<form data-checkout="%1$s">%2$s %3$s</form>',
-			esc_attr( wp_json_encode( $checkout_data ) ),
+			'<form %1$s>%2$s %3$s</form>',
+			Checkout_Data::data_checkout_attr( $checkout_data ),
 			$button,
 			$hidden_fields
 		);

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

@@ -177,7 +177,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 								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 Checkout_Data::print_data_checkout_attr( 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 ?>
@@ -262,7 +262,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 										?>
 										<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 Checkout_Data::print_data_checkout_attr( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ); ?>
 										>
 											<?php if ( 3 === $index ) : // The "other" tier. ?>
 												<input

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

@@ -64,7 +64,7 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 							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 Checkout_Data::print_data_checkout_attr( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ); ?>
 						>
 							<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $amount, $frequency_slug ) ); ?>
 						</span>

package/src/modal-checkout/checkout.scss

@@ -95,56 +95,12 @@
 			}
 
 			.order-review-wrapper {
-				// Collapse and expand Transaction Details.
-				// stylelint-disable-next-line selector-id-pattern
-				#order_review_heading {
-					border-radius: 0;
-					min-height: 0;
-					padding: 0;
-
-					&:hover {
-						background: transparent;
-						color: var(--newspack-ui-color-neutral-60);
-					}
-
-					&:focus-visible {
-						outline: 0;
-						text-decoration: underline;
-					}
-
-					svg {
-						margin: 0 -8px;
-						transition: rotate 125ms ease-in-out;
-					}
-				}
+				margin-bottom: var(--newspack-ui-spacer-5, 24px);
 
 				// stylelint-disable-next-line selector-id-pattern
 				#order_review {
 					margin: 0;
 				}
-
-				.transaction-details-content {
-					display: grid;
-					grid-template-rows: 0fr;
-					margin-bottom: var(--newspack-ui-spacer-2, 12px);
-					transition: grid-template-rows 250ms ease-in-out;
-				}
-
-				.transaction-details-content-inner {
-					overflow: hidden;
-				}
-			}
-
-			&.transaction-details-expanded {
-				// stylelint-disable-next-line selector-id-pattern
-				#order_review_heading svg {
-					rotate: 180deg;
-				}
-
-				.transaction-details-content {
-					grid-template-rows: 1fr;
-					margin-bottom: var(--newspack-ui-spacer-5, 24px);
-				}
 			}
 		}
 
@@ -410,14 +366,6 @@
 		}
 	}
 
-	// Checkout form heading.
-	.woocommerce .order-details-summary {
-		// Top margin not needed in newspack ui modal.
-		h2 {
-			margin-top: 0;
-		}
-	}
-
 	// Override checkout payment method box.
 
 	.wc_payment_methods {

package/src/modal-checkout/index.js

@@ -189,110 +189,23 @@ import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 						$wrapper.removeClass( 'hidden' );
 					}
 
-					const $details = $( '#after_customer_details' );
-					const expanded = $details.hasClass( 'transaction-details-expanded' );
-
 					// Move new order review table to the payment methods.
 					const $payment_methods = $( '.payment_methods' );
 					if ( $payment_methods.length ) {
 						const $el = $wrapper.clone();
-						// Make sure Transaction Details toggle's aria-expanded value is correct in cloned version.
-						if ( expanded ) {
-							$( '[id="order_review_heading"]', $el ).attr( 'aria-expanded', 'true' );
-						}
 						$( '.order-review-wrapper' ).remove();
 						$payment_methods.after( $el );
-					} else if ( ! expanded ) {
-						// If there's no payment method, make sure to expand the Transaction Details on load.
-						$wrapper.find( '#order_review_heading' ).trigger( 'click' );
 					}
 				} );
 
 				/**
-				 * Keep the static product summary aligned with recalculated order-review totals.
+				 * Serialize the checkout form for cart-recalculation AJAX requests.
 				 */
-				function setProductSummary( productDetails, allowHtml = true ) {
-					const $productDetails = $( '#modal-checkout-product-details strong' );
-					if ( ! $productDetails.length || ! productDetails ) {
-						return false;
-					}
-					if ( allowHtml && $productDetails.html() !== productDetails ) {
-						$productDetails.html( productDetails );
-					} else if ( ! allowHtml && $productDetails.text() !== productDetails ) {
-						$productDetails.text( productDetails );
-					}
-					return true;
-				}
-				let productSummaryRequest = false;
 				function getCheckoutPostData() {
 					const $checkoutForm = $( 'form.checkout' );
 					// Repeat-trial checks can only resolve once the checkout form includes a billing email.
 					return $checkoutForm.length ? $checkoutForm.serialize() : '';
 				}
-				function requestUpdatedProductSummary() {
-					if ( productSummaryRequest ) {
-						productSummaryRequest.abort();
-					}
-					const request = $.ajax( {
-						url: newspackBlocksModalCheckout.ajax_url,
-						method: 'POST',
-						data: {
-							action: 'get_cart_product_summary',
-							modal_checkout: 1,
-							post_data: getCheckoutPostData(),
-						},
-						success: response => {
-							if ( productSummaryRequest === request ) {
-								setProductSummary( response );
-							}
-						},
-						complete: () => {
-							if ( productSummaryRequest === request ) {
-								productSummaryRequest = false;
-							}
-						},
-					} );
-					productSummaryRequest = request;
-				}
-				function updateProductSummaryFromOrderReview() {
-					const $cartItem = $( '.order-review-wrapper .woocommerce-checkout-review-order-table tr.cart_item' ).first();
-					if ( ! $cartItem.length ) {
-						return false;
-					}
-
-					const $productName = $cartItem.find( '.product-name' ).clone();
-					$productName.find( '.product-quantity' ).remove();
-					// Keep the DOM path text-only; the AJAX fallback is the HTML path because PHP runs it through wp_kses.
-					const productName = $productName.text().replace( /\s+/g, ' ' ).trim();
-					const productTotal = $cartItem.find( '.product-total' ).text().replace( /\s+/g, ' ' ).trim();
-					if ( productName && productTotal ) {
-						return setProductSummary( `${ productName }: ${ productTotal }`, false );
-					}
-					return false;
-				}
-				function syncProductSummary() {
-					if ( updateProductSummaryFromOrderReview() ) {
-						if ( productSummaryRequest ) {
-							productSummaryRequest.abort();
-							productSummaryRequest = false;
-						}
-						return;
-					}
-					requestUpdatedProductSummary();
-				}
-				$( document ).on( 'updated_checkout', syncProductSummary );
-
-				/**
-				 * Toggle Transaction Details
-				 */
-				$( document ).on( 'click', '#order_review_heading', function () {
-					// Toggle the aria-expanded attribute.
-					$( this ).attr( 'aria-expanded', function ( index, attr ) {
-						return attr === 'false' ? 'true' : 'false';
-					} );
-					// Toggle the CSS class to show/hide the Transaction Details.
-					$( '#after_customer_details' ).toggleClass( 'transaction-details-expanded' );
-				} );
 
 				/**
 				 * Get updated cart total to update the "Place Order" button.
@@ -748,7 +661,12 @@ import { domReady, onCheckoutPlaceOrderProcessing } from './utils';
 						}
 					}
 
-					$( '.order-details-summary' ).after( '<div id="checkout_details">' + html.join( '' ) + '</div>' );
+					// Anchor the summary to the hidden product-details carrier, falling back to
+					// #after_customer_details when the carrier isn't present (e.g. multi-item carts).
+					const $anchor = $( '#modal-checkout-product-details' ).length
+						? $( '#modal-checkout-product-details' )
+						: $( '#after_customer_details' );
+					$anchor.after( '<div id="checkout_details">' + html.join( '' ) + '</div>' );
 				}
 
 				/**

package/src/modal-checkout/modal.js

@@ -165,12 +165,6 @@ domReady( () => {
 		onCheckoutPlaceOrderError( container, hideProcessingPaymentScreen );
 
 		onCheckoutReady( container, () => {
-			// Make sure the order summary renders the correct text.
-			const summaryTextNode = productDetails?.querySelector( 'strong' );
-			if ( summaryTextNode ) {
-				summaryTextNode.textContent = checkoutData.price_summary;
-			}
-
 			// Display initial errors if any.
 			if ( modalCheckout.initialErrors ) {
 				const errorContainer = document.createElement( 'div' );
@@ -444,11 +438,6 @@ domReady( () => {
 		if ( shouldPromptRegistration() ) {
 			ev.preventDefault();
 
-			const priceSummary = checkoutData.price_summary;
-			const content = priceSummary
-				? `<div class="order-details-summary ${ CLASS_PREFIX }__box ${ CLASS_PREFIX }__box--text-center"><p><strong>${ priceSummary }</strong></p></div>`
-				: '';
-
 			// Generate cart asynchroneously.
 			const cartReq = generateCart( checkoutData );
 
@@ -499,7 +488,6 @@ domReady( () => {
 						title: newspackBlocksModal.labels.register_modal_title,
 					},
 				},
-				content,
 				trigger: ev.submitter,
 				closeOnSuccess: isModalCheckout,
 			} );

package/src/modal-checkout/templates/form-checkout.php

@@ -42,27 +42,17 @@ if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_requir
 			?>
 			<div class="order-review-wrapper hidden">
 				<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
-				<button id="order_review_heading" aria-expanded="false" aria-controls="order_review_content" class="newspack-ui__button newspack-ui__button--ghost" type="button">
-					<?php esc_html_e( 'Transaction details', 'newspack-blocks' ); ?>
-					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<path d="M15.9899 10.8888L12.0018 14.3071L8.01368 10.8888L8.98986 9.74988L12.0018 12.3315L15.0137 9.74988L15.9899 10.8888Z"/>
-					</svg>
-				</button>
-				<div class="transaction-details-content">
-					<div class="transaction-details-content-inner" id="order_review_content">
-						<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
-						<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
-							<?php
-							if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
-								woocommerce_order_review();
-							} else {
-								do_action( 'woocommerce_checkout_order_review' );
-							}
-							?>
-						</div>
-						<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
-					</div>
+				<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
+				<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
+					<?php
+					if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
+						woocommerce_order_review();
+					} else {
+						do_action( 'woocommerce_checkout_order_review' );
+					}
+					?>
 				</div>
+				<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
 			</div>
 			<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
 			<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide" id="checkout_edit_billing" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_edit_billing' ) ); ?></button>

package/src/modal-checkout/templates/form-coupon.php

@@ -12,6 +12,15 @@ if ( ! wc_coupons_enabled() ) { // @codingStandardsIgnoreLine.
 	return;
 }
 
+// Hide the coupon form when a coupon was auto-applied from a Checkout Button
+// block — the reader didn't enter the code, so don't prompt them for one.
+if (
+	class_exists( '\Newspack_Blocks\Modal_Checkout' )
+	&& \Newspack_Blocks\Modal_Checkout::should_hide_coupon_form()
+) {
+	return;
+}
+
 ?>
 <form class="modal_checkout_coupon woocommerce-form-coupon" method="post">
 	<h3><?php esc_html_e( 'Apply a coupon code', 'newspack-blocks' ); ?></h3>

package/src/modal-checkout/templates/thankyou.php

@@ -60,7 +60,7 @@ $checkout_data          = Checkout_Data::get_checkout_data( $order );
 				<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
 			</svg>
 		</span>
-		<p id="modal-checkout-product-details" data-checkout='<?php echo wp_json_encode( $checkout_data ); ?>'>
+		<p id="modal-checkout-product-details" <?php Checkout_Data::print_data_checkout_attr( $checkout_data ); ?>>
 			<strong>
 				<?php
 					echo esc_html( Modal_Checkout::get_post_checkout_success_text() );

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => 'f937e9f691dbdb938f7478a05bc22d51b771311f',
+        'reference' => '559ee55cab1698e9bea567b8f4bb267cc577fef7',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => 'f937e9f691dbdb938f7478a05bc22d51b771311f',
+            'reference' => '559ee55cab1698e9bea567b8f4bb267cc577fef7',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),

package/webpack.config.js

@@ -9,6 +9,7 @@
  */
 const fs = require( 'fs' );
 const getBaseWebpackConfig = require( 'newspack-scripts/config/getWebpackConfig' );
+const { findSourceFile, resolveSourceFile } = require( 'newspack-scripts/config/resolveSource' );
 const path = require( 'path' );
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const blockListFile = process.env.npm_config_block_list || 'block-list.json';
@@ -20,26 +21,19 @@ const blockList = JSON.parse( fs.readFileSync( blockListFile ) );
 const editorSetup = path.join( __dirname, 'src', 'setup', 'editor' );
 
 function blockScripts( type, inputDir, blocks ) {
-	return blocks.map( block => path.join( inputDir, 'blocks', block, `${ type }.js` ) ).filter( fs.existsSync );
+	return blocks.map( block => findSourceFile( path.join( inputDir, 'blocks', block, type ) ) ).filter( Boolean );
 }
 
 const blocksDir = path.join( __dirname, 'src', 'blocks' );
 const blocks = fs
 	.readdirSync( blocksDir )
 	.filter( block => isDevelopment || blockList.production.includes( block ) )
-	.filter( block => fs.existsSync( path.join( __dirname, 'src', 'blocks', block, 'editor.js' ) ) );
+	.filter( block => findSourceFile( path.join( blocksDir, block, 'editor' ) ) );
 
 // Helps split up each block into its own folder view script
 const viewBlocksScripts = blocks.reduce( ( viewBlocks, block ) => {
-	const pathToBlock = [ __dirname, 'src', 'blocks', block ];
-	let viewScriptPath = path.join( ...pathToBlock, 'view.js' );
-	let fileExists = fs.existsSync( viewScriptPath );
-	if ( ! fileExists ) {
-		// Try TS.
-		viewScriptPath = path.join( ...pathToBlock, 'view.ts' );
-		fileExists = fs.existsSync( viewScriptPath );
-	}
-	if ( fileExists ) {
+	const viewScriptPath = findSourceFile( path.join( blocksDir, block, 'view' ) );
+	if ( viewScriptPath ) {
 		viewBlocks[ block + '/view' ] = viewScriptPath;
 	}
 	return viewBlocks;
@@ -56,7 +50,7 @@ const entry = {
 	placeholder_blocks: placeholderBlocksScript,
 	editor: editorScript,
 	block_styles: blockStylesScript,
-	modal: path.join( __dirname, 'src/modal-checkout/modal.js' ),
+	modal: resolveSourceFile( path.join( __dirname, 'src/modal-checkout/modal' ) ),
 	modalCheckout: path.join( __dirname, 'src/modal-checkout' ),
 	frequencyBased: path.join( __dirname, 'src/blocks/donate/frequency-based' ),
 	tiersBased: path.join( __dirname, 'src/blocks/donate/tiers-based' ),