Release: 10.4.2

.github/workflows/unit-tests.yml

@@ -118,7 +118,7 @@ jobs:
 
       - name: Docker container debug information
         run: |
-          npm run wp-env run tests-mysql "mysql --version"
+          npm run wp-env run tests-mysql mysql -- --version
           npm run wp-env run tests-wordpress "php --version"
           npm run wp-env run tests-wordpress "php -m"
           npm run wp-env run tests-wordpress "php -i"

assets/js/blocks/classic-template/index.tsx

@@ -7,6 +7,7 @@ import {
 	getBlockType,
 	registerBlockType,
 	unregisterBlockType,
+	parse,
 } from '@wordpress/blocks';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
@@ -18,10 +19,17 @@ import {
 import { Button, Placeholder, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
-import { useDispatch, subscribe, useSelect, select } from '@wordpress/data';
+import {
+	useDispatch,
+	subscribe,
+	useSelect,
+	select,
+	dispatch,
+} from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useEntityRecord } from '@wordpress/core-data';
+import { debounce } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -333,6 +341,44 @@ const registerClassicTemplateBlock = ( {
 	} );
 };
 
+/**
+ * Attempts to recover the Classic Template block if it fails to render on the Single Product template
+ * due to the user resetting customizations without refreshing the page.
+ *
+ * When the Classic Template block fails to render, it is replaced by the 'core/missing' block, which
+ * displays an error message stating that the WooCommerce Classic template block is unsupported.
+ *
+ * This function replaces the 'core/missing' block with the original Classic Template block that failed
+ * to render, allowing the block to be displayed correctly.
+ *
+ * @see {@link https://github.com/woocommerce/woocommerce-blocks/issues/9637|Issue: Block error is displayed on clearing customizations for Woo Templates}
+ *
+ */
+const tryToRecoverClassicTemplateBlockWhenItFailsToRender = debounce( () => {
+	const blocks = select( 'core/block-editor' ).getBlocks();
+	const blocksIncludingInnerBlocks = blocks.flatMap( ( block ) => [
+		block,
+		...block.innerBlocks,
+	] );
+	const classicTemplateThatFailedToRender = blocksIncludingInnerBlocks.find(
+		( block ) =>
+			block.name === 'core/missing' &&
+			block.attributes.originalName === BLOCK_SLUG
+	);
+
+	if ( classicTemplateThatFailedToRender ) {
+		const blockToReplaceClassicTemplateBlockThatFailedToRender = parse(
+			classicTemplateThatFailedToRender.attributes.originalContent
+		);
+		if ( blockToReplaceClassicTemplateBlockThatFailedToRender ) {
+			dispatch( 'core/block-editor' ).replaceBlock(
+				classicTemplateThatFailedToRender.clientId,
+				blockToReplaceClassicTemplateBlockThatFailedToRender
+			);
+		}
+	}
+}, 100 );
+
 // @todo Refactor when there will be possible to show a block according on a template/post with a Gutenberg API. https://github.com/WordPress/gutenberg/pull/41718
 
 let currentTemplateId: string | undefined;
@@ -341,21 +387,28 @@ subscribe( () => {
 	const previousTemplateId = currentTemplateId;
 	const store = select( 'core/edit-site' );
 	currentTemplateId = store?.getEditedPostId() as string | undefined;
-
-	if ( previousTemplateId === currentTemplateId ) {
-		return;
-	}
-
 	const parsedTemplate = currentTemplateId?.split( '//' )[ 1 ];
 
 	if ( parsedTemplate === null || parsedTemplate === undefined ) {
 		return;
 	}
 
 	const block = getBlockType( BLOCK_SLUG );
+	const isBlockRegistered = Boolean( block );
+
+	if (
+		isBlockRegistered &&
+		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
+	) {
+		tryToRecoverClassicTemplateBlockWhenItFailsToRender();
+	}
+
+	if ( previousTemplateId === currentTemplateId ) {
+		return;
+	}
 
 	if (
-		block !== undefined &&
+		isBlockRegistered &&
 		( ! hasTemplateSupportForClassicTemplateBlock(
 			parsedTemplate,
 			TEMPLATES
@@ -371,12 +424,12 @@ subscribe( () => {
 	}
 
 	if (
-		block === undefined &&
+		! isBlockRegistered &&
 		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
 	) {
 		registerClassicTemplateBlock( {
 			template: parsedTemplate,
 			inserter: true,
 		} );
 	}
-} );
+}, 'core/blocks-editor' );

composer.json

@@ -3,7 +3,7 @@
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://woocommerce.com/",
 	"type": "wordpress-plugin",
-	"version": "10.4.0",
+	"version": "10.4.2",
 	"keywords": [
 		"gutenberg",
 		"woocommerce",

docs/internal-developers/testing/releases/1042.md

@@ -0,0 +1,113 @@
+# Testing notes and ZIP for release 10.4.2
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11731631/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Update the Hero Product Split [#9762](https://github.com/woocommerce/woocommerce-blocks/pull/9762)
+
+1. From the editor (post, page, etc.) apply the `Hero Product Split` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+
+| Before | After |
+| ------ | ----- |
+|<img width="1209" alt="Screenshot 2023-06-08 at 21 47 48" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/92ba194e-5014-45ad-830e-eb821d405239">|<img width="1238" alt="Screenshot 2023-06-08 at 21 49 12" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/1fc24a6b-7fc5-4c89-983f-d13ff4e703e7">|
+
+### Update hero patterns titles [#9769](https://github.com/woocommerce/woocommerce-blocks/pull/9769)
+
+1. On a new page or post, insert the `Hero product 3-split` pattern and make sure the h2 title says `Endless Tee's`.
+2. Insert the `Hero product chessboard` pattern and make sure the h3 title says `The Fall Collection`.
+3. Insert the `Hero product - split` pattern and make sure the h3 title says `Get cozy this fall with knit sweaters`.
+
+
+### Update Chessboard pattern images [#9761](https://github.com/woocommerce/woocommerce-blocks/pull/9761)
+
+1. From the editor (post, page, etc.) apply the `Hero Product Chessboard` pattern.
+2. Confirm the image matches the "After" version in the screenshot  in both the admin and the front end.
+
+| Before | After |
+| ------ | ----- |
+| <img width="1044" alt="Screenshot 2023-06-08 at 21 33 37" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/11e92d17-eb30-4419-bab6-96350394df30">| <img width="1075" alt="Screenshot 2023-06-08 at 21 33 03" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/df3f97b5-b026-4090-b692-8232ac211043">|
+
+
+### Update/collection pattern images [#9766](https://github.com/woocommerce/woocommerce-blocks/pull/9766)
+
+1. From the editor (post, page, etc.) apply the `Product Collections: Featured Collections` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Ensure all CTA links/buttons actually links to the Shop page.
+4. Add the `Shop by Price` pattern.
+5. Ensure all CTA links/buttons actually links to the Shop page.
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/57fc7fa7-faf8-4ddf-9652-bba2aad9b98c)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/42db378d-3ac6-478d-b059-9c11584a593f)       |
+
+### Update Images for the Product Details Patterns [#9764](https://github.com/woocommerce/woocommerce-blocks/pull/9764)
+
+1. From the editor (post, page, etc.) apply each of the below patterns.
+2. Confirm the image matches the "After" version in the screenshots in both the admin and the front end.
+
+
+#### Product Hero
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 20 48 21](https://github.com/woocommerce/woocommerce-blocks/assets/481776/7d33a2fa-c959-483e-8e48-19ccb61d2cab) | ![CleanShot 2023-06-08 at 20 48 39](https://github.com/woocommerce/woocommerce-blocks/assets/481776/7a8c9a13-df7a-40b6-9456-9d13091f51c8) |
+
+#### Product Listing with Gallery and Description
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 21 41 43](https://github.com/woocommerce/woocommerce-blocks/assets/481776/863e35bb-3612-4630-be45-47e6cae7db6d) | ![CleanShot 2023-06-08 at 21 42 54](https://github.com/woocommerce/woocommerce-blocks/assets/481776/67c5f2b3-b3b8-47b9-b38d-b38a56ee731c) |
+
+#### Product Details: product listing
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 22 15 49](https://github.com/woocommerce/woocommerce-blocks/assets/481776/d0ba63d0-97a0-4d9c-bbad-ae851018c575) | ![CleanShot 2023-06-08 at 22 16 13](https://github.com/woocommerce/woocommerce-blocks/assets/481776/73fc630f-eaa3-4ba3-b7bd-259cf52a63f4) |
+
+#### Product Details Pattern
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 23 23 48](https://github.com/woocommerce/woocommerce-blocks/assets/481776/72648e8d-04ee-4b8b-a9c9-0101a1186abd) | ![CleanShot 2023-06-08 at 23 24 10](https://github.com/woocommerce/woocommerce-blocks/assets/481776/59420364-7dff-4e84-bdd5-a11974e6ed46) |
+
+
+### Update Banner Pattern To Replace Unsplash Image [#9760](https://github.com/woocommerce/woocommerce-blocks/pull/9760)
+
+1. From the editor (post, page, etc.) apply the `Banner` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Confirm the CTA button links to the Shop page on the front end.
+4. Confirm vertical spacing is fixed on the text column (extra padding on the top is removed).
+
+
+| Before | After |
+| ------ | ----- |
+| ![CleanShot 2023-06-08 at 15 15 25](https://github.com/woocommerce/woocommerce-blocks/assets/481776/6cc2d362-24e5-4a23-8694-511bc0e62fc4) | ![CleanShot 2023-06-08 at 15 34 37](https://github.com/woocommerce/woocommerce-blocks/assets/481776/338a024b-7bf1-4963-9206-9a84ceeb9077) |
+
+### Update/patterns featured category product collection [#9765](https://github.com/woocommerce/woocommerce-blocks/pull/9765)
+
+1. From the editor (post, page, etc.) apply the `Featured Category / Focus, Featured Category / Cover and Featured Category / Triple` pattern.
+2. Confirm the image matches the "After" version in the screenshot in both the admin and the front end.
+3. Ensure all CTA links/buttons actually links to the Shop page.
+
+
+#### Featured Category / Focused
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/8e29acf0-305c-4de5-aa6f-7d608554dde5)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/f571a73c-f6c4-4198-b793-da0a29cc73e9)       |
+
+#### Featured Category / Cover image
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/7346b9ff-c6fe-456b-93c0-722a411ac529)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/650f91bb-400a-441d-a6ea-29fd3d61a204)       |
+
+#### Featured Category / Triple
+
+| Before | After |
+| ------ | ----- |
+|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/c8b09fd1-0c5c-48eb-9be9-8545f35a37c1)        |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/cde1aaf7-0224-40df-93ce-ef1c5640537d)|
+
+

docs/internal-developers/testing/releases/README.md

@@ -150,6 +150,7 @@ Every release includes specific testing instructions for new features and bug fi
     -   [10.2.2](./1022.md)
 -   [10.3.0](./1030.md)
 -   [10.4.0](./1040.md)
+-   [10.4.2](./1042.md)
 <!-- FEEDBACK -->
 
 ---

package.json

@@ -2,7 +2,7 @@
 	"name": "@woocommerce/block-library",
 	"title": "WooCommerce Blocks",
 	"author": "Automattic",
-	"version": "10.4.0",
+	"version": "10.4.2",
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/",
 	"keywords": [

patterns/banner.php

@@ -8,8 +8,8 @@
 <!-- wp:group {"align":"wide","style":{"color":{"background":"#f9eddb","text":"#443127"},"spacing":{"padding":{"right":"50px","bottom":"50px","left":"50px","top":"50px"}}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignwide has-text-color has-background" style="color:#443127;background-color:#f9eddb;padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"left":"110px"}}}} -->
-<div class="wp-block-column" style="padding-left:110px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"60px","right":"0","left":"0"}}},"layout":{"type":"constrained","wideSize":"360px","justifyContent":"left"}} -->
-<div class="wp-block-group" style="padding-top:60px;padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"color":{"text":"#c85643"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+<div class="wp-block-column" style="padding-left:110px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","left":"0"}}},"layout":{"type":"constrained","wideSize":"360px","justifyContent":"left"}} -->
+<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-left:0"><!-- wp:paragraph {"style":{"color":{"text":"#c85643"},"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
 <p class="has-text-color" style="color:#c85643;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:18px"><strong>HOLIDAY SALE</strong></p>
 <!-- /wp:paragraph -->
 
@@ -23,15 +23,15 @@
 
 <!-- wp:buttons {"style":{"spacing":{"blockGap":"0","margin":{"top":"20px","bottom":"0"}}}} -->
 <div class="wp-block-buttons" style="margin-top:20px;margin-bottom:0"><!-- wp:button {"style":{"typography":{"fontSize":"16px"},"color":{"text":"#000000","background":"#ffffff"},"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
-<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop Holiday Sales</a></div>
+<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px"><a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop Holiday Sales</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>
 <!-- /wp:column -->
 
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-11.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/></figure>
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-home-wall-decoration-shelf-living-room.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a banner.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1"/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>

patterns/featured-category-cover-image.php

@@ -5,10 +5,10 @@
  * Categories: WooCommerce
  */
 ?>
-<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0,"y":0},"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:2em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-	<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
+	<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in a featured category section.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/wood-leather-fur-shop-jeans-shelf.png', dirname( __FILE__ ) ) ); ?>" style="object-position:0% 0%" data-object-fit="cover" data-object-position="0% 0%"/>
 
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"1.5","fontSize":"2.2em","textColor":"background"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"0px","top":"0px"}}}} -->
@@ -22,7 +22,7 @@
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} -->
 		<div class="wp-block-buttons" style="margin-top:30px">
 			<!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"color":{"text":"#000000","background":"#ffffff"}},"className":"is-style-fill"} -->
-			<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
+			<div class="wp-block-button is-style-fill"><a href="<?php echo esc_url( wc_get_page_permalink( 'shop' ) ); ?>" class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
 			<!-- /wp:button --></div>
 		<!-- /wp:buttons --></div>
 </div>