@automattic/newspack-blocks 1.75.6 → 2.0.0-alpha.2

package/src/blocks/carousel/view.php

@@ -23,7 +23,6 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 	$autoplay = isset( $attributes['autoplay'] ) ? $attributes['autoplay'] : false;
 	$delay    = isset( $attributes['delay'] ) ? absint( $attributes['delay'] ) : 3;
 	$authors  = isset( $attributes['authors'] ) ? $attributes['authors'] : array();
-	$is_amp   = Newspack_Blocks::is_amp();
 
 	$other = array();
 	if ( $autoplay ) {
@@ -50,12 +49,8 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 
 			$article_classes = [
 				'post-has-image',
+				'swiper-slide',
 			];
-			if ( $is_amp ) {
-				$article_classes[] = 'amp-carousel-slide';
-			} else {
-				$article_classes[] = 'swiper-slide';
-			}
 
 			// Add classes based on the post's assigned categories and tags.
 			$article_classes[] = Newspack_Blocks::get_term_classes( $post_id );
@@ -224,49 +219,26 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 	}
 
 	$slides_per_view = absint( $attributes['slidesPerView'] ?? 1 );
-	$slides_to_show  = $slides_per_view <= $counter ? $slides_per_view : $counter;
 	$aspect_ratio    = floatval( $attributes['aspectRatio'] ?? 0.75 );
 
-	if ( $is_amp ) {
-		$selector = sprintf(
-			'<amp-selector id="wp-block-newspack-carousel__amp-pagination__%1$d" class="swiper-pagination-bullets amp-pagination" on="select:wp-block-newspack-carousel__amp-carousel__%1$d.goToSlide(index=event.targetOption)" layout="container" %2$s>%3$s</amp-selector>',
-			absint( $newspack_blocks_carousel_id ),
-			$attributes['hideControls'] ? 'aria-hidden="true"' : '',
-			implode( '', $buttons )
-		);
+	$selector    = sprintf(
+		'<div class="swiper-pagination-bullets" %1$s>%2$s</div>',
+		$attributes['hideControls'] ? 'aria-hidden="true"' : '',
+		implode( '', $buttons )
+	);
+	$navigation  = 1 === $counter ? '' : sprintf(
+		'<button class="swiper-button swiper-button-prev" aria-label="%1$s" %3$s></button><button class="swiper-button swiper-button-next" aria-label="%2$s" %3$s></button>',
+		esc_attr__( 'Previous Slide', 'newspack-blocks' ),
+		esc_attr__( 'Next Slide', 'newspack-blocks' ),
+		$attributes['hideControls'] ? 'aria-hidden="true"' : ''
+	);
+	$carousel    = sprintf(
+		'<div class="swiper"><div class="swiper-wrapper">%s</div>%s</div>',
+		$slides,
+		$navigation
+	);
+	$autoplay_ui = $autoplay ? newspack_blocks_carousel_block_autoplay_ui( $newspack_blocks_carousel_id ) : '';
 
-		$carousel    = sprintf(
-			'<amp-base-carousel class="wp-block-newspack-carousel__amp-carousel" width="%1$s" height="%2$s" heights="%3$s" layout="responsive" snap="true" data-next-button-aria-label="%4$s" data-prev-button-aria-label="%5$s" controls="auto" loop="true" %6$s id="wp-block-newspack-carousel__amp-carousel__%7$s" on="slideChange:wp-block-newspack-carousel__amp-pagination__%7$s.toggle(index=event.index, value=true)" advance-count="1" visible-count="%8$s">%9$s</amp-base-carousel>',
-			esc_attr( $slides_per_view * 1 ),
-			esc_attr( $aspect_ratio ),
-			esc_attr( '(min-width: 1168px) ' . ( $aspect_ratio / $slides_to_show * 100 ) . '% !important, (min-width: 782px) ' . ( $slides_to_show > 1 ? ( $aspect_ratio / 2 * 100 ) . '% !important' : ( $aspect_ratio * 100 ) . '% !important' ) . ', ' . ( $aspect_ratio * 100 ) . '% !important' ),
-			esc_attr__( 'Next Slide', 'newspack-blocks' ),
-			esc_attr__( 'Previous Slide', 'newspack-blocks' ),
-			$autoplay ? 'auto-advance="true" auto-advance-interval=' . esc_attr( $delay * 1000 ) : '',
-			absint( $newspack_blocks_carousel_id ),
-			esc_attr( '(min-width: 1168px) ' . $slides_to_show . ', (min-width: 782px) ' . ( $slides_to_show > 1 ? 2 : 1 ) . ', ' . 1 ),
-			$slides
-		);
-		$autoplay_ui = $autoplay ? newspack_blocks_carousel_block_autoplay_ui_amp( $newspack_blocks_carousel_id ) : '';
-	} else {
-		$selector    = sprintf(
-			'<div class="swiper-pagination-bullets amp-pagination" %1$s>%2$s</div>',
-			$attributes['hideControls'] ? 'aria-hidden="true"' : '',
-			implode( '', $buttons )
-		);
-		$navigation  = 1 === $counter ? '' : sprintf(
-			'<button class="swiper-button swiper-button-prev" aria-label="%1$s" %3$s></button><button class="swiper-button swiper-button-next" aria-label="%2$s" %3$s></button>',
-			esc_attr__( 'Previous Slide', 'newspack-blocks' ),
-			esc_attr__( 'Next Slide', 'newspack-blocks' ),
-			$attributes['hideControls'] ? 'aria-hidden="true"' : ''
-		);
-		$carousel    = sprintf(
-			'<div class="swiper"><div class="swiper-wrapper">%s</div>%s</div>',
-			$slides,
-			$navigation
-		);
-		$autoplay_ui = $autoplay ? newspack_blocks_carousel_block_autoplay_ui( $newspack_blocks_carousel_id ) : '';
-	}
 	$data_attributes = [
 		'data-current-post-id=' . $post_id,
 		'data-slides-per-view=' . esc_attr( $slides_per_view ),
@@ -274,7 +246,7 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 		'data-aspect-ratio=' . esc_attr( $aspect_ratio ),
 	];
 
-	if ( $autoplay && ! $is_amp ) {
+	if ( $autoplay ) {
 		$data_attributes[] = 'data-autoplay=1';
 		$data_attributes[] = sprintf( 'data-autoplay_delay=%s', esc_attr( $delay ) );
 	}
@@ -294,7 +266,7 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 }
 
 /**
- * Generate autoplay play/pause UI for non-AMP requests.
+ * Generate autoplay play/pause UI.
  *
  * @return string Autoplay UI markup.
  */
@@ -306,37 +278,6 @@ function newspack_blocks_carousel_block_autoplay_ui() {
 	);
 }
 
-/**
- * Generate autoplay play/pause UI for AMP requests.
- *
- * @param int $block_ordinal The ordinal number of the block, used in unique ID.
- *
- * @return string Autoplay UI markup.
- */
-function newspack_blocks_carousel_block_autoplay_ui_amp( $block_ordinal = 0 ) {
-	$block_id        = sprintf(
-		'wp-block-newspack-carousel__%d',
-		absint( $block_ordinal )
-	);
-	$amp_carousel_id = sprintf(
-		'wp-block-newspack-carousel__amp-carousel__%d',
-		absint( $block_ordinal )
-	);
-	$autoplay_pause  = sprintf(
-		'<button aria-label="%s" class="amp-carousel-button-pause amp-carousel-button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-newspack-blocks-carousel__autoplay-playing,force=false)"></button>',
-		esc_attr__( 'Pause Slideshow', 'newspack-blocks' ),
-		esc_attr( $amp_carousel_id ),
-		esc_attr( $block_id )
-	);
-	$autoplay_play   = sprintf(
-		'<button aria-label="%s" class="amp-carousel-button-play amp-carousel-button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-newspack-blocks-carousel__autoplay-playing,force=true)"></button>',
-		esc_attr__( 'Play Slideshow', 'newspack-blocks' ),
-		esc_attr( $amp_carousel_id ),
-		esc_attr( $block_id )
-	);
-	return $autoplay_pause . $autoplay_play;
-}
-
 /**
  * Registers the `newspack-blocks/carousel` block on server.
  */

package/src/blocks/carousel/view.scss

@@ -141,8 +141,7 @@
 			@include mixins.visuallyHidden;
 		}
 	}
-	.swiper-button,
-	.amp-carousel-button {
+	.swiper-button {
 		background-color: rgba( black, 0.5 );
 		background-position: center;
 		background-repeat: no-repeat;
@@ -165,22 +164,17 @@
 			outline: 0;
 		}
 	}
-	.amp-carousel-button-next,
-	.amp-carousel-button-prev,
 	.swiper-button-next,
 	.swiper-button-prev {
 		left: 1.5em;
 		display: none;
 		right: auto;
+		margin-top: -24px;
 
 		@include mixins.media( mobile ) {
 			display: block;
 		}
 	}
-	.swiper-button-next,
-	.swiper-button-prev {
-		margin-top: -24px;
-	}
 	.swiper-button-prev::after,
 	.swiper-rtl .swiper-button-next::after {
 		content: none;
@@ -189,18 +183,14 @@
 	.swiper-rtl .swiper-button-prev::after {
 		content: none;
 	}
-	.amp-carousel-button-next,
 	.swiper-button-next {
 		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.88%204.12L13.76%2012l-7.88%207.88L8%2022l10-10L8%202z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 		left: auto;
 		right: 1.5em;
 	}
-	.amp-carousel-button-prev,
 	.swiper-button-prev {
 		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
 	}
-	.amp-carousel-button-pause,
-	.amp-carousel-button-play,
 	.swiper-button-pause,
 	.swiper-button-play {
 		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019h4V5H6v14zm8-14v14h4V5h-4z'%20fill='white'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
@@ -212,27 +202,10 @@
 		transform: none;
 		z-index: 9;
 	}
-	.amp-carousel-button-play,
 	.swiper-button-play {
 		background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'%20fill='white'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
 	}
 
-	/* AMP carousel container */
-	.wp-block-newspack-carousel__amp-carousel {
-		margin: 0 -8px;
-	}
-
-	/* AMP carousel slide */
-	.amp-carousel-slide {
-		position: relative;
-
-		.entry-wrapper,
-		.post-thumbnail img {
-			left: 8px;
-			width: calc( 100% - 16px );
-		}
-	}
-
 	/* Swiper Slide */
 	.swiper-slide {
 		height: auto;
@@ -287,15 +260,11 @@
 		margin-right: 0.5em;
 	}
 
-	&.wp-block-newspack-blocks-carousel__autoplay-playing .amp-carousel-button-pause,
 	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-pause,
-	.amp-carousel-button-play,
 	.swiper-button-play {
 		display: block;
 	}
-	&.wp-block-newspack-blocks-carousel__autoplay-playing .amp-carousel-button-play,
 	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-play,
-	.amp-carousel-button-pause,
 	.swiper-button-pause {
 		display: none;
 	}
@@ -314,7 +283,6 @@
 
 	// If hideControls is enabled, visually hide the UI elements.
 	&.hide-controls {
-		.amp-pagination,
 		button {
 			display: none;
 			visibility: hidden;
@@ -374,8 +342,7 @@
 }
 
 /* stylelint-disable selector-type-no-unknown  */
-.wpnbpc,
-amp-script .wpnbpc {
+.wpnbpc {
 	.entry-sponsors {
 		align-items: center;
 		display: inline-flex;

package/src/blocks/checkout-button/block.json

@@ -35,6 +35,15 @@
 		},
 		"gradient": {
 			"type": "string"
+		},
+		"afterSuccessBehavior": {
+			"type": "string"
+		},
+		"afterSuccessButtonLabel": {
+			"type": "string"
+		},
+		"afterSuccessURL": {
+			"type": "string"
 		}
 	},
 	"supports": {

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

@@ -153,6 +153,48 @@ function ProductControl( props ) {
 	);
 }
 
+function RedirectAfterSuccess( props ) {
+	const { attributes, setAttributes } = props;
+	return (
+		<>
+			<SelectControl
+				label={ __( 'Post-Checkout Button', 'newspack-blocks' ) }
+				help={ __(
+					'Select whether the user should be presented with a button to navigate after a successful purchase.',
+					'newspack-blocks'
+				) }
+				value={ attributes.afterSuccessBehavior }
+				options={ [
+					{ label: __( 'Do not show a button', 'newspack-blocks' ), value: '' },
+					{ label: __( 'Go to a custom URL', 'newspack-blocks' ), value: 'custom' },
+					{ label: __( 'Go to the previous page', 'newspack-blocks' ), value: 'referrer' },
+				] }
+				onChange={ value => {
+					setAttributes( { afterSuccessBehavior: value.toString() } );
+				} }
+			/>
+			{ attributes.afterSuccessBehavior !== '' && (
+				<>
+					<TextControl
+						label={ __( 'Button Label', 'newspack-blocks' ) }
+						placeholder={ __( 'Continue browsing', 'newspack-blocks' ) }
+						value={ attributes.afterSuccessButtonLabel || '' }
+						onChange={ value => setAttributes( { afterSuccessButtonLabel: value } ) }
+					/>
+					{ attributes.afterSuccessBehavior === 'custom' && (
+						<TextControl
+							label={ __( 'Custom URL', 'newspack-blocks' ) }
+							placeholder={ __( 'https://example.com', 'newspack-blocks' ) }
+							value={ attributes.afterSuccessURL || '' }
+							onChange={ value => setAttributes( { afterSuccessURL: value } ) }
+						/>
+					) }
+				</>
+			) }
+		</>
+	);
+}
+
 function CheckoutButtonEdit( props ) {
 	const { attributes, setAttributes, className } = props;
 	const { placeholder, style, text, product, price, variation } = attributes;
@@ -291,6 +333,9 @@ function CheckoutButtonEdit( props ) {
 						) }
 					</ProductControl>
 				</PanelBody>
+				<PanelBody title={ __( 'After purchase', 'newspack-blocks' ) }>
+					<RedirectAfterSuccess setAttributes={ setAttributes } attributes={ attributes } />
+				</PanelBody>
 				{ nyp?.isNYP && (
 					<PanelBody title={ __( 'Name Your Price', 'newspack-blocks' ) }>
 						<p>

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

@@ -57,9 +57,32 @@ export default function save( { attributes, className } ) {
 				/>
 				<input type="hidden" name="product_id" value={ product } />
 				<input type="hidden" name="newspack_checkout" value="1" />
+
 				{ price && <input type="hidden" name="price" value={ price } /> }
 				{ variation && <input type="hidden" name="variation_id" value={ variation } /> }
 				{ is_variable && <input type="hidden" name="is_variable" value="1" /> }
+
+				{ attributes.afterSuccessBehavior && (
+					<input
+						type="hidden"
+						name="after_success_behavior"
+						value={ attributes.afterSuccessBehavior }
+					/>
+				) }
+				{ attributes.afterSuccessButtonLabel && (
+					<input
+						type="hidden"
+						name="after_success_button_label"
+						value={ attributes.afterSuccessButtonLabel }
+					/>
+				) }
+				{ attributes.afterSuccessBehavior && (
+					<input
+						type="hidden"
+						name="after_success_url"
+						value={ attributes.afterSuccessURL || '' }
+					/>
+				) }
 			</form>
 		</div>
 	);

package/src/blocks/donate/edit/index.tsx

@@ -142,20 +142,13 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 	}
 
 	const isTiered = attributes.manual ? attributes.tiered : settings.tiered;
-	const canRenderTiersBasedLayout = Boolean(
-		window.newspack_blocks_data?.can_render_tiers_based_layout
-	);
-	const isTierBasedLayoutEnabled =
-		canRenderTiersBasedLayout && isTiered && attributes.layoutOption === 'tiers';
+	const isTierBasedLayoutEnabled = isTiered && attributes.layoutOption === 'tiers';
 
 	const amounts = attributes.manual ? attributes.amounts : settings.amounts;
 	const availableFrequencies = FREQUENCY_SLUGS.filter( slug =>
 		attributes.manual
 			? ! attributes.disabledFrequencies[ slug ]
 			: ! settings.disabledFrequencies[ slug ]
-	).filter( slug => ( isTierBasedLayoutEnabled ? slug !== 'once' : true ) );
-	const displayedFrequencies = FREQUENCY_SLUGS.filter( slug =>
-		isTierBasedLayoutEnabled ? slug !== 'once' : true
 	);
 
 	// Editor bug – initially, the default style is selected, but the class not applied.
@@ -233,7 +226,7 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 									isPressed={ isSelected }
 									onClick={ () => setAttributes( { layoutOption: key } ) }
 									aria-current={ isSelected }
-									disabled={ key === 'tiers' && ( ! canRenderTiersBasedLayout || ! isTiered ) }
+									disabled={ key === 'tiers' && ! isTiered }
 								>
 									{ label }
 								</Button>
@@ -278,13 +271,13 @@ const Edit = ( { attributes, setAttributes, className }: EditProps ) => {
 							{ attributes.tiered ? (
 								<>
 									<div className="components-frequency-donations">
-										{ displayedFrequencies.map( ( frequency: DonationFrequencySlug ) => {
+										{ FREQUENCY_SLUGS.map( ( frequency: DonationFrequencySlug ) => {
 											const isFrequencyDisabled = attributes.disabledFrequencies[ frequency ];
 											const disabledDisplayedFrequencyCount = Object.values(
-												pick( attributes.disabledFrequencies, displayedFrequencies )
+												pick( attributes.disabledFrequencies, FREQUENCY_SLUGS )
 											).filter( Boolean ).length;
 											const isOnlyOneFrequencyActive =
-												displayedFrequencies.length - disabledDisplayedFrequencyCount === 1;
+												FREQUENCY_SLUGS.length - disabledDisplayedFrequencyCount === 1;
 											return (
 												<Fragment key={ frequency }>
 													<CheckboxControl

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

@@ -90,10 +90,7 @@ abstract class Newspack_Blocks_Donate_Renderer_Base {
 			}
 		}
 
-		$is_tiers_based = $configuration['tiered'] && 'tiers' === $attributes['layoutOption'];
-		if ( ! Newspack_Blocks::can_render_tiers_based_layout() ) {
-			$is_tiers_based = false;
-		}
+		$is_tiers_based                        = $configuration['tiered'] && 'tiers' === $attributes['layoutOption'];
 		$configuration['is_tier_based_layout'] = $is_tiers_based;
 
 		$frequencies = [
@@ -105,9 +102,6 @@ abstract class Newspack_Blocks_Donate_Renderer_Base {
 			if ( $configuration['disabledFrequencies'][ $frequency_slug ] ) {
 				unset( $frequencies[ $frequency_slug ] );
 			}
-			if ( $is_tiers_based && 'once' === $frequency_slug ) {
-				unset( $frequencies[ $frequency_slug ] );
-			}
 		}
 		$configuration['frequencies'] = $frequencies;
 

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

@@ -94,7 +94,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 		ob_start();
 
 		/**
-		 * For AMP-compatibility, the donation forms are implemented as pure HTML forms (no JS).
+		 * 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.
 		 */

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

@@ -146,7 +146,6 @@ class Newspack_Blocks_Donate_Renderer {
 
 		Newspack_Blocks::enqueue_view_assets( 'donate' );
 		wp_script_add_data( 'newspack-blocks-donate', 'async', true );
-		wp_script_add_data( 'newspack-blocks-donate', 'amp-plus', true );
 
 		if ( true === $attributes['useModalCheckout'] && ! $configuration['is_rendering_stripe_payment_form'] ) {
 			\Newspack_Blocks\Modal_Checkout::enqueue_modal();

package/src/blocks/donate/streamlined/index.test.js

@@ -36,7 +36,7 @@ const createDOM = settings => {
 				<div class="stripe-payment__messages"></div>
 				<button type="submit">Donate</button>
 			</div>
-			<input name="cid" type="hidden" value="amp-123" />
+			<input name="cid" type="hidden" value="cid-123" />
 		</form>
 	`;
 	document.body.appendChild( parentElement );
@@ -122,8 +122,7 @@ describe( 'Streamlined Donate block processing', () => {
 					full_name: 'Bax',
 					frequency: 'month',
 					newsletter_opt_in: false,
-					clientId: 'amp-123',
-					origin: null,
+					clientId: 'cid-123',
 					additional_fields: [],
 				},
 			},

package/src/blocks/donate/streamlined/index.ts

@@ -116,13 +116,6 @@ export const processStreamlinedElements = ( parentElement = document ) =>
 				}
 			}
 			const formValues = utils.getDonationFormValues( formElement );
-			const promptOrigin = formElement.closest( 'amp-layout.newspack-popup' );
-
-			// If the donation originated from a Campaigns prompt, append the prompt ID to the event label.
-			const origin =
-				promptOrigin && promptOrigin.hasAttribute( 'amp-access' )
-					? promptOrigin.getAttribute( 'amp-access' )
-					: null;
 
 			const additionalFields: { name: string; value: string }[] =
 				getAdditionalFieldsValues( formElement );
@@ -139,7 +132,6 @@ export const processStreamlinedElements = ( parentElement = document ) =>
 				newspack_popup_id: formValues.newspack_popup_id,
 				_wp_http_referer: formValues._wp_http_referer,
 				clientId: formValues.cid,
-				origin,
 				additional_fields: additionalFields,
 				...requestPayloadOverrides,
 			};

package/src/blocks/donate/streamlined/utils.ts

@@ -120,7 +120,6 @@ export const getDonationFormValues = ( formElement: HTMLFormElement ): DonationF
 		typeof formValues.cid === 'string' &&
 		formValues.cid.indexOf( 'CLIENT_ID' ) === 0
 	) {
-		// In non-AMP environment, the value will not be dynamically substituted by AMP runtime.
 		formValues.cid = getCookies()[ 'newspack-cid' ];
 	}
 	return formValues;

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

@@ -191,6 +191,10 @@
 			"type": "array",
 			"default": [ "publish" ],
 			"items": { "type": "string" }
+		},
+		"deduplicate": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }

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

@@ -161,9 +161,6 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 				]
 			);
 
-			if ( $request->get_param( 'amp' ) ) {
-				$html = $this->generate_amp_partial( $html );
-			}
 			$items[]['html'] = $html;
 			$ids[]           = get_the_ID();
 		}
@@ -184,8 +181,6 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 					[
 						'exclude_ids' => false,
 						'page'        => $next_page,
-						'amp'         => $request->get_param( 'amp' ),
-
 					]
 				),
 				rest_url( '/newspack-blocks/v1/articles' )
@@ -228,27 +223,4 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 		}
 		return $this->attribute_schema;
 	}
-
-	/**
-	 * Use AMP Plugin functions to render markup as valid AMP.
-	 *
-	 * @param string $html Markup to convert to AMP.
-	 * @return string
-	 */
-	public function generate_amp_partial( $html ) {
-		$dom = AMP_DOM_Utils::get_dom_from_content( $html );
-
-		AMP_Content_Sanitizer::sanitize_document(
-			$dom,
-			amp_get_content_sanitizers(),
-			[
-				'use_document_element' => false,
-			]
-		);
-		$xpath = new DOMXPath( $dom );
-		foreach ( iterator_to_array( $xpath->query( '//noscript | //comment()' ) ) as $node ) {
-			$node->parentNode->removeChild( $node ); // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
-		}
-		return AMP_DOM_Utils::get_content_from_dom( $dom );
-	}
 }

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

@@ -434,6 +434,16 @@ class Edit extends Component {
 							/>
 						)
 					) }
+					<ToggleControl
+						label={ __( 'Use deduplication logic', 'newspack-blocks' ) }
+						help={ __(
+							'If unchecked, this block will be excluded from the deduplication logic and may show duplicate posts.',
+							'newspack-blocks'
+						) }
+						checked={ attributes.deduplicate }
+						onChange={ () => setAttributes( { deduplicate: ! attributes.deduplicate } ) }
+						className="newspack-blocks-deduplication-toggle"
+					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Featured Image Settings', 'newspack-blocks' ) }>
 					<PanelRow>

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

@@ -110,6 +110,19 @@ function* getPostsForBlock( block ) {
 	return postsIds;
 }
 
+/**
+ * Whether a block uses deduplication.
+ *
+ * @param {string} clientId
+ *
+ * @return {boolean} whether the block uses deduplication
+ */
+function shouldDeduplicate( clientId ) {
+	const { getBlock } = select( 'core/block-editor' );
+	const block = getBlock( clientId );
+	return block?.attributes?.deduplicate;
+}
+
 const createFetchPostsSaga = blockNames => {
 	/**
 	 * "worker" Saga: will be fired on REFLOW actions
@@ -138,8 +151,8 @@ const createFetchPostsSaga = blockNames => {
 		const blockQueries = getBlockQueries( blocks, blockNames );
 
 		// Use requested specific posts ids as the starting state of exclusion list.
-		const specificPostsId = blockQueries.reduce( ( acc, { postsQuery } ) => {
-			if ( postsQuery.include ) {
+		const specificPostsId = blockQueries.reduce( ( acc, { clientId, postsQuery } ) => {
+			if ( shouldDeduplicate( clientId ) && postsQuery.include ) {
 				acc = [ ...acc, ...postsQuery.include ];
 			}
 			return acc;
@@ -148,14 +161,19 @@ const createFetchPostsSaga = blockNames => {
 		let exclude = sanitizePostList( [ ...specificPostsId, getCurrentPostId() ] );
 		while ( blockQueries.length ) {
 			const nextBlock = blockQueries.shift();
-			nextBlock.postsQuery.exclude = exclude;
+			const deduplicate = shouldDeduplicate( nextBlock.clientId );
+			if ( deduplicate ) {
+				nextBlock.postsQuery.exclude = exclude;
+			}
 			let fetchedPostIds = [];
 			try {
 				fetchedPostIds = yield call( getPostsForBlock, nextBlock );
 			} catch ( e ) {
 				yield put( { type: 'UPDATE_BLOCK_ERROR', clientId: nextBlock.clientId, error: e.message } );
 			}
-			exclude = [ ...exclude, ...fetchedPostIds ];
+			if ( deduplicate ) {
+				exclude = [ ...exclude, ...fetchedPostIds ];
+			}
 		}
 
 		yield put( { type: 'ENABLE_UI' } );

package/src/blocks/homepage-articles/templates/article.php

@@ -44,10 +44,6 @@ call_user_func(
 		global $newspack_blocks_hpb_rendering_context;
 		$newspack_blocks_hpb_rendering_context = [ 'attrs' => $attributes ];
 
-		// If the image position is behind, pass the object-fit setting to maintain styles with AMP.
-		if ( 'behind' === $attributes['mediaPosition'] ) {
-			$thumbnail_args['object-fit'] = 'cover';
-		}
 		// Disable lazy loading by using an arbitraty `loading` attribute other than `lazy`.
 		// Empty string or `false` would still result in `lazy`.
 		if ( $attributes['disableImageLazyLoad'] ) {

package/src/blocks/homepage-articles/templates/articles-loop.php

@@ -18,10 +18,9 @@ call_user_func(
 
 		Newspack_Blocks::filter_excerpt( $attributes );
 
-		$enable_post_duplication = apply_filters( 'newspack_blocks_homepage_enable_duplication', false );
 		while ( $article_query->have_posts() ) {
 			$article_query->the_post();
-			if ( ! $enable_post_duplication ) {
+			if ( Newspack_Blocks::should_deduplicate_block( $attributes ) ) {
 				$newspack_blocks_post_id[ get_the_ID() ] = true;
 			}
 			echo Newspack_Blocks::template_inc( __DIR__ . '/article.php', array( 'attributes' => $attributes ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped