Enable shrink columns option in Product Collection by default (#11821)

* Enable shrink columns option in Product Collection by default * Improve tests about responsiveness * Make regex allowing for floating pixels * Related products should not use sticky and author attribute or have hardcoded queryId * Bring back properties for Related Products as it's based on Propducts block, not Product Collection * Enable shrink columns to fit by default in patterns
woocommerce · Nov 23, 2023 · e8186b7 · e8186b7
1 parent 30c1f35
commit e8186b7
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 28 deletions.
diff --git 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
@@ -7,7 +7,7 @@
  */
 ?>
 
-<!-- wp:woocommerce/product-collection {"query":{"perPage":3,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3}} -->
+<!-- wp:woocommerce/product-collection {"query":{"perPage":3,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true}} -->
 <div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
 <!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
 

diff --git a/patterns/product-collection-grid.php b/patterns/product-collection-grid.php
@@ -7,7 +7,7 @@
  */
 ?>
 
-<!-- wp:woocommerce/product-collection {"query":{"perPage":4,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":4}} -->
+<!-- wp:woocommerce/product-collection {"query":{"perPage":4,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":4,"shrinkColumns":true}} -->
 <div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
 <!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
 

diff --git a/patterns/product-collection-rows.php b/patterns/product-collection-rows.php
@@ -7,7 +7,7 @@
  */
 ?>
 
-<!-- wp:woocommerce/product-collection {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"list","columns":3}} -->
+<!-- wp:woocommerce/product-collection {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"list","columns":3,"shrinkColumns":true}} -->
 <div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
 <!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->

diff --git a/patterns/product-collection-simple-grid.php b/patterns/product-collection-simple-grid.php
@@ -7,7 +7,7 @@
  */
 ?>
 
-<!-- wp:woocommerce/product-collection {"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":5}} -->
+<!-- wp:woocommerce/product-collection {"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":5,"shrinkColumns":true}} -->
 <div class="wp-block-woocommerce-product-collection"><!-- wp:woocommerce/product-template -->
 <!-- wp:woocommerce/product-image {"saleBadgeAlign":"left","imageSizing":"thumbnail","isDescendentOfQueryLoop":true,"style":{"typography":{"fontSize":"0.8rem"}}} /-->
 

diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php
@@ -15,7 +15,7 @@
 	<h3 class="wp-block-heading alignwide"><?php echo esc_html( $gallery_title ); ?></h3>
 	<!-- /wp:heading -->
 
-	<!-- wp:woocommerce/product-collection {"query":{"perPage":6,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"default"}} -->
+	<!-- wp:woocommerce/product-collection {"query":{"perPage":6,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true},"align":"wide","layout":{"type":"default"}} -->
 		<div class="wp-block-woocommerce-product-collection alignwide">
 			<!-- wp:woocommerce/product-template -->
 				<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true, "aspectRatio":"3/4"} /-->

diff --git a/patterns/related-products.php b/patterns/related-products.php
@@ -9,7 +9,7 @@
 
 <!-- wp:woocommerce/related-products {"align":"wide"} -->
 <div class="wp-block-woocommerce-related-products alignwide">
-		<!-- wp:query {"queryId":0,"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/related-products","lock":{"remove":true,"move":true}} -->
+		<!-- wp:query {"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/related-products","lock":{"remove":true,"move":true}} -->
 		<div class="wp-block-query">
 			<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
 			<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">

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
@@ -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
@@ -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();