@automattic/newspack-blocks 1.67.0 → 1.68.0

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

@@ -14,25 +14,11 @@ require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-new
  * Server-side rendering of the `newspack-blocks/donate` block.
  */
 class Newspack_Blocks_Donate_Renderer {
-	/**
-	 * Whether the modal checkout is used by donate any block.
-	 *
-	 * @var boolean
-	 */
-	private static $has_modal_checkout = false;
-
 	/**
 	 * Constructor.
 	 */
 	public function __construct() {
 		add_filter( 'woocommerce_checkout_fields', [ __CLASS__, 'woocommerce_checkout_fields' ] );
-		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'enqueue_modal_checkout_scripts' ] );
-		add_action( 'wp_footer', [ __CLASS__, 'render_modal_checkout_markup' ] );
-		add_action( 'template_include', [ __CLASS__, 'get_modal_checkout_template' ] );
-		add_filter( 'wc_get_template', [ __CLASS__, 'wc_get_template' ], 10, 2 );
-		add_filter( 'show_admin_bar', [ __CLASS__, 'show_admin_bar' ] );
-		add_filter( 'woocommerce_checkout_get_value', [ __CLASS__, 'woocommerce_checkout_get_value' ], 10, 2 );
-		add_filter( 'woocommerce_get_return_url', [ __CLASS__, 'woocommerce_get_return_url' ], 10, 2 );
 	}
 
 	/**
@@ -82,19 +68,6 @@ class Newspack_Blocks_Donate_Renderer {
 		return $fields;
 	}
 
-	/**
-	 * Enqueue scripts for the checkout page rendered in a modal.
-	 */
-	public static function enqueue_modal_checkout_scripts() {
-		if ( ! function_exists( 'is_checkout' ) || ! is_checkout() ) {
-			return;
-		}
-		if ( ! isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return;
-		}
-		self::enqueue_scripts( 'modal-checkout', [] );
-	}
-
 	/**
 	 * Enqueue frontend scripts and styles.
 	 *
@@ -119,13 +92,6 @@ class Newspack_Blocks_Donate_Renderer {
 			case 'tiers-based':
 				$filename = 'tiersBased';
 				break;
-			case 'modal-checkout':
-				$filename = 'donateCheckoutModal';
-				break;
-			case 'modal-checkout-block':
-				$filename = 'donateCheckoutBlock';
-				$has_css  = false;
-				break;
 			default:
 				$filename = false;
 				break;
@@ -183,8 +149,7 @@ class Newspack_Blocks_Donate_Renderer {
 		wp_script_add_data( 'newspack-blocks-donate', 'amp-plus', true );
 
 		if ( true === $attributes['useModalCheckout'] && ! $configuration['is_rendering_stripe_payment_form'] ) {
-			self::enqueue_scripts( 'modal-checkout-block' );
-			self::$has_modal_checkout = true;
+			\Newspack_Blocks\Modal_Checkout::enqueue_modal();
 		}
 
 		if ( $configuration['is_tier_based_layout'] ) {
@@ -195,202 +160,5 @@ class Newspack_Blocks_Donate_Renderer {
 			return Newspack_Blocks_Donate_Renderer_Frequency_Based::render( $attributes );
 		}
 	}
-
-	/**
-	 * Render the markup necessary for the modal checkout.
-	 */
-	public static function render_modal_checkout_markup() {
-		if ( ! self::$has_modal_checkout ) {
-			return;
-		}
-		?>
-		<div class="newspack-blocks-donate-checkout-modal" style="display: none;">
-			<div class="newspack-blocks-donate-checkout-modal__content">
-				<a href="#" class="newspack-blocks-donate-checkout-modal__close">
-					<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
-						<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-					</svg>
-				</a>
-				<div class="newspack-blocks-donate-checkout-modal__spinner">
-					<span></span>
-				</div>
-			</div>
-		</div>
-		<?php
-	}
-
-	/**
-	 * Return URL for modal checkout "thank you" page.
-	 *
-	 * @param string $url The URL to redirect to.
-	 *
-	 * @return string
-	 */
-	public static function woocommerce_get_return_url( $url ) {
-		if ( ! isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return $url;
-		}
-		return add_query_arg(
-			[
-				'modal_checkout' => '1',
-				'email'          => isset( $_REQUEST['billing_email'] ) ? rawurlencode( sanitize_email( wp_unslash( $_REQUEST['billing_email'] ) ) ) : '', // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			],
-			$url
-		);
-	}
-
-	/**
-	 * Disable admin bar for modal checkout.
-	 *
-	 * @param bool $show Whether to show the admin bar.
-	 *
-	 * @return bool
-	 */
-	public static function show_admin_bar( $show ) {
-		if ( ! isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return $show;
-		}
-		return false;
-	}
-
-	/**
-	 * Use stripped down template for modal checkout.
-	 *
-	 * @param string $template The template to render.
-	 *
-	 * @return string
-	 */
-	public static function get_modal_checkout_template( $template ) {
-		if ( ! function_exists( 'is_checkout' ) || ! function_exists( 'is_order_received_page' ) ) {
-			return $template;
-		}
-		if ( ! is_checkout() && ! is_order_received_page() ) {
-			return $template;
-		}
-		if ( ! isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return $template;
-		}
-		ob_start();
-		wp_head();
-		while ( have_posts() ) {
-			the_post();
-			echo '<div id="newspack_modal_checkout">';
-			the_content();
-			echo '</div>';
-		}
-		wp_footer();
-		ob_end_flush();
-	}
-
-	/**
-	 * Check the nonce for the edit billing request.
-	 *
-	 * @return bool
-	 */
-	private static function validate_edit_billing_request() {
-		if ( ! isset( $_REQUEST['newspack_donate_edit_billing_nonce'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return false;
-		}
-		if ( ! wp_verify_nonce( sanitize_key( $_REQUEST['newspack_donate_edit_billing_nonce'] ), 'newspack_donate_edit_billing' ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return false;
-		}
-		return true;
-	}
-
-	/**
-	 * Get the prefilled values for billing fields.
-	 *
-	 * @return array
-	 */
-	public static function get_prefilled_fields() {
-		$checkout        = WC()->checkout();
-		$fields          = $checkout->get_checkout_fields( 'billing' );
-		$customer        = new WC_Customer( get_current_user_id() );
-		$customer_fields = $customer->get_billing();
-		// If the user is logged in and there's no billing email, use the user's email.
-		if ( is_user_logged_in() && empty( $customer_fields['email'] ) ) {
-			$customer_fields['email'] = $customer->get_email();
-		}
-		$valid_request    = self::validate_edit_billing_request();
-		$prefilled_fields = [];
-		foreach ( $fields as $key => $field ) {
-			$key = str_replace( 'billing_', '', $key );
-			if ( $valid_request && isset( $_REQUEST[ 'billing_' . $key ] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-				$value = sanitize_text_field( wp_unslash( $_REQUEST[ 'billing_' . $key ] ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			} elseif ( isset( $customer_fields[ $key ] ) ) {
-				$value = $customer_fields[ $key ];
-			}
-			$prefilled_fields[ $key ] = $value;
-		}
-		return $prefilled_fields;
-	}
-
-	/**
-	 * Whether the current checkout session has all required billing fields filled.
-	 *
-	 * @return bool
-	 */
-	public static function has_filled_required_fields() {
-		$checkout        = WC()->checkout();
-		$fields          = $checkout->get_checkout_fields( 'billing' );
-		$required        = array_filter(
-			$fields,
-			function( $field ) {
-				return isset( $field['required'] ) && $field['required'];
-			}
-		);
-		$required_keys   = array_keys( $required );
-		$customer_fields = self::get_prefilled_fields();
-		$is_request      = self::validate_edit_billing_request();
-		foreach ( $required_keys as $key ) {
-			$key = str_replace( 'billing_', '', $key );
-			if ( empty( $customer_fields[ $key ] ) ) {
-				if ( $is_request ) {
-					/* translators: %s: field name */
-					wc_add_notice( sprintf( __( '%s is a required field.', 'newspack-blocks' ), $fields[ 'billing_' . $key ]['label'] ), 'error' );
-				}
-				return false;
-			}
-		}
-		return true;
-	}
-
-	/**
-	 * Modify WC checkout field value.
-	 *
-	 * @param null   $value Value.
-	 * @param string $input Input name.
-	 *
-	 * @return string|null Value or null if unaltered.
-	 */
-	public static function woocommerce_checkout_get_value( $value, $input ) {
-		if ( ! isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			return $value;
-		}
-		$valid_request = self::validate_edit_billing_request(); // This performs nonce verification.
-		if ( ! $valid_request ) {
-			return $value;
-		}
-		if ( isset( $_REQUEST[ $input ] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			$value = sanitize_text_field( wp_unslash( $_REQUEST[ $input ] ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		}
-		return $value;
-	}
-
-	/**
-	 * Use modal checkout template when rendering the checkout form.
-	 *
-	 * @param string $located       Template file.
-	 * @param string $template_name Template name.
-	 *
-	 * @return string Template file.
-	 */
-	public static function wc_get_template( $located, $template_name ) {
-		if ( 'checkout/form-checkout.php' === $template_name && isset( $_REQUEST['modal_checkout'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-			$located = NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/templates/checkout-form.php';
-		}
-		return $located;
-	}
 }
 new Newspack_Blocks_Donate_Renderer();

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

@@ -3,18 +3,6 @@
 
 @use './style-variations';
 
-@keyframes spin {
-	0% {
-		transform: rotate( 0deg );
-	}
-	50% {
-		transform: rotate( 180deg );
-	}
-	100% {
-		transform: rotate( 360deg );
-	}
-}
-
 .wpbnbd {
 	&__button {
 		border: 0 solid variables.$color__border;
@@ -34,86 +22,3 @@
 		background-color: transparent;
 	}
 }
-
-.newspack-blocks-donate-checkout-modal {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba( 0, 0, 0, 0.75 );
-	z-index: 99999;
-	&__content {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: calc( 100vw - 32px );
-		max-width: 580px;
-		min-height: 200px;
-		max-height: calc( 100vh - 32px );
-		background: colors.$color__background-body;
-		border-radius: 5px;
-		> *:not( .newspack-blocks-donate-checkout-modal__close ) {
-			width: 100%;
-			height: 100%;
-			border: 0;
-			border-radius: 5px;
-		}
-	}
-	&__spinner {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: #fff;
-		border-radius: 5px;
-		> span {
-			width: 25px;
-			height: 25px;
-			border: 2px solid colors.$color__background-body;
-			border-top-color: colors.$color__text-light;
-			border-radius: 50%;
-			animation: spin 1s infinite linear;
-		}
-	}
-	&__close {
-		position: absolute;
-		top: 0;
-		right: 0;
-		padding: 8px;
-		border: 0;
-		background: transparent;
-		color: colors.$color__text-main;
-		cursor: pointer;
-		&:focus,
-		&:hover {
-			color: colors.$color__text-light;
-		}
-		svg {
-			display: block;
-		}
-	}
-}
-
-@media ( max-width: 600px ) {
-	.newspack-blocks-donate-checkout-modal {
-		&__content {
-			max-width: 100%;
-			width: 100%;
-			border-radius: 0;
-			top: auto;
-			bottom: 0;
-			left: 0;
-			transform: none;
-			> *:not( .newspack-blocks-donate-checkout-modal__close ) {
-				border-radius: 0;
-			}
-		}
-	}
-}

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

@@ -105,6 +105,11 @@
 			"default": [],
 			"items": { "type": "integer" }
 		},
+		"brands": {
+			"type": "array",
+			"default": [],
+			"items": { "type": "integer" }
+		},
 		"tagExclusions": {
 			"type": "array",
 			"default": [],

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

@@ -72,6 +72,15 @@ if (
 	IS_SUBTITLE_SUPPORTED_IN_THEME = true;
 }
 
+let IS_MULTIBRANDED_SITE;
+if (
+	typeof window === 'object' &&
+	window.newspack_blocks_data &&
+	window.newspack_blocks_data.multibranded_sites_enabled
+) {
+	IS_MULTIBRANDED_SITE = true;
+}
+
 const landscapeIcon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 		<Path
@@ -266,6 +275,7 @@ class Edit extends Component {
 			specificPosts,
 			postsToShow,
 			categories,
+			brands,
 			columns,
 			colGap,
 			postType,
@@ -342,6 +352,13 @@ class Edit extends Component {
 
 		const handleAttributeChange = key => value => setAttributes( { [ key ]: value } );
 
+		const brandProps = IS_MULTIBRANDED_SITE
+			? {
+					brands,
+					onBrandsChange: handleAttributeChange( 'brands' ),
+			  }
+			: '';
+
 		return (
 			<Fragment>
 				<PanelBody title={ __( 'Display Settings', 'newspack-blocks' ) } initialOpen={ true }>
@@ -360,6 +377,7 @@ class Edit extends Component {
 						onCategoriesChange={ handleAttributeChange( 'categories' ) }
 						tags={ tags }
 						onTagsChange={ handleAttributeChange( 'tags' ) }
+						{ ...brandProps }
 						tagExclusions={ tagExclusions }
 						onTagExclusionsChange={ handleAttributeChange( 'tagExclusions' ) }
 						categoryExclusions={ categoryExclusions }

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

@@ -29,6 +29,7 @@ const POST_QUERY_ATTRIBUTES = [
 	'categories',
 	'excerptLength',
 	'tags',
+	'brands',
 	'showExcerpt',
 	'specificPosts',
 	'specificMode',
@@ -46,6 +47,7 @@ type HomepageArticlesAttributes = {
 	postType: PostType[];
 	showExcerpt: boolean;
 	tags: TagId[];
+	brands: BrandId[];
 	specificPosts: string[];
 	specificMode: boolean;
 	tagExclusions: TagId[];
@@ -89,6 +91,7 @@ export const queryCriteriaFromAttributes = ( attributes: Block[ 'attributes' ] )
 		postType,
 		showExcerpt,
 		tags,
+		brands,
 		specificPosts = [],
 		specificMode,
 		tagExclusions,
@@ -112,6 +115,7 @@ export const queryCriteriaFromAttributes = ( attributes: Block[ 'attributes' ] )
 					tags,
 					tagExclusions,
 					categoryExclusions,
+					brands,
 					postType,
 					includedPostStatuses,
 			  },

package/src/components/query-controls.js

@@ -16,6 +16,9 @@ import AutocompleteTokenField from './autocomplete-tokenfield';
 const getCategoryTitle = category =>
 	decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' );
 
+const getBrandTitle = brand =>
+	decodeEntities( brand.name ) || __( '(no title)', 'newspack-blocks' );
+
 class QueryControls extends Component {
 	state = {
 		showAdvancedFilters: false,
@@ -166,6 +169,51 @@ class QueryControls extends Component {
 		} );
 	};
 
+	fetchBrandSuggestions = search => {
+		return apiFetch( {
+			path: addQueryArgs( '/wp/v2/brand', {
+				search,
+				per_page: 20,
+				_fields: 'id,name,parent',
+				orderby: 'count',
+				order: 'desc',
+			} ),
+		} ).then( brands =>
+			Promise.all(
+				brands.map( brand => {
+					if ( brand.parent > 0 ) {
+						return apiFetch( {
+							path: addQueryArgs( `/wp/v2/brand/${ brand.parent }`, {
+								_fields: 'name',
+							} ),
+						} ).then( parentBrand => ( {
+							value: brand.id,
+							label: `${ getBrandTitle( brand ) } – ${ getBrandTitle( parentBrand ) }`,
+						} ) );
+					}
+					return Promise.resolve( {
+						value: brand.id,
+						label: getBrandTitle( brand ),
+					} );
+				} )
+			)
+		);
+	};
+	fetchSavedBrands = brandIDs => {
+		return apiFetch( {
+			path: addQueryArgs( '/wp/v2/brand', {
+				per_page: 100,
+				_fields: 'id,name',
+				include: brandIDs.join( ',' ),
+			} ),
+		} ).then( function ( brands ) {
+			return brands.map( brand => ( {
+				value: brand.id,
+				label: decodeEntities( brand.name ) || __( '(no title)', 'newspack-blocks' ),
+			} ) );
+		} );
+	};
+
 	render = () => {
 		const {
 			specificMode,
@@ -178,6 +226,8 @@ class QueryControls extends Component {
 			onCategoriesChange,
 			tags,
 			onTagsChange,
+			brands,
+			onBrandsChange,
 			tagExclusions,
 			onTagExclusionsChange,
 			categoryExclusions,
@@ -237,6 +287,15 @@ class QueryControls extends Component {
 								label={ __( 'Tags', 'newspack-blocks' ) }
 							/>
 						) }
+						{ onBrandsChange && (
+							<AutocompleteTokenField
+								tokens={ brands || [] }
+								onChange={ onBrandsChange }
+								fetchSuggestions={ this.fetchBrandSuggestions }
+								fetchSavedInfo={ this.fetchSavedBrands }
+								label={ __( 'Brands', 'newspack-blocks' ) }
+							/>
+						) }
 						{ onTagExclusionsChange && (
 							<p>
 								<Button
@@ -284,6 +343,7 @@ QueryControls.defaultProps = {
 	authors: [],
 	categories: [],
 	tags: [],
+	brands: [],
 	tagExclusions: [],
 };
 

package/src/{blocks/donate/checkout-modal/view.scss → modal-checkout/checkout.scss}

@@ -1,4 +1,4 @@
-@use '../../../shared/sass/colors';
+@use '../shared/sass/colors';
 
 #newspack_modal_checkout { /* stylelint-disable-line */
 	padding: 32px;

package/src/modal-checkout/index.js

@@ -0,0 +1,4 @@
+/**
+ * Style dependencies
+ */
+import './checkout.scss';

package/src/{blocks/donate/checkout-modal/block.js → modal-checkout/modal.js}

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import './modal.scss';
+
 /**
  * Specify a function to execute when the DOM is fully loaded.
  *
@@ -20,6 +25,8 @@ function domReady( callback ) {
 	document.addEventListener( 'DOMContentLoaded', callback );
 }
 
+const triggers = '.wpbnbd.wpbnbd--platform-wc,.wp-block-newspack-blocks-checkout-button';
+
 let iframeResizeObserver;
 
 function closeCheckout( element ) {
@@ -33,25 +40,23 @@ function closeCheckout( element ) {
 }
 
 domReady( () => {
-	const modalCheckout = document.querySelector( '.newspack-blocks-donate-checkout-modal' );
+	const modalCheckout = document.querySelector( '.newspack-blocks-checkout-modal' );
 	if ( ! modalCheckout ) {
 		return;
 	}
-	const spinner = document.querySelector( '.newspack-blocks-donate-checkout-modal__spinner' );
+	const spinner = document.querySelector( '.newspack-blocks-checkout-modal__spinner' );
 	const iframeName = 'newspack_modal_checkout';
 	const modalCheckoutInput = document.createElement( 'input' );
 	modalCheckoutInput.type = 'hidden';
 	modalCheckoutInput.name = 'modal_checkout';
 	modalCheckoutInput.value = '1';
-	const modalContent = modalCheckout.querySelector(
-		'.newspack-blocks-donate-checkout-modal__content'
-	);
+	const modalContent = modalCheckout.querySelector( '.newspack-blocks-checkout-modal__content' );
 	const iframe = document.createElement( 'iframe' );
 	iframe.name = iframeName;
 	modalContent.appendChild( iframe );
-	const blocks = document.querySelectorAll( '.wpbnbd.wpbnbd--platform-wc' );
-	blocks.forEach( block => {
-		const forms = block.querySelectorAll( 'form' );
+	const elements = document.querySelectorAll( triggers );
+	elements.forEach( element => {
+		const forms = element.querySelectorAll( 'form' );
 		forms.forEach( form => {
 			form.appendChild( modalCheckoutInput.cloneNode() );
 			form.target = iframeName;
@@ -95,9 +100,7 @@ domReady( () => {
 			closeCheckout( modalCheckout );
 		}
 	} );
-	const closeButtons = modalCheckout.querySelectorAll(
-		'.newspack-blocks-donate-checkout-modal__close'
-	);
+	const closeButtons = modalCheckout.querySelectorAll( '.newspack-blocks-checkout-modal__close' );
 	closeButtons.forEach( button => {
 		button.addEventListener( 'click', ev => {
 			ev.preventDefault();