Commit d1b11ab7a5 for woocommerce
commit d1b11ab7a5e8e00d3714cfc8281d29603edc6575
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri Jan 16 11:27:11 2026 +0100
Make Product Gallery and Add to Cart + Options blocks the default inside the Product block and when updating from the Classic Template block (#60872)
* Make Product Gallery and Add to Cart + Options blocks the default inside the Product block and when updating from the Classic Template block
* Add changelog file
* Switch to the non-blockified Add to Cart with Options block in tests
* CodeRabbit suggestions
* Set Product Gallery as default in product block
* Remove unnecessary import
* Update E2E test
---------
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/fix-update-product-gallery-add-to-cart-with-options-defaults b/plugins/woocommerce/changelog/fix-update-product-gallery-add-to-cart-with-options-defaults
new file mode 100644
index 0000000000..6345182bcc
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-update-product-gallery-add-to-cart-with-options-defaults
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Make Product Gallery and Add to Cart + Options blocks the default inside the Product block and when updating from the Classic Template block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/classic-template/single-product.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/classic-template/single-product.ts
index 3e3cccb9c1..3a5987fab9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/classic-template/single-product.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/classic-template/single-product.ts
@@ -2,6 +2,7 @@
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
+import { getSetting } from '@woocommerce/settings';
import { VARIATION_NAME as PRODUCT_TITLE_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-title';
import {
INNER_BLOCKS_PRODUCT_TEMPLATE as productCollectionInnerBlocksTemplate,
@@ -37,7 +38,7 @@ const getBlockifiedTemplate = () =>
justifyContent: 'right',
width: '512px',
},
- [ createBlock( 'woocommerce/product-image-gallery' ) ]
+ [ createBlock( 'woocommerce/product-gallery' ) ]
),
createBlock( 'core/column', {}, [
createBlock( 'core/post-title', {
@@ -51,7 +52,11 @@ const getBlockifiedTemplate = () =>
createBlock( 'woocommerce/product-summary', {
isDescendentOfSingleProductTemplate: true,
} ),
- createBlock( 'woocommerce/add-to-cart-form' ),
+ createBlock(
+ getSetting( 'isBlockTheme', false )
+ ? 'woocommerce/add-to-cart-with-options'
+ : 'woocommerce/add-to-cart-form'
+ ),
createBlock( 'woocommerce/product-meta' ),
] ),
]
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/constants.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/constants.tsx
index afed24dced..a1498b2153 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/constants.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/single-product/constants.tsx
@@ -3,6 +3,7 @@
*/
import { Icon, mediaAndText } from '@wordpress/icons';
import { getBlockMap } from '@woocommerce/atomic-utils';
+import { getSetting } from '@woocommerce/settings';
import type { InnerBlockTemplate } from '@wordpress/blocks';
/**
@@ -10,7 +11,6 @@ import type { InnerBlockTemplate } from '@wordpress/blocks';
*/
import metadata from './block.json';
import { VARIATION_NAME as PRODUCT_TITLE_VARIATION_NAME } from '../product-query/variations/elements/product-title';
-import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
export const BLOCK_ICON = (
<Icon
@@ -24,30 +24,7 @@ export const DEFAULT_INNER_BLOCKS: InnerBlockTemplate[] = [
'core/columns',
{},
[
- [
- 'core/column',
- {},
- [
- [
- 'woocommerce/product-image',
- {
- // Keep the attribute as false explicitly because we're using the inner block template
- // that includes the product-sale-badge block.
- showSaleBadge: false,
- isDescendentOfSingleProductBlock: true,
- imageSizing: ImageSizing.SINGLE,
- },
- [
- [
- 'woocommerce/product-sale-badge',
- {
- align: 'right',
- },
- ],
- ],
- ],
- ],
- ],
+ [ 'core/column', {}, [ [ 'woocommerce/product-gallery' ] ] ],
[
'core/column',
{},
@@ -73,7 +50,11 @@ export const DEFAULT_INNER_BLOCKS: InnerBlockTemplate[] = [
'woocommerce/product-summary',
{ isDescendentOfSingleProductBlock: true },
],
- [ 'woocommerce/add-to-cart-form' ],
+ [
+ getSetting( 'isBlockTheme', false )
+ ? 'woocommerce/add-to-cart-with-options'
+ : 'woocommerce/add-to-cart-form',
+ ],
[ 'woocommerce/product-meta' ],
],
],
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts
index 118eaf096a..d9ec9ff993 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-form/add-to-cart-form.block_theme.spec.ts
@@ -61,6 +61,18 @@ class BlockUtils {
}
await singleProductBlock.getByText( 'Done' ).click();
+
+ // Switch to the non-blockified Add to Cart with Options block
+ const addToCartWithOptionsBlock = await this.editor.getBlockByName(
+ 'woocommerce/add-to-cart-with-options'
+ );
+ await this.editor.selectBlocks( addToCartWithOptionsBlock );
+
+ await this.page
+ .getByRole( 'button', {
+ name: 'Switch back',
+ } )
+ .click();
}
async enableStepperMode() {
@@ -295,7 +307,7 @@ test.describe( `${ blockData.name } Block`, () => {
await editor.publishAndVisitPost();
const minusButton = page.getByLabel( `Reduce quantity` );
- const plusButton = page.getByLabel( `Increase quantity ` );
+ const plusButton = page.getByLabel( `Increase quantity` );
await expect( minusButton ).toBeHidden();
await expect( plusButton ).toBeHidden();
@@ -319,7 +331,7 @@ test.describe( `${ blockData.name } Block`, () => {
await editor.publishAndVisitPost();
const minusButton = page.getByLabel( `Reduce quantity` );
- const plusButton = page.getByLabel( `Increase quantity ` );
+ const plusButton = page.getByLabel( `Increase quantity` );
await expect( minusButton ).toBeHidden();
await expect( plusButton ).toBeHidden();
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
index c615741e31..1abf3b340a 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.spec.ts
@@ -334,7 +334,7 @@ test.describe( `${ blockData.name }`, () => {
await expect( productGalleryBlockOption ).toBeHidden();
} );
- test( 'should be visible on the post editor in Single Product block', async ( {
+ test( 'on the post editor, block should be in Single Product by default and is visible in inserter', async ( {
admin,
editor,
} ) => {
@@ -342,6 +342,10 @@ test.describe( `${ blockData.name }`, () => {
await editor.insertBlockUsingGlobalInserter( 'Product' );
await editor.canvas.getByText( 'Album' ).click();
await editor.canvas.getByText( 'Done' ).click();
+ // Block should be in Single Product by default.
+ await expect(
+ await editor.getBlockByName( blockData.name )
+ ).toHaveCount( 1 );
const singleProductBlock = await editor.getBlockByName(
'woocommerce/single-product'
);
@@ -352,9 +356,10 @@ test.describe( `${ blockData.name }`, () => {
{ clientId: singleProductClientId }
);
+ // Block should be visible in inserter and hence can be inserted in Single Product block.
await expect(
await editor.getBlockByName( blockData.name )
- ).toHaveCount( 1 );
+ ).toHaveCount( 2 );
} );
} );