diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx
index f6e3898701f..d220d0fdb67 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx
+++ b/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 ;
+ }
+
return (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/utils.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/utils.tsx
index eb2e15258b2..d5b97d3ea2e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/utils.tsx
+++ b/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;
diff --git a/plugins/woocommerce/changelog/fix-51154-product-gallery-fatal b/plugins/woocommerce/changelog/fix-51154-product-gallery-fatal
new file mode 100644
index 00000000000..3ed4766c3d0
--- /dev/null
+++ b/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
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
index 812a3baaf98..9d52abacc8a 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
+++ b/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() );
diff --git a/plugins/woocommerce/src/Blocks/Utils/ProductGalleryUtils.php b/plugins/woocommerce/src/Blocks/Utils/ProductGalleryUtils.php
index 78c6cefe9e0..bb8eee65ae9 100644
--- a/plugins/woocommerce/src/Blocks/Utils/ProductGalleryUtils.php
+++ b/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 ) {