@automattic/newspack-blocks 1.60.1 → 1.61.0

package/includes/class-newspack-blocks-api.php

@@ -96,19 +96,9 @@ class Newspack_Blocks_API {
 			$authors = get_coauthors();
 
 			foreach ( $authors as $author ) {
-				// Check if this is a guest author post type.
-				if ( 'guest-author' === get_post_type( $author->ID ) ) {
-					// If yes, make sure the author actually has an avatar set; otherwise, coauthors_get_avatar returns a featured image.
-					if ( get_post_thumbnail_id( $author->ID ) ) {
-						$author_avatar = coauthors_get_avatar( $author, 48 );
-					} else {
-						// If there is no avatar, force it to return the current fallback image.
-						$author_avatar = get_avatar( ' ' );
-					}
-				} else {
-					$author_avatar = coauthors_get_avatar( $author, 48 );
-				}
-				$author_link = null;
+				$author_avatar = coauthors_get_avatar( $author, 48 );
+				$author_link   = null;
+
 				if ( function_exists( 'coauthors_posts_links' ) ) {
 					$author_link = get_author_posts_url( $author->ID, $author->user_nicename );
 				}

package/includes/class-newspack-blocks.php

@@ -430,55 +430,67 @@ class Newspack_Blocks {
 	public static function image_size_for_orientation( $orientation = 'landscape' ) {
 		$sizes = array(
 			'landscape' => array(
-				'large'  => array(
+				'large'        => array(
 					1200,
 					900,
 				),
-				'medium' => array(
+				'medium'       => array(
 					800,
 					600,
 				),
-				'small'  => array(
+				'intermediate' => array(
+					600,
+					450,
+				),
+				'small'        => array(
 					400,
 					300,
 				),
-				'tiny'   => array(
+				'tiny'         => array(
 					200,
 					150,
 				),
 			),
 			'portrait'  => array(
-				'large'  => array(
+				'large'        => array(
 					900,
 					1200,
 				),
-				'medium' => array(
+				'medium'       => array(
 					600,
 					800,
 				),
-				'small'  => array(
+				'intermediate' => array(
+					450,
+					600,
+				),
+				'small'        => array(
 					300,
 					400,
 				),
-				'tiny'   => array(
+				'tiny'         => array(
 					150,
 					200,
 				),
 			),
 			'square'    => array(
-				'large'  => array(
+				'large'        => array(
 					1200,
 					1200,
 				),
-				'medium' => array(
+				'medium'       => array(
 					800,
 					800,
 				),
-				'small'  => array(
+				'intermediate' => array(
+					600,
+					600,
+				),
+				'small'        => array(
 					400,
 					400,
 				),
-				'tiny'   => array(
+				'tiny'         => array(
 					200,
 					200,
 				),
@@ -510,6 +522,10 @@ class Newspack_Blocks {
 		add_image_size( 'newspack-article-block-portrait-medium', 600, 800, true );
 		add_image_size( 'newspack-article-block-square-medium', 800, 800, true );
 
+		add_image_size( 'newspack-article-block-landscape-intermediate', 600, 450, true );
+		add_image_size( 'newspack-article-block-portrait-intermediate', 450, 600, true );
+		add_image_size( 'newspack-article-block-square-intermediate', 600, 600, true );
+
 		add_image_size( 'newspack-article-block-landscape-small', 400, 300, true );
 		add_image_size( 'newspack-article-block-portrait-small', 300, 400, true );
 		add_image_size( 'newspack-article-block-square-small', 400, 400, true );
@@ -616,11 +632,13 @@ class Newspack_Blocks {
 				$args['category__not_in'] = $category_exclusions;
 			}
 
+			$is_co_authors_plus_active = class_exists( 'CoAuthors_Guest_Authors' );
+
 			if ( $authors && count( $authors ) ) {
 				$co_authors_names = [];
 				$author_names     = [];
 
-				if ( class_exists( 'CoAuthors_Guest_Authors' ) ) {
+				if ( $is_co_authors_plus_active ) {
 					$co_authors_guest_authors = new CoAuthors_Guest_Authors();
 
 					foreach ( $authors as $index => $author_id ) {
@@ -669,21 +687,23 @@ class Newspack_Blocks {
 				} elseif ( empty( $co_authors_names ) && count( $authors ) ) {
 					$args['author__in'] = $authors;
 
-					// Don't get any posts that are attributed to other CAP guest authors.
-					$args['tax_query'] = [ // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
-						[
-							'relation' => 'OR',
-							[
-								'taxonomy' => 'author',
-								'operator' => 'NOT EXISTS',
-							],
+					if ( $is_co_authors_plus_active ) {
+						// Don't get any posts that are attributed to other CAP guest authors.
+						$args['tax_query'] = [ // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
 							[
-								'field'    => 'name',
-								'taxonomy' => 'author',
-								'terms'    => $author_names,
+								'relation' => 'OR',
+								[
+									'taxonomy' => 'author',
+									'operator' => 'NOT EXISTS',
+								],
+								[
+									'field'    => 'name',
+									'taxonomy' => 'author',
+									'terms'    => $author_names,
+								],
 							],
-						],
-					];
+						];
+					}
 				} else {
 					// The query contains both WP users and CAP guest authors. We need to filter the SQL query.
 					self::$filter_clauses = [
@@ -727,19 +747,8 @@ class Newspack_Blocks {
 		if ( function_exists( 'coauthors_posts_links' ) && ! empty( get_coauthors() ) ) {
 			$authors = get_coauthors();
 			foreach ( $authors as $author ) {
-				// Check if this is a guest author post type.
-				if ( 'guest-author' === get_post_type( $author->ID ) ) {
-					// If yes, make sure the author actually has an avatar set; otherwise, coauthors_get_avatar returns a featured image.
-					if ( get_post_thumbnail_id( $author->ID ) ) {
-						$author->avatar = coauthors_get_avatar( $author, 48 );
-					} else {
-						// If there is no avatar, force it to return the current fallback image.
-						$author->avatar = get_avatar( ' ' );
-					}
-				} else {
-					$author->avatar = coauthors_get_avatar( $author, 48 );
-				}
-				$author->url = get_author_posts_url( $author->ID, $author->user_nicename );
+				$author->avatar = coauthors_get_avatar( $author, 48 );
+				$author->url    = get_author_posts_url( $author->ID, $author->user_nicename );
 			}
 			return $authors;
 		}

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.blog/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         1.60.1
+ * Version:         1.61.0
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '1.60.1' );
+define( 'NEWSPACK_BLOCKS__VERSION', '1.61.0' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "1.60.1",
+	"version": "1.61.0",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.2.0",
-		"@testing-library/dom": "^8.19.0",
+		"@testing-library/dom": "^8.19.1",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/lodash": "^4.14.191",
 		"@types/lodash.debounce": "^4.0.7",
@@ -13,7 +13,7 @@
 		"html-entities": "^2.3.3",
 		"identity-obj-proxy": "^3.0.0",
 		"lint-staged": "^13.1.0",
-		"newspack-scripts": "^4.3.8",
+		"newspack-scripts": "^4.6.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "npm:wp-prettier@^2.6.2-beta-1",
 		"stylelint": "^14.9.1"

package/src/blocks/author-profile/editor.scss

@@ -2,7 +2,7 @@
 @use '../../shared/sass/mixins';
 
 .editor-styles-wrapper {
-	.newspack-blocks-author-profile {
+	.wp-block-newspack-blocks-author-profile {
 		.components-notice {
 			margin: 0 0 2rem 0;
 			width: 100%;
@@ -22,6 +22,10 @@
 			pointer-events: none;
 		}
 
+		p {
+			font-size: 1em;
+		}
+
 		&__bio {
 			@include mixins.media( mobile ) {
 				flex: 4;

package/src/blocks/author-profile/view.scss

@@ -14,8 +14,8 @@
 		margin-bottom: 0.5em;
 	}
 
-	p:not( &__employment ) {
-		font-size: 1em !important;
+	p {
+		font-size: 1em;
 	}
 
 	&.text-size-small {
@@ -66,9 +66,11 @@
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+
 	&__employment {
 		font-size: 0.8em !important;
 	}
+
 	&__social-links {
 		display: flex;
 		flex-wrap: wrap;

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

@@ -277,7 +277,13 @@ export const processStreamlinedElements = ( parentElement = document ) =>
 			el.classList.remove( 'stripe-payment--invisible' );
 		};
 
-		initStripe();
+		// Initialise Stripe once the element is visible.
+		const observer = new IntersectionObserver( entries => {
+			if ( entries[ 0 ].isIntersecting ) {
+				initStripe();
+			}
+		} );
+		observer.observe( el );
 
 		// Card form unravelling.
 		const submitButtonEl: HTMLButtonElement | null = el.querySelector( 'button[type="submit"]' );

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

@@ -26,7 +26,6 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 	 */
 	public function __construct() {
 		$this->namespace = 'newspack-blocks/v1';
-		$this->rest_base = 'articles';
 	}
 
 	/**
@@ -38,7 +37,7 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 		// Endpoint to get articles on the front-end.
 		register_rest_route(
 			$this->namespace,
-			'/' . $this->rest_base,
+			'/articles',
 			[
 				[
 					'methods'             => WP_REST_Server::READABLE,

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

@@ -341,6 +341,8 @@ class Edit extends Component {
 			},
 		];
 
+		const handleAttributeChange = key => value => setAttributes( { [ key ]: value } );
+
 		return (
 			<Fragment>
 				<PanelBody title={ __( 'Display Settings', 'newspack-blocks' ) } initialOpen={ true }>
@@ -350,29 +352,19 @@ class Edit extends Component {
 							setAttributes( { postsToShow: _postsToShow || 1 } )
 						}
 						specificMode={ specificMode }
-						onSpecificModeChange={ _specificMode =>
-							setAttributes( { specificMode: _specificMode } )
-						}
+						onSpecificModeChange={ handleAttributeChange( 'specificMode' ) }
 						specificPosts={ specificPosts }
-						onSpecificPostsChange={ _specificPosts =>
-							setAttributes( { specificPosts: _specificPosts } )
-						}
+						onSpecificPostsChange={ handleAttributeChange( 'specificPosts' ) }
 						authors={ authors }
-						onAuthorsChange={ _authors => setAttributes( { authors: _authors } ) }
+						onAuthorsChange={ handleAttributeChange( 'authors' ) }
 						categories={ categories }
-						onCategoriesChange={ _categories => setAttributes( { categories: _categories } ) }
+						onCategoriesChange={ handleAttributeChange( 'categories' ) }
 						tags={ tags }
-						onTagsChange={ _tags => {
-							setAttributes( { tags: _tags } );
-						} }
+						onTagsChange={ handleAttributeChange( 'tags' ) }
 						tagExclusions={ tagExclusions }
-						onTagExclusionsChange={ _tagExclusions =>
-							setAttributes( { tagExclusions: _tagExclusions } )
-						}
+						onTagExclusionsChange={ handleAttributeChange( 'tagExclusions' ) }
 						categoryExclusions={ categoryExclusions }
-						onCategoryExclusionsChange={ _categoryExclusions =>
-							setAttributes( { categoryExclusions: _categoryExclusions } )
-						}
+						onCategoryExclusionsChange={ handleAttributeChange( 'categoryExclusions' ) }
 						postType={ postType }
 					/>
 					{ postLayout === 'grid' && (
@@ -380,7 +372,7 @@ class Edit extends Component {
 							<RangeControl
 								label={ __( 'Columns', 'newspack-blocks' ) }
 								value={ columns }
-								onChange={ _columns => setAttributes( { columns: _columns } ) }
+								onChange={ handleAttributeChange( 'columns' ) }
 								min={ 2 }
 								max={ 6 }
 								required

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

@@ -39,6 +39,11 @@ call_user_func(
 			'data-hero-candidate' => true,
 			'alt'                 => trim( wp_strip_all_tags( get_the_title( $post_id ) ) ),
 		);
+
+		// This global will be used by the newspack_blocks_filter_hpb_srcset filter.
+		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';
@@ -83,7 +88,9 @@ call_user_func(
 				<?php if ( $post_link ) : ?>
 				<a href="<?php echo esc_url( $post_link ); ?>" rel="bookmark" tabindex="-1" aria-hidden="true">
 				<?php endif; ?>
-					<?php the_post_thumbnail( $image_size, $thumbnail_args ); ?>
+				<?php add_filter( 'wp_calculate_image_sizes', 'newspack_blocks_filter_hpb_sizes' ); ?>
+				<?php the_post_thumbnail( $image_size, $thumbnail_args ); ?>
+				<?php remove_filter( 'wp_calculate_image_sizes', 'newspack_blocks_filter_hpb_sizes' ); ?>
 				<?php if ( $post_link ) : ?>
 				</a>
 				<?php endif; ?>

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

@@ -5,6 +5,71 @@
  * @package WordPress
  */
 
+/**
+ * Calculate the maximum width of an image in the Homepage Posts block.
+ */
+function newspack_blocks_hpb_maximum_image_width() {
+	$max_width = 0;
+
+	global $newspack_blocks_hpb_rendering_context;
+	if ( isset( $newspack_blocks_hpb_rendering_context['attrs'] ) ) {
+		$attributes = $newspack_blocks_hpb_rendering_context['attrs'];
+		if ( empty( $attributes ) ) {
+			return $max_width;
+		}
+		if ( isset( $attributes['align'] ) && in_array( $attributes['align'], [ 'full', 'wide' ], true ) ) {
+			// For full and wide alignments, the image width is more than 100% of the content width
+			// and depends on site width. Can't make assumptions about the site width.
+			return $max_width;
+		}
+		$site_content_width  = 1200;
+		$is_image_half_width = in_array( $attributes['mediaPosition'], [ 'left', 'right' ], true );
+		if ( 'grid' === $attributes['postLayout'] ) {
+			$columns = $attributes['columns'];
+			if ( $is_image_half_width ) {
+				// If the media position is on left or right, the image is 50% of the column width.
+				$columns = $columns * 2;
+			}
+			return $site_content_width / $columns;
+		} elseif ( 'list' === $attributes['postLayout'] && $is_image_half_width ) {
+			return $site_content_width / 2;
+		}
+	}
+	return $max_width;
+}
+
+/**
+ * Set image `sizes` attribute based on the maximum image width.
+ *
+ * @param array $sizes Sizes for the sizes attribute.
+ */
+function newspack_blocks_filter_hpb_sizes( $sizes ) {
+	if ( defined( 'NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION' ) && NEWSPACK_DISABLE_HPB_IMAGE_OPTIMISATION ) {
+		// Allow disabling the image optimisation per-site.
+		return $sizes;
+	}
+	global $newspack_blocks_hpb_current_theme;
+	if ( ! $newspack_blocks_hpb_current_theme ) {
+		$newspack_blocks_hpb_current_theme = wp_get_theme()->template;
+	}
+	if ( stripos( $newspack_blocks_hpb_current_theme, 'newspack' ) === false ) {
+		// Bail if not using a Newspack theme – assumptions about the site content width can't be made then.
+		return $sizes;
+	}
+	$max_width = newspack_blocks_hpb_maximum_image_width();
+	if ( 0 !== $max_width ) {
+		// >=782px is the desktop size – set width as computed.
+		$sizes = '(min-width: 782px) ' . $max_width . 'px';
+		// Between 600-782px is the tablet size – all columns will collapse to two-column layout
+		// (assuming 5% padding on each side and between columns).
+		$sizes .= ', (min-width: 600px) 42.5vw';
+		// <=600px is the mobile size – columns will stack to full width
+		// (assumming 5% side padding on each side).
+		$sizes .= ', 90vw';
+	}
+	return $sizes;
+}
+
 /**
  * Renders the `newspack-blocks/homepage-posts` block on server.
  *

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

@@ -21,7 +21,6 @@ class WP_REST_Newspack_Iframe_Controller extends WP_REST_Controller {
 	 */
 	public function __construct() {
 		$this->namespace = 'newspack-blocks/v1';
-		$this->rest_base = 'iframe';
 	}
 
 	/**