Product Gallery: Add a Product Image fallback

src/BlockTypes/ProductGallery.php

@@ -121,12 +121,13 @@ protected function render( $attributes, $content, $block ) {
 			$classname_single_image = 'is-single-product-gallery-image';
 		}
 
-		$number_of_thumbnails = $block->attributes['thumbnailsNumberOfThumbnails'] ?? 0;
-		$classname            = $attributes['className'] ?? '';
-		$dialog               = isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ? $this->render_dialog() : '';
-		$post_id              = $block->context['postId'] ?? '';
-		$product              = wc_get_product( $post_id );
-		$product_id           = strval( $product->get_id() );
+		$number_of_thumbnails           = $block->attributes['thumbnailsNumberOfThumbnails'] ?? 0;
+		$classname                      = $attributes['className'] ?? '';
+		$dialog                         = isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ? $this->render_dialog() : '';
+		$post_id                        = $block->context['postId'] ?? '';
+		$product                        = wc_get_product( $post_id );
+		$product_gallery_first_image_id = reset( ProductGalleryUtils::get_product_gallery_image_ids( $product, 1 ) );
+		$product_id                     = strval( $product->get_id() );
 
 		$html = $this->inject_dialog( $content, $dialog );
 		$p    = new \WP_HTML_Tag_Processor( $html );
@@ -137,8 +138,8 @@ protected function render( $attributes, $content, $block ) {
 				'data-wc-context',
 				wp_json_encode(
 					array(
-						'selectedImage'                   => $product->get_image_id(),
-						'firstMainImageId'                => $product->get_image_id(),
+						'selectedImage'                   => $product_gallery_first_image_id,
+						'firstMainImageId'                => $product_gallery_first_image_id,
 						'isDialogOpen'                    => false,
 						'visibleImagesIds'                => ProductGalleryUtils::get_product_gallery_image_ids( $product, $number_of_thumbnails, true ),
 						'dialogVisibleImagesIds'          => ProductGalleryUtils::get_product_gallery_image_ids( $product, null, false ),

src/BlockTypes/ProductGalleryThumbnails.php

@@ -132,11 +132,10 @@ protected function render( $attributes, $content, $block ) {
 			$product = wc_get_product( $post_id );
 
 			if ( $product ) {
-				$post_thumbnail_id      = $product->get_image_id();
 				$crop_images            = $block->context['cropImages'] ?? false;
 				$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail', $crop_images );
 
-				if ( $product_gallery_images && count( $product_gallery_images ) > 1 && $post_thumbnail_id ) {
+				if ( $product_gallery_images && count( $product_gallery_images ) > 1 ) {
 					$html                 = '';
 					$number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3;
 					$mode                 = $block->context['mode'] ?? '';

src/Utils/ProductGalleryUtils.php

@@ -33,17 +33,21 @@ public static function get_product_gallery_images( $post_id, $size = 'full', $at
 				$size = $crop_images ? self::CROP_IMAGE_SIZE_NAME : $size;
 
 				foreach ( $all_product_gallery_image_ids as $product_gallery_image_id ) {
-					if ( $crop_images ) {
-						self::maybe_generate_intermediate_image( $product_gallery_image_id, self::CROP_IMAGE_SIZE_NAME );
+					if ( '0' !== $product_gallery_image_id ) {
+						if ( $crop_images ) {
+							self::maybe_generate_intermediate_image( $product_gallery_image_id, self::CROP_IMAGE_SIZE_NAME );
+						}
+
+						$product_image_html = wp_get_attachment_image(
+							$product_gallery_image_id,
+							$size,
+							false,
+							$attributes
+						);
+					} else {
+						$product_image_html = self::get_product_image_placeholder_html( $attributes );
 					}
 
-					$product_image_html = wp_get_attachment_image(
-						$product_gallery_image_id,
-						$size,
-						false,
-						$attributes
-					);
-
 					if ( $wrapper_class ) {
 						$product_image_html = '<div class="' . $wrapper_class . '">' . $product_image_html . '</div>';
 					}
@@ -81,6 +85,11 @@ public static function get_product_gallery_image_ids( $product, $max_number_of_v
 		// All other product gallery images.
 		$product_gallery_image_ids = $product->get_gallery_image_ids();
 
+		// If the Product image is not set, we need to set it to a placeholder image.
+		if ( '' === $featured_image_id ) {
+			$featured_image_id = '0';
+		}
+
 		// We don't want to show the same image twice, so we have to remove the featured image from the gallery if it's there.
 		$unique_image_ids = array_unique(
 			array_merge(
@@ -145,4 +154,27 @@ public static function maybe_generate_intermediate_image( $attachment_id, $size
 
 		wp_update_attachment_metadata( $attachment_id, $image_metadata );
 	}
+
+	/**
+	 * Get the product image placeholder HTML.
+	 *
+	 * @param array $attributes Attributes.
+	 * @return string
+	 */
+	public static function get_product_image_placeholder_html( $attributes = array() ) {
+		$attributes['src'] = esc_url( plugins_url( 'woocommerce-blocks/images/block-placeholders/product-image-gallery.svg' ) );
+		$attributes['alt'] = esc_attr__( 'Product Image Placeholder', 'woo-gutenberg-products-block' );
+
+		$attributes_string = array_reduce(
+			array_keys( $attributes ),
+			function ( $carry, $key ) use ( $attributes ) {
+				$key   = esc_attr( $key );
+				$value = esc_attr( $attributes[ $key ] );
+				return $carry . $key . '="' . $value . '" ';
+			},
+			''
+		);
+
+		return '<img ' . $attributes_string . ' />';
+	}
 }