@automattic/newspack-blocks 1.37.0 → 1.48.0

package/src/blocks/donate/view.scss

@@ -284,3 +284,294 @@
 		}
 	}
 }
+
+/* Alternate Style */
+
+.wpbnbd.is-style-alternate {
+	border-color: $color__background-screen;
+	border-radius: 5px;
+
+	.thanks {
+		margin: 1.12rem;
+	}
+
+	.money-input {
+		max-width: 100%;
+
+		input[type='number'] {
+			max-width: 100%;
+			width: 100%;
+		}
+	}
+
+	&.untiered {
+		padding-top: calc( 3 * ( 1.14rem + 1.28em ) + 8px );
+
+		@include media( tablet ) {
+			padding-top: calc( 1.14rem + 1.28em + 4px );
+		}
+
+		.input-container {
+			margin: 1.12rem;
+		}
+	}
+
+	&.tiered {
+		.tiers {
+			.tier-label {
+				background: $color__background-screen;
+				border-color: $color__background-screen;
+				margin: 0;
+				text-align: center;
+			}
+
+			input.other-input:checked + label {
+				margin-bottom: calc( 1.28rem + 1.6em + 2px );
+			}
+		}
+
+		.money-input {
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	.frequencies {
+		padding-top: calc( 3 * ( 1.14rem + 1.6em ) + 8px );
+
+		@include media( tablet ) {
+			padding-top: calc( 1.14rem + 1.6em + 4px );
+		}
+	}
+
+	.frequency {
+		.freq-label {
+			background: $color__background-screen;
+			border-color: $color__background-screen;
+			border-width: 1px;
+			padding: calc( 0.57rem + 1px ) 0.76rem;
+
+			&::before {
+				display: none;
+			}
+		}
+
+		&:nth-of-type( 2 ) .freq-label {
+			top: calc( 1.14rem + 1.6em + 2px );
+
+			@include media( tablet ) {
+				top: 0;
+			}
+		}
+
+		&:nth-of-type( 3 ) .freq-label {
+			top: calc( 2 * ( 1.14rem + 1.6em + 2px ) );
+
+			@include media( tablet ) {
+				top: 0;
+			}
+		}
+
+		input[type='radio']:checked {
+			+ .freq-label {
+				&::after {
+					box-sizing: content-box;
+					background: white;
+					border-radius: 5px;
+					bottom: 0.19rem;
+					border: 0.19rem solid white;
+					box-shadow: 0 0 0 1px $color__border;
+					content: '';
+					display: block;
+					left: 0.19rem;
+					position: absolute;
+					right: 0.19rem;
+					top: 0.19rem;
+					z-index: -1;
+				}
+
+				&:hover {
+					background: $color__background-screen;
+				}
+			}
+
+			~ .tiers {
+				display: grid;
+				grid-gap: 0.28rem;
+				grid-template-columns: repeat( 4, 1fr );
+				margin: 1.12rem;
+
+				@include media( mobile ) {
+					grid-gap: 0.56rem;
+				}
+			}
+		}
+	}
+
+	button {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		margin: 0 -1px -1px;
+		width: calc( 100% + 2px );
+	}
+}
+
+/* Minimal Style */
+
+.wpbnbd.is-style-minimal {
+	border: none;
+
+	form {
+		text-align: center;
+	}
+
+	.thanks {
+		margin: 1.12rem 0;
+	}
+
+	.money-input {
+		max-width: 100%;
+
+		input[type='number'] {
+			max-width: 100%;
+			width: 100%;
+		}
+	}
+
+	&.untiered {
+		padding-top: calc( 3 * ( 0.76rem + 1.28em + 4px ) );
+
+		@include media( tablet ) {
+			padding-top: calc( 0.76rem + 1.28em + 4px );
+		}
+
+		.input-container {
+			margin: 0.56rem 0 1.12rem;
+			text-align: left;
+		}
+	}
+
+	&.tiered {
+		.tiers {
+			.tier-label {
+				align-items: center;
+				display: grid;
+				background: transparent;
+				border: none;
+				color: $color__text-light;
+				font-family: inherit;
+				font-weight: inherit;
+				grid-gap: 0.25rem;
+				grid-template-columns: auto 1fr;
+				margin: 0;
+				padding: 0;
+				text-align: left;
+
+				&::before {
+					background: white;
+					border: 1px solid $color__border;
+					border-radius: 100%;
+					box-shadow: inset 0 0 0 3px white;
+					content: '';
+					display: block;
+					height: 20px;
+					padding: 3px;
+					width: 20px;
+				}
+
+				&:hover {
+					color: inherit;
+				}
+			}
+
+			input.other-input:checked + label {
+				margin-bottom: calc( 1.28rem + 1.6em + 2px );
+			}
+
+			input[type='radio']:checked + .tier-select-label {
+				background: none;
+				color: inherit;
+
+				&::before {
+					background: currentColor;
+				}
+			}
+		}
+
+		.money-input {
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	.frequencies {
+		padding-top: calc( 3 * ( 0.76rem + 1.6em + 4px ) );
+
+		@include media( tablet ) {
+			padding-top: calc( 0.76rem + 1.6em + 4px );
+		}
+	}
+
+	.frequency {
+		.freq-label {
+			background: transparent;
+			border: none;
+			box-shadow: 0 3px 0 white, 0 4px 0 0 $color__border;
+			padding: 0.38rem 0;
+			transition: none;
+
+			@include media( tablet ) {
+				padding-left: 0.76rem;
+				padding-right: 0.76rem;
+			}
+
+			&::before {
+				border-width: 1px;
+				border-color: $color__border;
+			}
+		}
+
+		&:nth-of-type( 2 ) .freq-label {
+			top: calc( 0.76rem + 1.6em + 4px );
+
+			@include media( tablet ) {
+				top: 0;
+			}
+		}
+
+		&:nth-of-type( 3 ) .freq-label {
+			top: calc( 2 * ( 0.76rem + 1.6em + 4px ) );
+
+			@include media( tablet ) {
+				top: 0;
+			}
+		}
+
+		input[type='radio']:checked {
+			+ .freq-label {
+				box-shadow: 0 4px 0 currentColor;
+			}
+
+			~ .tiers {
+				display: flex;
+				flex-wrap: wrap;
+				grid-gap: 1.12rem;
+				justify-content: center;
+				margin: 1.12rem 0;
+
+				@include media( mobile ) {
+					display: grid;
+					grid-gap: 0.56rem;
+					grid-template-columns: repeat( 4, 1fr );
+				}
+			}
+		}
+	}
+
+	button {
+		margin: 0 auto;
+		min-width: 50%;
+	}
+}

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

@@ -34,6 +34,10 @@
       "type": "boolean",
       "default": false
     },
+    "disableImageLazyLoad": {
+      "type": "boolean",
+      "default": false
+    },
     "imageShape": {
       "type": "string",
       "default": "landscape"
@@ -148,6 +152,10 @@
       "type": "array",
       "default": [ "post" ],
       "items": { "type": "string" }
+    },
+    "textAlign": {
+      "type": "string",
+      "default": "left"
     }
   }
 }

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

@@ -56,77 +56,25 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 			[
 				'methods'             => \WP_REST_Server::READABLE,
 				'callback'            => [ 'Newspack_Blocks_API', 'posts_endpoint' ],
-				'args'                => [
-					'author'             => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'categories'         => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'categories_exclude' => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'excerpt_length'     => [
-						'type'    => 'integer',
-						'default' => 55,
-					],
-					'exclude'            => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'include'            => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'orderby'            => [
-						'sanitize_callback' => 'sanitize_text_field',
-					],
-					'per_page'           => [
-						'sanitize_callback' => 'absint',
-					],
-					'show_excerpt'       => [
-						'type' => 'boolean',
-					],
-					'tags'               => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'tags_exclude'       => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'integer',
-						),
-						'default' => array(),
-					],
-					'post_type'          => [
-						'type'    => 'array',
-						'items'   => array(
-							'type' => 'string',
-						),
-						'default' => array(),
-					],
-				],
+				'args'                => array_merge(
+					$this->get_attribute_schema(),
+					[
+						'exclude' => [ // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude
+							'type'    => 'array',
+							'items'   => array(
+								'type' => 'integer',
+							),
+							'default' => array(),
+						],
+						'include' => [
+							'type'    => 'array',
+							'items'   => array(
+								'type' => 'integer',
+							),
+							'default' => array(),
+						],
+					]
+				),
 				'permission_callback' => function() {
 					return current_user_can( 'edit_posts' );
 				},
@@ -141,13 +89,13 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 				'methods'             => \WP_REST_Server::READABLE,
 				'callback'            => [ 'Newspack_Blocks_API', 'specific_posts_endpoint' ],
 				'args'                => [
-					'search'    => [
+					'search'      => [
 						'sanitize_callback' => 'sanitize_text_field',
 					],
-					'per_page'  => [
+					'postsToShow' => [
 						'sanitize_callback' => 'absint',
 					],
-					'post_type' => [
+					'postType'    => [
 						'type'    => 'array',
 						'items'   => array(
 							'type' => 'string',
@@ -202,8 +150,7 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 		$ids      = [];
 		$next_url = '';
 
-		Newspack_Blocks::filter_excerpt_length( $attributes );
-		Newspack_Blocks::filter_excerpt_more( $attributes );
+		Newspack_Blocks::filter_excerpt( $attributes );
 
 		// The Loop.
 		while ( $article_query->have_posts() ) {
@@ -222,8 +169,7 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 			$ids[]           = get_the_ID();
 		}
 
-		Newspack_Blocks::remove_excerpt_length_filter();
-		Newspack_Blocks::remove_excerpt_more_filter();
+		Newspack_Blocks::remove_excerpt_filter();
 
 		// Provide next URL if there are more pages.
 		$show_next_button = ! empty( $exclude_ids ) ? $article_query->max_num_pages > 1 : $article_query->max_num_pages > $next_page;

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

@@ -30,6 +30,7 @@ import {
 	PanelColorSettings,
 	RichText,
 	withColors,
+	AlignmentControl,
 } from '@wordpress/block-editor';
 import {
 	Button,
@@ -256,6 +257,7 @@ class Edit extends Component {
 			postType,
 			showImage,
 			showCaption,
+			disableImageLazyLoad,
 			imageScale,
 			mobileStack,
 			minHeight,
@@ -394,6 +396,20 @@ class Edit extends Component {
 						</PanelRow>
 					) }
 
+					{ showImage && (
+						<PanelRow>
+							<ToggleControl
+								label={ __( 'Disable Featured Image Lazy Loading', 'newspack-blocks' ) }
+								help={ __(
+									'Improve Largest Contentful Paint (LCP) score if the block is on initial viewport.',
+									'newspack-blocks'
+								) }
+								checked={ disableImageLazyLoad }
+								onChange={ () => setAttributes( { disableImageLazyLoad: ! disableImageLazyLoad } ) }
+							/>
+						</PanelRow>
+					) }
+
 					{ showImage && mediaPosition !== 'top' && mediaPosition !== 'behind' && (
 						<Fragment>
 							<PanelRow>
@@ -608,6 +624,7 @@ class Edit extends Component {
 			showCaption,
 			showCategory,
 			specificMode,
+			textAlign,
 		} = attributes;
 
 		const classes = classNames( className, {
@@ -622,6 +639,7 @@ class Edit extends Component {
 			'has-text-color': textColor.color !== '',
 			'show-caption': showCaption,
 			'show-category': showCategory,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 			wpnbha: true,
 		} );
 
@@ -748,6 +766,14 @@ class Edit extends Component {
 				) }
 
 				<BlockControls>
+					<Toolbar>
+						<AlignmentControl
+							value={ textAlign }
+							onChange={ nextAlign => {
+								setAttributes( { textAlign: nextAlign } );
+							} }
+						/>
+					</Toolbar>
 					<Toolbar controls={ blockControls } />
 					{ showImage && <Toolbar controls={ blockControlsImages } /> }
 					{ showImage && <Toolbar controls={ blockControlsImageShape } /> }

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

@@ -125,7 +125,17 @@ const createFetchPostsSaga = blockNames => {
 
 		yield put( { type: 'DISABLE_UI' } );
 
-		const blockQueries = getBlockQueries( getBlocks(), blockNames );
+		// Ensure innerBlocks are populated for widget area blocks.
+		// See https://github.com/WordPress/gutenberg/issues/32607#issuecomment-890728216.
+		const blocks = getBlocks().map( block => {
+			const innerBlocks = select( 'core/block-editor' ).getBlocks( block.clientId );
+			return {
+				...block,
+				innerBlocks,
+			};
+		} );
+
+		const blockQueries = getBlockQueries( blocks, blockNames );
 
 		// Use requested specific posts ids as the starting state of exclusion list.
 		const specificPostsId = blockQueries.reduce( ( acc, { postsQuery } ) => {

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

@@ -35,10 +35,17 @@ call_user_func(
 		if ( has_post_thumbnail() && 'uncropped' !== $attributes['imageShape'] ) {
 			$image_size = Newspack_Blocks::image_size_for_orientation( $attributes['imageShape'] );
 		}
-		$thumbnail_args = '';
+		$thumbnail_args = array(
+			'data-hero-candidate' => true,
+		);
 		// If the image position is behind, pass the object-fit setting to maintain styles with AMP.
 		if ( 'behind' === $attributes['mediaPosition'] ) {
-			$thumbnail_args = array( 'object-fit' => 'cover' );
+			$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'] ) {
+			$thumbnail_args['loading'] = 'none';
 		}
 		$category = false;
 		// Use Yoast primary category if set.
@@ -124,9 +131,30 @@ call_user_func(
 			?>
 			<?php
 			if ( $attributes['showSubtitle'] ) :
+				$subtitle = get_post_meta( $post_id, 'newspack_post_subtitle', true );
+
 				?>
 				<div class="newspack-post-subtitle newspack-post-subtitle--in-homepage-block">
-					<?php echo esc_html( get_post_meta( $post_id, 'newspack_post_subtitle', true ) ); ?>
+					<?php
+					$allowed_tags = array(
+						'b'      => true,
+						'strong' => true,
+						'i'      => true,
+						'em'     => true,
+						'mark'   => true,
+						'u'      => true,
+						'small'  => true,
+						'sub'    => true,
+						'sup'    => true,
+						'a'      => array(
+							'href'   => true,
+							'target' => true,
+							'rel'    => true,
+						),
+					);
+
+					echo wptexturize( wp_kses( $subtitle, $allowed_tags ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+					?>
 				</div>
 			<?php endif; ?>
 			<?php

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

@@ -16,17 +16,18 @@ call_user_func(
 		global $newspack_blocks_post_id;
 		do_action( 'newspack_blocks_homepage_posts_before_render' );
 
-		Newspack_Blocks::filter_excerpt_length( $attributes );
-		Newspack_Blocks::filter_excerpt_more( $attributes );
+		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();
-			$newspack_blocks_post_id[ get_the_ID() ] = true;
+			if ( ! $enable_post_duplication ) {
+				$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
 		}
 
-		Newspack_Blocks::remove_excerpt_length_filter();
-		Newspack_Blocks::remove_excerpt_more_filter();
+		Newspack_Blocks::remove_excerpt_filter();
 
 		do_action( 'newspack_blocks_homepage_posts_after_render' );
 		wp_reset_postdata();

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

@@ -81,22 +81,22 @@ export const queryCriteriaFromAttributes = attributes => {
 		isSpecificPostModeActive
 			? {
 					include: cleanPosts,
-					per_page: specificPosts.length,
-					post_type: postType,
+					postsToShow: specificPosts.length,
+					postType,
 			  }
 			: {
-					per_page: postsToShow,
+					postsToShow,
 					categories,
-					author: authors,
+					authors,
 					tags,
-					tags_exclude: tagExclusions,
-					categories_exclude: categoryExclusions,
-					post_type: postType,
+					tagExclusions,
+					categoryExclusions,
+					postType,
 			  },
 		value => ! isUndefined( value )
 	);
-	criteria.excerpt_length = excerptLength;
-	criteria.show_excerpt = showExcerpt;
+	criteria.excerptLength = excerptLength;
+	criteria.showExcerpt = showExcerpt;
 	return criteria;
 };
 
@@ -173,7 +173,8 @@ export const postsBlockSelector = ( select, { clientId, attributes } ) => {
 	const { getBlocks } = select( 'core/block-editor' );
 	const editorBlocksIds = getEditorBlocksIds( getEditorBlocks() );
 	// The block might be rendered in the block styles preview, not in the editor.
-	const isEditorBlock = editorBlocksIds.indexOf( clientId ) >= 0;
+	const isWidgetEditor = getBlocks().some( block => block.name === 'core/widget-area' );
+	const isEditorBlock = editorBlocksIds.indexOf( clientId ) >= 0 || isWidgetEditor;
 
 	const { getPosts, getError, isUIDisabled } = select( STORE_NAMESPACE );
 	const props = {

package/src/blocks/homepage-articles/view.php

@@ -58,6 +58,9 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) {
 	if ( isset( $attributes['className'] ) ) {
 		$classes .= ' ' . $attributes['className'];
 	}
+	if ( $attributes['textAlign'] ) {
+		$classes .= ' has-text-align-' . $attributes['textAlign'];
+	}
 
 	if ( '' !== $attributes['textColor'] || '' !== $attributes['customTextColor'] ) {
 		$classes .= ' has-text-color';
@@ -221,7 +224,7 @@ function newspack_blocks_format_byline( $author_info ) {
 	$index    = -1;
 	$elements = array_merge(
 		[
-			'<span class="author-prefix">' . esc_html_x( 'by', 'post author', 'newspack-blocks' ) . ' </span>',
+			'<span class="author-prefix">' . esc_html_x( 'by', 'post author', 'newspack-blocks' ) . '</span> ',
 		],
 		array_reduce(
 			$author_info,