Release: 10.4.3

.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' );

assets/js/blocks/mini-cart/utils/data.ts

@@ -6,7 +6,20 @@ import {
 	getCurrencyFromPriceResponse,
 	formatPrice,
 } from '@woocommerce/price-format';
-import { CartResponse } from '@woocommerce/types';
+import { CartResponse, isBoolean } from '@woocommerce/types';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+
+const getPrice = ( cartResponse: CartResponse, showIncludingTax: boolean ) => {
+	const { totals } = cartResponse;
+	const currency = getCurrencyFromPriceResponse( totals );
+
+	const subTotal = showIncludingTax
+		? parseInt( totals.total_items, 10 ) +
+		  parseInt( totals.total_items_tax, 10 )
+		: parseInt( totals.total_items, 10 );
+
+	return formatPrice( subTotal, currency );
+};
 
 export const updateTotals = ( totals: [ string, number ] | undefined ) => {
 	if ( ! totals ) {
@@ -86,11 +99,12 @@ export const getMiniCartTotalsFromLocalStorage = ():
 		return undefined;
 	}
 	const miniCartTotals = JSON.parse( rawMiniCartTotals );
-	const currency = getCurrencyFromPriceResponse( miniCartTotals.totals );
-	const formattedPrice = formatPrice(
-		miniCartTotals.totals.total_price,
-		currency
+	const showIncludingTax = getSettingWithCoercion(
+		'displayCartPricesIncludingTax',
+		false,
+		isBoolean
 	);
+	const formattedPrice = getPrice( miniCartTotals, showIncludingTax );
 	return [ formattedPrice, miniCartTotals.itemsCount ] as [ string, number ];
 };
 
@@ -107,11 +121,12 @@ export const getMiniCartTotalsFromServer = async (): Promise<
 			return response.json();
 		} )
 		.then( ( data: CartResponse ) => {
-			const currency = getCurrencyFromPriceResponse( data.totals );
-			const formattedPrice = formatPrice(
-				data.totals.total_price,
-				currency
+			const showIncludingTax = getSettingWithCoercion(
+				'displayCartPricesIncludingTax',
+				false,
+				isBoolean
 			);
+			const formattedPrice = getPrice( data, showIncludingTax );
 			// Save server data to local storage, so we can re-fetch it faster
 			// on the next page load.
 			localStorage.setItem(

assets/js/blocks/mini-cart/utils/test/data.ts

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import { getByTestId, waitFor } from '@testing-library/dom';
+import { getSettingWithCoercion } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -18,7 +19,9 @@ const responseMock = {
 	ok: true,
 	json: async () => ( {
 		totals: {
-			total_price: '1600',
+			total_price: '1800',
+			total_items: '1400',
+			total_items_tax: '200',
 			currency_code: 'USD',
 			currency_symbol: '$',
 			currency_minor_unit: 2,
@@ -32,7 +35,9 @@ const responseMock = {
 } as Response;
 const localStorageMock = {
 	totals: {
-		total_price: '1600',
+		total_price: '1800',
+		total_items: '1400',
+		total_items_tax: '200',
 		currency_code: 'USD',
 		currency_symbol: '$',
 		currency_minor_unit: 2,
@@ -67,7 +72,21 @@ const getMiniCartDOM = () => {
 	return div;
 };
 
-describe( 'Mini-Cart frontend script', () => {
+jest.mock( '@woocommerce/settings', () => {
+	return {
+		...jest.requireActual( '@woocommerce/settings' ),
+		getSettingWithCoercion: jest.fn(),
+	};
+} );
+
+describe( 'Mini-Cart frontend script when "the display prices during cart and checkout" option is set to "Including Tax"', () => {
+	beforeAll( () => {
+		( getSettingWithCoercion as jest.Mock ).mockReturnValue( true );
+	} );
+
+	afterAll( () => {
+		jest.resetModules();
+	} );
 	it( 'updates the cart contents based on the localStorage values', async () => {
 		initializeLocalStorage();
 		const container = getMiniCartDOM();
@@ -125,3 +144,65 @@ describe( 'Mini-Cart frontend script', () => {
 		jest.restoreAllMocks();
 	} );
 } );
+
+describe( 'Mini-Cart frontend script when "the display prices during cart and checkout" option is set to "Excluding Tax"', () => {
+	beforeAll( () => {
+		( getSettingWithCoercion as jest.Mock ).mockReturnValue( false );
+	} );
+	it( 'updates the cart contents based on the localStorage values', async () => {
+		initializeLocalStorage();
+		const container = getMiniCartDOM();
+		document.body.appendChild( container );
+
+		updateTotals( getMiniCartTotalsFromLocalStorage() );
+
+		// Assert that we are rendering the amount.
+		await waitFor( () =>
+			expect( getByTestId( container, 'amount' ).textContent ).toBe(
+				'$14.00'
+			)
+		);
+		// Assert that we are rendering the quantity.
+		await waitFor( () =>
+			expect( getByTestId( container, 'quantity' ).textContent ).toBe(
+				'2'
+			)
+		);
+	} );
+
+	it( 'updates the cart contents based on the API response', async () => {
+		jest.spyOn( window, 'fetch' ).mockResolvedValue( responseMock );
+		const container = getMiniCartDOM();
+		document.body.appendChild( container );
+
+		getMiniCartTotalsFromServer().then( updateTotals );
+
+		// Assert we called the correct endpoint.
+		await waitFor( () =>
+			expect( window.fetch ).toHaveBeenCalledWith(
+				'/wp-json/wc/store/v1/cart/'
+			)
+		);
+
+		// Assert we saved the values returned to the localStorage.
+		await waitFor( () =>
+			expect( window.localStorage.setItem.mock.calls[ 0 ][ 1 ] ).toEqual(
+				JSON.stringify( localStorageMock )
+			)
+		);
+
+		// Assert that we are rendering the amount.
+		await waitFor( () =>
+			expect( getByTestId( container, 'amount' ).textContent ).toBe(
+				'$14.00'
+			)
+		);
+		// Assert that we are rendering the quantity.
+		await waitFor( () =>
+			expect( getByTestId( container, 'quantity' ).textContent ).toBe(
+				'2'
+			)
+		);
+		jest.restoreAllMocks();
+	} );
+} );

assets/js/blocks/product-query/constants.ts

@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-import { getSetting } from '@woocommerce/settings';
+import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { objectOmit } from '@woocommerce/utils';
 import type { InnerBlockTemplate } from '@wordpress/blocks';
-
+import { isBoolean } from '@woocommerce/types';
 /**
  * Internal dependencies
  */
@@ -69,6 +69,13 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
 	},
 };
 
+// This is necessary to fix https://github.com/woocommerce/woocommerce-blocks/issues/9884.
+const postTemplateHasSupportForGridView = getSettingWithCoercion(
+	'post_template_has_support_for_grid_view',
+	false,
+	isBoolean
+);
+
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/post-template',
@@ -78,6 +85,9 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 			 * This class is used to add default styles for inner blocks.
 			 */
 			className: 'products-block-post-template',
+			...( postTemplateHasSupportForGridView && {
+				layout: { type: 'grid', columnCount: 3 },
+			} ),
 		},
 		[
 			[

assets/js/blocks/product-query/variations/related-products.tsx

@@ -6,6 +6,8 @@ import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { stacks } from '@woocommerce/icons';
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+import { isBoolean } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -43,6 +45,12 @@ export const BLOCK_ATTRIBUTES = {
 	},
 };
 
+const postTemplateHasSupportForGridView = getSettingWithCoercion(
+	'post_template_has_support_for_grid_view',
+	false,
+	isBoolean
+);
+
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/heading',
@@ -53,7 +61,12 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	],
 	[
 		'core/post-template',
-		{ __woocommerceNamespace: PRODUCT_TEMPLATE_ID },
+		{
+			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
+			...( postTemplateHasSupportForGridView && {
+				layout: { type: 'grid', columnCount: 3 },
+			} ),
+		},
 		[
 			[
 				'woocommerce/product-image',

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.3",
 	"keywords": [
 		"gutenberg",
 		"woocommerce",