Release: 11.4.8

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -15,7 +15,7 @@ import {
 	ShippingStateInput,
 } from '@woocommerce/base-components/state-input';
 import { useEffect, useMemo, useRef } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { useShallowEqual } from '@woocommerce/base-hooks';
 import { defaultAddressFields } from '@woocommerce/settings';
 import isShallowEqual from '@wordpress/is-shallow-equal';
@@ -44,11 +44,12 @@ const AddressForm = ( {
 	id = '',
 	fields = defaultFields,
 	fieldConfig = {} as FieldConfig,
-	instanceId,
 	onChange,
 	type = 'shipping',
 	values,
 }: AddressFormProps ): JSX.Element => {
+	const instanceId = useInstanceId( AddressForm );
+
 	// Track incoming props.
 	const currentFields = useShallowEqual( fields );
 	const currentFieldConfig = useShallowEqual( fieldConfig );
@@ -99,7 +100,7 @@ const AddressForm = ( {
 		fieldsRef.current?.postcode?.revalidate();
 	}, [ currentCountry ] );
 
-	id = id || instanceId;
+	id = id || `${ instanceId }`;
 
 	return (
 		<div id={ id } className="wc-block-components-address-form">
@@ -206,4 +207,4 @@ const AddressForm = ( {
 	);
 };
 
-export default withInstanceId( AddressForm );
+export default AddressForm;

assets/js/base/components/cart-checkout/address-form/types.ts

@@ -26,8 +26,6 @@ export type AddressFormFields = {
 export interface AddressFormProps {
 	// Id for component.
 	id?: string;
-	// Unique id for form.
-	instanceId: string;
 	// Type of form (billing or shipping).
 	type?: AddressType;
 	// Array of fields in form.

assets/js/blocks/checkout/address-card/index.tsx

@@ -17,10 +17,12 @@ const AddressCard = ( {
 	address,
 	onEdit,
 	target,
+	showPhoneField,
 }: {
 	address: CartShippingAddress | CartBillingAddress;
 	onEdit: () => void;
 	target: string;
+	showPhoneField: boolean;
 } ): JSX.Element | null => {
 	return (
 		<div className="wc-block-components-address-card">
@@ -44,7 +46,7 @@ const AddressCard = ( {
 							<span key={ `address-` + index }>{ field }</span>
 						) ) }
 				</div>
-				{ address.phone ? (
+				{ address.phone && showPhoneField ? (
 					<div
 						key={ `address-phone` }
 						className="wc-block-components-address-card__address-section"

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx

@@ -15,6 +15,8 @@ import type {
 	AddressFields,
 } from '@woocommerce/settings';
 import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { useSelect } from '@wordpress/data';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -81,16 +83,24 @@ const Block = ( {
 		? [ noticeContexts.BILLING_ADDRESS, noticeContexts.SHIPPING_ADDRESS ]
 		: [ noticeContexts.BILLING_ADDRESS ];
 
+	const { cartDataLoaded } = useSelect( ( select ) => {
+		const store = select( CART_STORE_KEY );
+		return {
+			cartDataLoaded: store.hasFinishedResolution( 'getCartData' ),
+		};
+	} );
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
 			<WrapperComponent>
-				<CustomerAddress
-					addressFieldsConfig={ addressFieldsConfig }
-					showPhoneField={ showPhoneField }
-					requirePhoneField={ requirePhoneField }
-					forceEditing={ forceEditing }
-				/>
+				{ cartDataLoaded ? (
+					<CustomerAddress
+						addressFieldsConfig={ addressFieldsConfig }
+						showPhoneField={ showPhoneField }
+						requirePhoneField={ requirePhoneField }
+						forceEditing={ forceEditing }
+					/>
+				) : null }
 			</WrapperComponent>
 		</>
 	);

assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx

@@ -97,9 +97,10 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
+				showPhoneField={ showPhoneField }
 			/>
 		),
-		[ billingAddress ]
+		[ billingAddress, showPhoneField ]
 	);
 
 	const renderAddressFormComponent = useCallback(

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -19,6 +19,8 @@ import type {
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
+import { useSelect } from '@wordpress/data';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -96,15 +98,24 @@ const Block = ( {
 		( shippingAddress.first_name || shippingAddress.last_name )
 	);
 
+	const { cartDataLoaded } = useSelect( ( select ) => {
+		const store = select( CART_STORE_KEY );
+		return {
+			cartDataLoaded: store.hasFinishedResolution( 'getCartData' ),
+		};
+	} );
+
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
 			<WrapperComponent>
-				<CustomerAddress
-					addressFieldsConfig={ addressFieldsConfig }
-					showPhoneField={ showPhoneField }
-					requirePhoneField={ requirePhoneField }
-				/>
+				{ cartDataLoaded ? (
+					<CustomerAddress
+						addressFieldsConfig={ addressFieldsConfig }
+						showPhoneField={ showPhoneField }
+						requirePhoneField={ requirePhoneField }
+					/>
+				) : null }
 			</WrapperComponent>
 			{ hasAddress && (
 				<CheckboxControl

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx

@@ -3,7 +3,11 @@
  */
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
+import {
+	useCheckoutAddress,
+	useStoreEvents,
+	useEditorContext,
+} from '@woocommerce/base-context';
 import type {
 	ShippingAddress,
 	AddressField,
@@ -38,11 +42,12 @@ const CustomerAddress = ( {
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
+	const { isEditor } = useEditorContext();
 	const hasAddress = !! (
 		shippingAddress.address_1 &&
 		( shippingAddress.first_name || shippingAddress.last_name )
 	);
-	const [ editing, setEditing ] = useState( ! hasAddress );
+	const [ editing, setEditing ] = useState( ! hasAddress || isEditor );
 
 	// Forces editing state if store has errors.
 	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
@@ -103,9 +108,10 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
+				showPhoneField={ showPhoneField }
 			/>
 		),
-		[ shippingAddress ]
+		[ shippingAddress, showPhoneField ]
 	);
 
 	const renderAddressFormComponent = useCallback(
@@ -147,9 +153,11 @@ const CustomerAddress = ( {
 			dispatchCheckoutEvent,
 			onChangeAddress,
 			requirePhoneField,
+			setBillingPhone,
 			setShippingPhone,
 			shippingAddress,
 			showPhoneField,
+			useShippingAsBilling,
 		]
 	);
 

assets/js/editor-components/incompatible-extension-notice/editor.scss

@@ -18,11 +18,11 @@
 			width: 24px;
 			height: 24px;
 			margin-right: 6px;
-			min-width: max-content;
+			min-width: 24px; // Ensure that notice is visible in Safari. See https://github.com/woocommerce/woocommerce-blocks/issues/11734
 		}
 	}
 	ul {
-		margin: 0 0 1em 1.5em;
+		margin: 0 0 1em 1.2em;
 		padding: 0;
 		list-style: disc outside;
 	}

composer.json

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

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

@@ -0,0 +1,13 @@
+# Testing notes and ZIP for release 11.4.6
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13308368/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Bug Fixes
+
+#### Update Jetpack WooCommerce Analytics module integration to check for changed template names ([#11707](https://github.com/woocommerce/woocommerce-blocks/pull/11707))
+
+1. Enable Jetpack and ensure the WooCommerce Analytics module is set up and enabled.
+2. Install [Query Monitor](https://wordpress.org/plugins/query-monitor/).
+3. Go to the Cart and Checkout blocks and ensure no PHP warnings are logged.

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

@@ -0,0 +1,24 @@
+# Testing notes and ZIP for release 11.4.7
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13311913/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Bug Fixes
+
+#### Fixed address components in Firefox, and editing of address form in the editor ([#11714](https://github.com/woocommerce/woocommerce-blocks/pull/11714))
+
+1. Edit the checkout page
+2. Address form should not be condensed
+3. Toggle company/phone. Leave phone on. There should be no block errors.
+4. Save changes and visit the checkout on the frontend (add something to cart if needed)
+5. As a logged in user the address form should be condensed and phone should be visible. If no, fill out the form and place an order.
+6. After placing the order go back to checkout and repeat the previous step. Phone should be visible in the condensed address component.
+7. Go back to the editor and turn off the phone field. Save and go back to the frontend checkout. Ensure phone is hidden from the condensed address component.
+
+##### Firefox testing
+
+1. Add an item to the cart and go to checkout using Firefox
+2. Fill out the form, then refresh the page.
+3. The condensed address component is shown.
+4. Edit the address. Ensure fields are populated with correct values.

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

@@ -0,0 +1,29 @@
+# Testing notes and ZIP for release 11.4.8
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13323235/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Bug Fixes
+
+#### Ensure that incompatible notices are displayed in Safari ([11736](https://github.com/woocommerce/woocommerce-blocks/pull/11736))
+
+1. Install and activate [helper-plugin-1.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701036/helper-plugin-1.zip)
+2. Create a test page and add the Cart block.
+3. Create a test page and add the Checkout block.
+4. Open both test pages using Safari.
+5. Click on the Cart block resp. the Checkout block and verify that the incompatible extension notice is visible.
+6. Repeat the previous step using Chrome, Firefox and Opera.
+
+<table>
+<tr>
+<td valign="top">Before:
+<br><br>
+<img width="1281" alt="Screenshot 2023-11-10 at 21 43 01" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/5a68914b-5306-40fd-8270-af880120aa72">
+</td>
+<td valign="top">After:
+<br><br>
+<img width="1282" alt="Screenshot 2023-11-10 at 21 42 18" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/8718c04b-fb9e-4db7-af71-c84d8e304fc1">
+</td>
+</tr>
+</table>

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

@@ -187,6 +187,9 @@ Every release includes specific testing instructions for new features and bug fi
     -   [11.4.3](./1143.md)
     -   [11.4.4](./1144.md)
     -   [11.4.5](./1145.md)
+    -   [11.4.6](./1146.md)
+    -   [11.4.7](./1147.md)
+    -   [11.4.8](./1148.md)
 
 <!-- FEEDBACK -->
 

package.json

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

packages/checkout/components/text-input/types.ts

@@ -26,6 +26,8 @@ export interface ValidatedTextInputProps
 	label?: string | undefined;
 	// Field value.
 	value: string;
+	// Other sibling fields that should be validated together.
+	values: string[];
 	// If true, validation errors will be shown.
 	showError?: boolean;
 	// Error message to display alongside the field regardless of validation.