diff --git a/assets/js/blocks/product-collection/constants.ts b/assets/js/blocks/product-collection/constants.ts index 3e65598bd1c..a88fd5d3754 100644 --- a/assets/js/blocks/product-collection/constants.ts +++ b/assets/js/blocks/product-collection/constants.ts @@ -59,7 +59,7 @@ export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = { displayLayout: { type: LayoutOptions.GRID, columns: 3, - shrinkColumns: false, + shrinkColumns: true, }, }; diff --git a/patterns/product-collection-full-grid.php b/patterns/product-collection-full-grid.php index 88ddd39338e..80419c375c5 100644 --- a/patterns/product-collection-full-grid.php +++ b/patterns/product-collection-full-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-grid.php b/patterns/product-collection-grid.php index 4552d20983b..ebf58027ce4 100644 --- a/patterns/product-collection-grid.php +++ b/patterns/product-collection-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-rows.php b/patterns/product-collection-rows.php index f449f420eb2..b52768a87b3 100644 --- a/patterns/product-collection-rows.php +++ b/patterns/product-collection-rows.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-collection-simple-grid.php b/patterns/product-collection-simple-grid.php index 4af8bbee522..cbf813f0990 100644 --- a/patterns/product-collection-simple-grid.php +++ b/patterns/product-collection-simple-grid.php @@ -7,7 +7,7 @@ */ ?> - +
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index b38f5bfb2cb..326a4b5e137 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -15,7 +15,7 @@

- +
diff --git a/patterns/related-products.php b/patterns/related-products.php index f695dcdbbf8..48b30be4610 100644 --- a/patterns/related-products.php +++ b/patterns/related-products.php @@ -9,7 +9,7 @@
- +

diff --git a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts index 4794d4315f7..0fdbe242949 100644 --- a/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts +++ b/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts @@ -317,30 +317,69 @@ test.describe( 'Product Collection', () => { } ); } ); - test( 'Responsive -> Block correctly adjusts number of columns on smaller screens', async ( { - pageObject, - } ) => { - await pageObject.publishAndGoToFrontend(); - - const firstProduct = pageObject.products.first(); + test.describe( 'Responsive', () => { + test( 'Block with shrink columns ENABLED correctly displays as grid', async ( { + pageObject, + } ) => { + await pageObject.publishAndGoToFrontend(); + const productTemplate = pageObject.productTemplate; + + await expect( productTemplate ).toHaveCSS( 'display', 'grid' ); + // By default there should be 3 columns, so grid-template-columns + // should be compiled to three values + await expect( productTemplate ).toHaveCSS( + 'grid-template-columns', + /^\d+(\.\d+)?px \d+(\.\d+)?px \d+(\.\d+)?px$/ + ); - // In the original viewport size, we expect the product width to be less than the parent width - // because we will have more than 1 column - let productSize = await firstProduct.boundingBox(); - let parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); - expect( productSize?.width ).toBeLessThan( - parentSize?.width as number - ); + await pageObject.setViewportSize( { + height: 667, + width: 390, // iPhone 12 Pro + } ); - await pageObject.setViewportSize( { - height: 667, - width: 375, + // Verifies grid-template-columns compiles to two numbers, + // which means there are two columns on mobile. + await expect( productTemplate ).toHaveCSS( + 'grid-template-columns', + /^\d+(\.\d+)?px \d+(\.\d+)?px$/ + ); } ); - // In the smaller viewport size, we expect the product width to be (approximately) the same as the parent width - // because we will have only 1 column - productSize = await firstProduct.boundingBox(); - parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); - expect( productSize?.width ).toBeCloseTo( parentSize?.width as number ); + test( 'Block with shrink columns DISABLED collapses to single column on small screens', async ( { + pageObject, + } ) => { + await pageObject.createNewPostAndInsertBlock(); + await pageObject.setShrinkColumnsToFit( false ); + await pageObject.publishAndGoToFrontend(); + + const productTemplate = pageObject.productTemplate; + + await expect( productTemplate ).not.toHaveCSS( 'display', 'grid' ); + + const firstProduct = pageObject.products.first(); + + // In the original viewport size, we expect the product width to be less than the parent width + // because we will have more than 1 column + let productSize = await firstProduct.boundingBox(); + let parentSize = await firstProduct + .locator( 'xpath=..' ) + .boundingBox(); + expect( productSize?.width ).toBeLessThan( + parentSize?.width as number + ); + + await pageObject.setViewportSize( { + height: 667, + width: 390, // iPhone 12 Pro + } ); + + // In the smaller viewport size, we expect the product width to be (approximately) the same as the parent width + // because we will have only 1 column + productSize = await firstProduct.boundingBox(); + parentSize = await firstProduct.locator( 'xpath=..' ).boundingBox(); + expect( productSize?.width ).toBeCloseTo( + parentSize?.width as number + ); + } ); } ); } ); diff --git a/tests/e2e/tests/product-collection/product-collection.page.ts b/tests/e2e/tests/product-collection/product-collection.page.ts index 01eac81f276..3f407bb2390 100644 --- a/tests/e2e/tests/product-collection/product-collection.page.ts +++ b/tests/e2e/tests/product-collection/product-collection.page.ts @@ -29,6 +29,7 @@ export const SELECTORS = { onSaleControlLabel: 'Show only products on sale', inheritQueryFromTemplateControl: '.wc-block-product-collection__inherit-query-control', + shrinkColumnsToFit: 'Shrink columns to fit', productSearchLabel: 'Search', productSearchButton: '.wp-block-search__button wp-element-button', }; @@ -287,6 +288,18 @@ class ProductCollectionPage { await this.refreshLocators( 'editor' ); } + async setShrinkColumnsToFit( value = true ) { + const sidebarSettings = await this.locateSidebarSettings(); + const input = sidebarSettings.getByLabel( + SELECTORS.shrinkColumnsToFit + ); + if ( value ) { + await input.check(); + } else { + await input.uncheck(); + } + } + async setProductAttribute( attribute: 'Color' | 'Size', value: string ) { const sidebarSettings = await this.locateSidebarSettings();