From ccecb00423220e002c57e0e3df0d49584fb85883 Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Fri, 2 Apr 2021 18:09:00 +0200
Subject: [PATCH 1/4] feat(carousel): align no posts found message

---
 src/blocks/carousel/edit.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
index 45602fd10..53d75383e 100644
--- a/src/blocks/carousel/edit.js
+++ b/src/blocks/carousel/edit.js
@@ -122,11 +122,14 @@ class Edit extends Component {
 			autoplay && 'wp-block-newspack-blocks-carousel__autoplay-playing'
 		);
 		const dateFormat = __experimentalGetSettings().formats.date;
+		const hasNoPosts = latestPosts && ! latestPosts.length;
 		return (
 			<Fragment>
 				<div className={ classes } ref={ this.carouselRef }>
-					{ latestPosts && ! latestPosts.length && (
-						<Placeholder>{ __( 'Sorry, no posts were found.' ) }</Placeholder>
+					{ hasNoPosts && (
+						<Placeholder className="component-placeholder__align-center">
+							<div style={ { margin: 'auto' } }>{ __( 'Sorry, no posts were found.' ) }</div>
+						</Placeholder>
 					) }
 					{ ! latestPosts && (
 						<Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />

From 1aba5b55bef99e80678e99af5c1add1b9a50e1cf Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Fri, 2 Apr 2021 18:22:17 +0200
Subject: [PATCH 2/4] feat: handle posts with no featured image

Closes #443
---
 includes/class-newspack-blocks-api.php |  15 ---
 src/blocks/carousel/edit.js            | 128 ++++++++++++-------------
 src/blocks/carousel/view.php           |  29 +++---
 src/blocks/carousel/view.scss          |   5 +
 4 files changed, 82 insertions(+), 95 deletions(-)

diff --git a/includes/class-newspack-blocks-api.php b/includes/class-newspack-blocks-api.php
index 7bd2add71..869a7e70e 100644
--- a/includes/class-newspack-blocks-api.php
+++ b/includes/class-newspack-blocks-api.php
@@ -559,21 +559,6 @@ public static function add_post_title_wildcard_search( $where, $query ) {
 	 * @return array          $args    Filtered request parameters.
 	 */
 	public static function post_meta_request_params( $args, $request ) {
-		$params = $request->get_params();
-
-		if (
-			isset( $params['meta_key'], $params['meta_value_num'], $params['meta_compare'] ) &&
-			'_thumbnail_id' === $params['meta_key'] &&
-			'0' === $params['meta_value_num'] &&
-			'>' === $params['meta_compare']
-		) {
-			// phpcs:disable WordPress.DB.SlowDBQuery
-			$args['meta_key']       = $params['meta_key'];
-			$args['meta_value_num'] = $params['meta_value_num'];
-			$args['meta_compare']   = $params['meta_compare'];
-			// phpcs:enable WordPress.DB.SlowDBQuery
-		}
-
 		if ( $request->get_param( 'suppress_password_protected_posts' ) ) {
 			$args['has_password'] = false;
 		}
diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
index 53d75383e..73bed7bc7 100644
--- a/src/blocks/carousel/edit.js
+++ b/src/blocks/carousel/edit.js
@@ -149,70 +149,71 @@ class Edit extends Component {
 								</Fragment>
 							) }
 							<div className="swiper-wrapper">
-								{ latestPosts.map(
-									post =>
-										post.newspack_featured_image_src && (
-											<article className="post-has-image swiper-slide" key={ post.id }>
-												<figure className="post-thumbnail">
-													{ post.newspack_featured_image_src && (
-														<a href="#" rel="bookmark">
-															<img src={ post.newspack_featured_image_src.large } alt="" />
-														</a>
-													) }
-												</figure>
-												<div className="entry-wrapper">
-													{ post.newspack_post_sponsors && (
-														<span className="cat-links sponsor-label">
-															<span className="flag">
-																{ post.newspack_post_sponsors[ 0 ].flag }
-															</span>
-														</span>
-													) }
-													{ showCategory &&
-														post.newspack_category_info.length &&
-														! post.newspack_post_sponsors && (
-															<div className="cat-links">
-																<a href="#">{ decodeEntities( post.newspack_category_info ) }</a>
-															</div>
-														) }
-													<h3 className="entry-title">
-														<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
-													</h3>
-													<div className="entry-meta">
-														{ post.newspack_post_sponsors &&
-															formatSponsorLogos( post.newspack_post_sponsors ) }
-														{ post.newspack_post_sponsors &&
-															formatSponsorByline( post.newspack_post_sponsors ) }
-														{ showAuthor &&
-															showAvatar &&
-															! post.newspack_post_sponsors &&
-															formatAvatars( post.newspack_author_info ) }
-														{ showAuthor &&
-															! post.newspack_post_sponsors &&
-															formatByline( post.newspack_author_info ) }
-														{ showDate && (
-															<time className="entry-date published" key="pub-date">
-																{ dateI18n( dateFormat, post.date_gmt ) }
-															</time>
-														) }
+								{ latestPosts.map( post => (
+									<article className="post-has-image swiper-slide" key={ post.id }>
+										<figure className="post-thumbnail">
+											<a href="#" rel="bookmark">
+												{ post.newspack_featured_image_src ? (
+													<img src={ post.newspack_featured_image_src.large } alt="" />
+												) : (
+													<div className="wp-block-newspack-blocks-carousel__placeholder"></div>
+												) }
+											</a>
+										</figure>
+										<div className="entry-wrapper">
+											{ post.newspack_post_sponsors && (
+												<span className="cat-links sponsor-label">
+													<span className="flag">{ post.newspack_post_sponsors[ 0 ].flag }</span>
+												</span>
+											) }
+											{ showCategory &&
+												post.newspack_category_info.length &&
+												! post.newspack_post_sponsors && (
+													<div className="cat-links">
+														<a href="#">{ decodeEntities( post.newspack_category_info ) }</a>
 													</div>
-												</div>
-											</article>
-										)
-								) }
+												) }
+											<h3 className="entry-title">
+												<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
+											</h3>
+											<div className="entry-meta">
+												{ post.newspack_post_sponsors &&
+													formatSponsorLogos( post.newspack_post_sponsors ) }
+												{ post.newspack_post_sponsors &&
+													formatSponsorByline( post.newspack_post_sponsors ) }
+												{ showAuthor &&
+													showAvatar &&
+													! post.newspack_post_sponsors &&
+													formatAvatars( post.newspack_author_info ) }
+												{ showAuthor &&
+													! post.newspack_post_sponsors &&
+													formatByline( post.newspack_author_info ) }
+												{ showDate && (
+													<time className="entry-date published" key="pub-date">
+														{ dateI18n( dateFormat, post.date_gmt ) }
+													</time>
+												) }
+											</div>
+										</div>
+									</article>
+								) ) }
 							</div>
-							<button
-								className="amp-carousel-button amp-carousel-button-prev swiper-button-prev"
-								ref={ this.btnPrevRef }
-							/>
-							<button
-								className="amp-carousel-button amp-carousel-button-next swiper-button-next"
-								ref={ this.btnNextRef }
-							/>
-							<div
-								className="swiper-pagination-bullets amp-pagination"
-								ref={ this.paginationRef }
-							/>
+							{ ! hasNoPosts && (
+								<>
+									<button
+										className="amp-carousel-button amp-carousel-button-prev swiper-button-prev"
+										ref={ this.btnPrevRef }
+									/>
+									<button
+										className="amp-carousel-button amp-carousel-button-next swiper-button-next"
+										ref={ this.btnNextRef }
+									/>
+									<div
+										className="swiper-pagination-bullets amp-pagination"
+										ref={ this.paginationRef }
+									/>
+								</>
+							) }
 						</Fragment>
 					) }
 				</div>
@@ -303,9 +304,6 @@ export default compose( [
 				categories,
 				author: authors,
 				tags,
-				meta_key: '_thumbnail_id',
-				meta_value_num: 0,
-				meta_compare: '>',
 			},
 			value => ! isUndefined( value )
 		);
diff --git a/src/blocks/carousel/view.php b/src/blocks/carousel/view.php
index 5d32cdf34..a74fb9f68 100644
--- a/src/blocks/carousel/view.php
+++ b/src/blocks/carousel/view.php
@@ -38,9 +38,6 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 		'post_status'         => 'publish',
 		'suppress_filters'    => false,
 		'ignore_sticky_posts' => true,
-		'meta_key'            => '_thumbnail_id', // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key
-		'meta_value_num'      => 0,
-		'meta_compare'        => '>',
 	);
 
 	if ( $authors ) {
@@ -66,28 +63,30 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 		while ( $article_query->have_posts() ) :
 			$article_query->the_post();
 			$authors = Newspack_Blocks::prepare_authors();
-			if ( ! has_post_thumbnail() ) {
-				continue;
-			}
 
 			// Get sponsors for this post.
 			$sponsors = Newspack_Blocks::get_all_sponsors( get_the_id() );
 
 			$counter++;
+			$has_featured_image = has_post_thumbnail();
 			?>
 
 			<article class="<?php echo esc_attr( implode( ' ', $article_classes ) ); ?>">
 				<figure class="post-thumbnail">
 					<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
-						<?php
-							the_post_thumbnail(
-								'large',
-								array(
-									'object-fit' => 'cover',
-									'layout'     => 'fill',
-								)
-							);
-						?>
+						<?php if ( $has_featured_image ) : ?>
+							<?php
+								the_post_thumbnail(
+									'large',
+									array(
+										'object-fit' => 'cover',
+										'layout'     => 'fill',
+									)
+								);
+							?>
+						<?php else : ?>
+							<div class="wp-block-newspack-blocks-carousel__placeholder"></div>
+						<?php endif; ?>
 					</a>
 				</figure>
 				<div class="entry-wrapper">
diff --git a/src/blocks/carousel/view.scss b/src/blocks/carousel/view.scss
index 7496071cf..deb66c105 100644
--- a/src/blocks/carousel/view.scss
+++ b/src/blocks/carousel/view.scss
@@ -1,5 +1,6 @@
 @import '../../shared/sass/variables';
 @import '../../shared/sass/mixins';
+@import '../../shared/sass/colors';
 
 .wp-block-newspack-blocks-carousel {
 	position: relative;
@@ -87,6 +88,10 @@
 			width: 100%;
 		}
 	}
+	&__placeholder {
+		height: 420px;
+		background: $color__background-screen;
+	}
 	p {
 		white-space: normal;
 	}

From 9660922eda7f97fc2005bd71eb15e1ed67385b35 Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Tue, 6 Apr 2021 11:56:14 +0200
Subject: [PATCH 3/4] feat: do not render anything if no posts found

---
 src/blocks/carousel/view.php | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/blocks/carousel/view.php b/src/blocks/carousel/view.php
index 770d3348d..b77c18a7c 100644
--- a/src/blocks/carousel/view.php
+++ b/src/blocks/carousel/view.php
@@ -31,7 +31,10 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 	}
 	$classes = Newspack_Blocks::block_classes( 'carousel', $attributes, $other );
 
-	$article_query   = new WP_Query( Newspack_Blocks::build_articles_query( $attributes, apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/carousel' ) ) );
+	$article_query = new WP_Query( Newspack_Blocks::build_articles_query( $attributes, apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/carousel' ) ) );
+	if ( false === $article_query->have_posts() ) {
+		return;
+	}
 	$counter         = 0;
 	$article_classes = [
 		'post-has-image',

From c439d60f50f5f72fd091be2cd60dd1abd822a088 Mon Sep 17 00:00:00 2001
From: Adam Borowski <adam@adamboro.com>
Date: Tue, 6 Apr 2021 12:04:26 +0200
Subject: [PATCH 4/4] feat: hide navigation if only one post presented

---
 src/blocks/carousel/edit.js  | 3 ++-
 src/blocks/carousel/view.php | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/blocks/carousel/edit.js b/src/blocks/carousel/edit.js
index fcdf1ddda..00425daf4 100644
--- a/src/blocks/carousel/edit.js
+++ b/src/blocks/carousel/edit.js
@@ -137,6 +137,7 @@ class Edit extends Component {
 		);
 		const dateFormat = __experimentalGetSettings().formats.date;
 		const hasNoPosts = latestPosts && ! latestPosts.length;
+		const hasOnePost = latestPosts && latestPosts.length === 1;
 		return (
 			<Fragment>
 				<div className={ classes } ref={ this.carouselRef }>
@@ -212,7 +213,7 @@ class Edit extends Component {
 									</article>
 								) ) }
 							</div>
-							{ ! hasNoPosts && (
+							{ ! hasNoPosts && ! hasOnePost && (
 								<>
 									<button
 										className="amp-carousel-button amp-carousel-button-prev swiper-button-prev"
diff --git a/src/blocks/carousel/view.php b/src/blocks/carousel/view.php
index b77c18a7c..a8a1c4544 100644
--- a/src/blocks/carousel/view.php
+++ b/src/blocks/carousel/view.php
@@ -236,7 +236,7 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 			'<div class="swiper-pagination-bullets amp-pagination">%s</div>',
 			implode( '', $buttons )
 		);
-		$navigation  = sprintf(
+		$navigation  = 1 === $counter ? '' : sprintf(
 			'<button class="swiper-button swiper-button-prev" aria-label="%s"></button><button class="swiper-button swiper-button-next" aria-label="%s"></button>',
 			esc_attr__( 'Previous Slide', 'newspack-blocks' ),
 			esc_attr__( 'Next Slide', 'newspack-blocks' )
@@ -257,6 +257,9 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 		$data_attributes[] = sprintf( 'data-autoplay_delay=%s', esc_attr( $delay ) );
 	}
 	Newspack_Blocks::enqueue_view_assets( 'carousel' );
+	if ( 1 === $counter ) {
+		$selector = '';
+	}
 	return sprintf(
 		'<div class="%1$s" id="wp-block-newspack-carousel__%2$d" %3$s>%4$s%5$s%6$s</div>',
 		esc_attr( $classes ),