diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 9b7cb2ab19e..25d9197cb63 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -3,6 +3,8 @@ */ import { gallery as icon } from '@wordpress/icons'; import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; +import { createBlock } from '@wordpress/blocks'; +import { isExperimentalBuild } from '@woocommerce/block-settings'; /** * Internal dependencies @@ -11,6 +13,8 @@ import edit from './edit'; import metadata from './block.json'; import './style.scss'; +const galleryBlock = isExperimentalBuild() ? 'woocommerce/product-gallery' : ''; + registerBlockSingleProductTemplate( { blockName: metadata.name, // @ts-expect-error: `metadata` currently does not have a type definition in WordPress core @@ -19,6 +23,17 @@ registerBlockSingleProductTemplate( { icon, // @ts-expect-error `edit` can be extended to include other attributes edit, + transforms: { + to: [ + { + type: 'block', + blocks: [ galleryBlock ], + transform: () => { + return createBlock( galleryBlock ); + }, + }, + ], + }, }, isAvailableOnPostEditor: false, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts index ffebdd43881..49e809c3467 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts @@ -6,12 +6,17 @@ import { isWpVersion } from '@woocommerce/settings'; import { BlockInstance, createBlock } from '@wordpress/blocks'; import { VARIATION_NAME as PRODUCT_TITLE_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-title'; import { VARIATION_NAME as PRODUCT_SUMMARY_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-summary'; +import { isExperimentalBuild } from '@woocommerce/block-settings'; /** * Internal dependencies */ import { OnClickCallbackParameter } from './types'; +const galleryBlock = isExperimentalBuild() + ? 'woocommerce/product-gallery' + : 'woocommerce/product-image-gallery'; + const getBlockifiedTemplate = () => [ createBlock( 'woocommerce/breadcrumbs' ), @@ -29,7 +34,7 @@ const getBlockifiedTemplate = () => justifyContent: 'right', width: '512px', }, - [ createBlock( 'woocommerce/product-image-gallery' ) ] + [ createBlock( galleryBlock ) ] ), createBlock( 'core/column', {}, [ createBlock( 'core/post-title', { diff --git a/plugins/woocommerce-blocks/changelog/42719-product-gallery b/plugins/woocommerce-blocks/changelog/42719-product-gallery new file mode 100644 index 00000000000..163958d0d65 --- /dev/null +++ b/plugins/woocommerce-blocks/changelog/42719-product-gallery @@ -0,0 +1,3 @@ +Significance: patch +Type: tweak +Comment: Product Gallery: Add transforms for better discovery.