Release: 11.3.0

.github/workflows/php-js-e2e-tests.yml

@@ -66,7 +66,6 @@ jobs:
       - name: E2E Tests (WP latest with Gutenberg plugin)
         env:
           WOOCOMMERCE_BLOCKS_PHASE: 3
-          GUTENBERG_EDITOR_CONTEXT: 'gutenberg'
         run: |
           node ./bin/wp-env-with-gutenberg.js
           npm run wp-env start

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

@@ -1,12 +1,17 @@
 /**
  * External dependencies
  */
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+/**
+ * Wrapper for address fields which handles the edit/preview transition. Form fields are always rendered so that
+ * validation can occur.
+ */
 export const AddressWrapper = ( {
 	isEditing = false,
 	addressCard,
@@ -16,25 +21,22 @@ export const AddressWrapper = ( {
 	addressCard: () => JSX.Element;
 	addressForm: () => JSX.Element;
 } ): JSX.Element | null => {
+	const wrapperClasses = classnames(
+		'wc-block-components-address-address-wrapper',
+		{
+			'is-editing': isEditing,
+		}
+	);
+
 	return (
-		<TransitionGroup className="address-fade-transition-wrapper">
-			{ ! isEditing && (
-				<CSSTransition
-					timeout={ 300 }
-					classNames="address-fade-transition"
-				>
-					{ addressCard() }
-				</CSSTransition>
-			) }
-			{ isEditing && (
-				<CSSTransition
-					timeout={ 300 }
-					classNames="address-fade-transition"
-				>
-					{ addressForm() }
-				</CSSTransition>
-			) }
-		</TransitionGroup>
+		<div className={ wrapperClasses }>
+			<div className="wc-block-components-address-card-wrapper">
+				{ addressCard() }
+			</div>
+			<div className="wc-block-components-address-form-wrapper">
+				{ addressForm() }
+			</div>
+		</div>
 	);
 };
 

assets/js/blocks/checkout/address-wrapper/style.scss

@@ -1,25 +1,32 @@
-.address-fade-transition-wrapper {
+.wc-block-components-address-address-wrapper {
 	position: relative;
-}
-.address-fade-transition-enter {
-	opacity: 0;
-}
-.address-fade-transition-enter-active {
-	opacity: 1;
-	transition: opacity 300ms ease-in;
-}
-.address-fade-transition-enter-done {
-	opacity: 1;
-}
-.address-fade-transition-exit {
-	opacity: 1;
-	position: absolute;
-	top: 0;
-}
-.address-fade-transition-exit-active {
-	opacity: 0;
-	transition: opacity 300ms ease-out;
-}
-.address-fade-transition-done {
-	opacity: 0;
+
+	.wc-block-components-address-card-wrapper,
+	.wc-block-components-address-form-wrapper {
+		transition: all 300ms ease-in-out;
+		width: 100%;
+	}
+
+	&.is-editing {
+		.wc-block-components-address-form-wrapper {
+			opacity: 1;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	&:not(.is-editing) {
+		.wc-block-components-address-form-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			height: 0;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 1;
+		}
+	}
 }

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

@@ -80,10 +80,6 @@ const Block = ( {
 	const noticeContext = useBillingAsShipping
 		? [ noticeContexts.BILLING_ADDRESS, noticeContexts.SHIPPING_ADDRESS ]
 		: [ noticeContexts.BILLING_ADDRESS ];
-	const hasAddress = !! (
-		billingAddress.address_1 &&
-		( billingAddress.first_name || billingAddress.last_name )
-	);
 
 	return (
 		<>
@@ -93,7 +89,6 @@ const Block = ( {
 					addressFieldsConfig={ addressFieldsConfig }
 					showPhoneField={ showPhoneField }
 					requirePhoneField={ requirePhoneField }
-					hasAddress={ hasAddress }
 					forceEditing={ forceEditing }
 				/>
 			</WrapperComponent>

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

@@ -1,14 +1,16 @@
 /**
  * External dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	BillingAddress,
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -21,13 +23,11 @@ const CustomerAddress = ( {
 	addressFieldsConfig,
 	showPhoneField,
 	requirePhoneField,
-	hasAddress,
 	forceEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
 	showPhoneField: boolean;
 	requirePhoneField: boolean;
-	hasAddress: boolean;
 	forceEditing?: boolean;
 } ) => {
 	const {
@@ -40,8 +40,34 @@ const CustomerAddress = ( {
 		useBillingAsShipping,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-
+	const hasAddress = !! (
+		billingAddress.address_1 &&
+		( billingAddress.first_name || billingAddress.last_name )
+	);
 	const [ editing, setEditing ] = useState( ! hasAddress || forceEditing );
+
+	// Forces editing state if store has errors.
+	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			hasValidationErrors: store.hasValidationErrors(),
+			invalidProps: Object.keys( billingAddress )
+				.filter( ( key ) => {
+					return (
+						store.getValidationError( 'billing_' + key ) !==
+						undefined
+					);
+				} )
+				.filter( Boolean ),
+		};
+	} );
+
+	useEffect( () => {
+		if ( invalidProps.length > 0 && editing === false ) {
+			setEditing( true );
+		}
+	}, [ editing, hasValidationErrors, invalidProps.length ] );
+
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];

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

@@ -104,7 +104,6 @@ const Block = ( {
 					addressFieldsConfig={ addressFieldsConfig }
 					showPhoneField={ showPhoneField }
 					requirePhoneField={ requirePhoneField }
-					hasAddress={ hasAddress }
 				/>
 			</WrapperComponent>
 			{ hasAddress && (

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

@@ -1,14 +1,16 @@
 /**
  * External dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	ShippingAddress,
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -21,12 +23,10 @@ const CustomerAddress = ( {
 	addressFieldsConfig,
 	showPhoneField,
 	requirePhoneField,
-	hasAddress,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
 	showPhoneField: boolean;
 	requirePhoneField: boolean;
-	hasAddress: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
@@ -37,8 +37,34 @@ const CustomerAddress = ( {
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-
+	const hasAddress = !! (
+		shippingAddress.address_1 &&
+		( shippingAddress.first_name || shippingAddress.last_name )
+	);
 	const [ editing, setEditing ] = useState( ! hasAddress );
+
+	// Forces editing state if store has errors.
+	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			hasValidationErrors: store.hasValidationErrors(),
+			invalidProps: Object.keys( shippingAddress )
+				.filter( ( key ) => {
+					return (
+						store.getValidationError( 'shipping_' + key ) !==
+						undefined
+					);
+				} )
+				.filter( Boolean ),
+		};
+	} );
+
+	useEffect( () => {
+		if ( invalidProps.length > 0 && editing === false ) {
+			setEditing( true );
+		}
+	}, [ editing, hasValidationErrors, invalidProps.length ] );
+
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];

composer.json

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

docs/contributors/javascript-testing.md

@@ -107,7 +107,7 @@ You will need to stop `wp-env` and start it again. In some cases, you will also
 
 Currently, we only run e2e tests with the most recent version of WordPress. We also have the infrastructure in place to run e2e tests with the most recent version of WordPress with Gutenberg installed, but [it's currently disabled](https://github.com/woocommerce/woocommerce-blocks/blob/07605450ffa4e460543980b7011b3bf8a8e82ff4/.github/workflows/php-js-e2e-tests.yml#L10).
 
-When preparing for a new version of WordPress, it's a good practice to search for conditions in our tests that check for specific WP versions (with the variable `WP_VERSION`) or that check whether Gutenberg is installed (with the variable `GUTENBERG_EDITOR_CONTEXT`).
+When preparing for a new version of WordPress, it's a good practice to search for conditions in our tests that check for specific WP versions (with the variable `WP_VERSION`).
 
 <!-- FEEDBACK -->
 
@@ -118,4 +118,3 @@ When preparing for a new version of WordPress, it's a good practice to search fo
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/javascript-testing.md)
 
 <!-- /FEEDBACK -->
-