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 ) {