Fix fatal when adding the Product Gallery (Beta) block into a pattern (#51189)

* Fix fatal when adding the Product Gallery (Beta) block into a pattern

* Add changelog file

* Linting

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx

@@ -10,6 +10,10 @@ import {
 import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import ErrorPlaceholder, {
+	ErrorObject,
+} from '@woocommerce/editor-components/error-placeholder';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -132,14 +136,16 @@ export const Edit = ( {
 
 	useEffect( () => {
 		const mode = getMode( currentTemplateId, templateType );
+		const newProductGalleryClientId =
+			attributes.productGalleryClientId || clientId;
 
 		setAttributes( {
 			...attributes,
 			mode,
-			productGalleryClientId: clientId,
+			productGalleryClientId: newProductGalleryClientId,
 		} );
 		// Move the Thumbnails block to the correct above or below the Large Image based on the thumbnailsPosition attribute.
-		moveInnerBlocksToPosition( attributes, clientId );
+		moveInnerBlocksToPosition( attributes, newProductGalleryClientId );
 	}, [
 		setAttributes,
 		attributes,
@@ -148,6 +154,18 @@ export const Edit = ( {
 		templateType,
 	] );
 
+	if ( attributes.productGalleryClientId !== clientId ) {
+		const error = {
+			message: __(
+				'productGalleryClientId and clientId codes mismatch.',
+				'woocommerce'
+			),
+			type: 'general',
+		} as ErrorObject;
+
+		return <ErrorPlaceholder error={ error } isLoading={ false } />;
+	}
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/utils.tsx

@@ -136,10 +136,10 @@ export const moveInnerBlocksToPosition = (
 ): void => {
 	const { getBlock, getBlockRootClientId, getBlockIndex } =
 		select( 'core/block-editor' );
-	const { moveBlockToPosition } = dispatch( 'core/block-editor' );
 	const productGalleryBlock = getBlock( clientId );
 
-	if ( productGalleryBlock ) {
+	if ( productGalleryBlock?.name === 'woocommerce/product-gallery' ) {
+		const { moveBlockToPosition } = dispatch( 'core/block-editor' );
 		const previousLayout = productGalleryBlock.innerBlocks.length
 			? productGalleryBlock.innerBlocks[ 0 ].attributes.layout
 			: null;

plugins/woocommerce/changelog/fix-51154-product-gallery-fatal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix error when adding the Product Gallery (Beta) block into a pattern

plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php

@@ -110,11 +110,14 @@ class ProductGallery extends AbstractBlock {
 	 * @return string Rendered block type output.
 	 */
 	protected function render( $attributes, $content, $block ) {
-		$post_id                = $block->context['postId'] ?? '';
+		$post_id = $block->context['postId'] ?? '';
+		$product = wc_get_product( $post_id );
+		if ( ! $product instanceof \WC_Product ) {
+			return '';
+		}
+
 		$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'thumbnail', array() );
 		$classname_single_image = '';
-		// This is a temporary solution. We have to refactor this code when the block will have to be addable on every page/post https://github.com/woocommerce/woocommerce-blocks/issues/10882.
-		global $product;
 
 		if ( count( $product_gallery_images ) < 2 ) {
 			// The gallery consists of a single image.
@@ -124,8 +127,6 @@ class ProductGallery extends AbstractBlock {
 		$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    = ProductGalleryUtils::get_product_gallery_image_ids( $product, 1 );
 		$product_gallery_first_image_id = reset( $product_gallery_first_image );
 		$product_id                     = strval( $product->get_id() );

plugins/woocommerce/src/Blocks/Utils/ProductGalleryUtils.php

@@ -26,7 +26,7 @@ class ProductGalleryUtils {
 		$product_gallery_images = array();
 		$product                = wc_get_product( $post_id );
 
-		if ( $product ) {
+		if ( $product instanceof \WC_Product ) {
 			$all_product_gallery_image_ids = self::get_product_gallery_image_ids( $product );
 
 			if ( 'full' === $size || 'full' !== $size && count( $all_product_gallery_image_ids ) > 1 ) {