Merge branch 'trunk' into trunk

assets/js/atomic/blocks/product-elements/category-list/index.ts

@@ -33,11 +33,15 @@ const blockConfig: BlockConfiguration = {
 				text: true,
 				link: true,
 				background: false,
+				__experimentalSkipSerialization: true,
 			},
+			typography: {
+				fontSize: true,
+				__experimentalSkipSerialization: true,
+			},
+			__experimentalSelector:
+				'.wc-block-components-product-category-list',
 		} ),
-		typography: {
-			fontSize: true,
-		},
 	},
 	save: Save,
 	edit,

assets/js/atomic/blocks/product-elements/image/edit.js

@@ -14,7 +14,6 @@ import { getAdminLink } from '@woocommerce/settings';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
-import './editor.scss';
 
 const Edit = ( { attributes, setAttributes } ) => {
 	const {

assets/js/atomic/blocks/product-elements/image/style.scss

@@ -5,7 +5,6 @@
 	text-decoration: none;
 	display: block;
 	position: relative;
-	border-radius: inherit;
 
 	a {
 		border-radius: inherit;

assets/js/atomic/blocks/product-elements/image/supports.ts

@@ -8,8 +8,9 @@ export const supports = {
 		__experimentalBorder: {
 			radius: true,
 		},
+		typography: {
+			fontSize: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-image',
 	} ),
-	typography: {
-		fontSize: true,
-	},
 };

assets/js/atomic/blocks/product-elements/tag-list/supports.js

@@ -10,8 +10,9 @@ export const supports = {
 			background: false,
 			link: true,
 		},
+		typography: {
+			fontSize: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-tag-list',
 	} ),
-	typography: {
-		fontSize: true,
-	},
 };

assets/js/base/components/cart-checkout/address-form/test/index.js

@@ -83,26 +83,26 @@ describe( 'AddressForm Component', () => {
 	const WrappedAddressForm = ( { type } ) => {
 		const {
 			defaultAddressFields,
-			setShippingFields,
-			shippingFields,
+			setShippingAddress,
+			shippingAddress,
 		} = useCheckoutAddress();
 
 		return (
 			<AddressForm
 				type={ type }
-				onChange={ setShippingFields }
-				values={ shippingFields }
+				onChange={ setShippingAddress }
+				values={ shippingAddress }
 				fields={ Object.keys( defaultAddressFields ) }
 			/>
 		);
 	};
 	const ShippingFields = () => {
-		const { shippingFields } = useCheckoutAddress();
+		const { shippingAddress } = useCheckoutAddress();
 
 		return (
 			<ul>
-				{ Object.keys( shippingFields ).map( ( key ) => (
-					<li key={ key }>{ key + ': ' + shippingFields[ key ] }</li>
+				{ Object.keys( shippingAddress ).map( ( key ) => (
+					<li key={ key }>{ key + ': ' + shippingAddress[ key ] }</li>
 				) ) }
 			</ul>
 		);

assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx

@@ -81,6 +81,7 @@ interface ShippingRatesControlProps {
 	shippingRatesLoading: boolean;
 	noResultsMessage: ReactElement;
 	renderOption: PackageRateRenderOption;
+	context: 'woocommerce/cart' | 'woocommerce/checkout';
 }
 /**
  * Renders the shipping rates control element.
@@ -92,6 +93,7 @@ interface ShippingRatesControlProps {
  * @param {boolean} [props.collapsible] If true, when multiple packages are rendered they can be toggled open and closed.
  * @param {ReactElement} props.noResultsMessage Rendered when there are no packages.
  * @param {Function} [props.renderOption] Function to render a shipping rate.
+ * @param {string} [props.context] String equal to the block name where the Slot is rendered
  */
 const ShippingRatesControl = ( {
 	shippingRates,
@@ -100,6 +102,7 @@ const ShippingRatesControl = ( {
 	collapsible = false,
 	noResultsMessage,
 	renderOption,
+	context,
 }: ShippingRatesControlProps ): JSX.Element => {
 	useEffect( () => {
 		if ( shippingRatesLoading ) {
@@ -161,6 +164,7 @@ const ShippingRatesControl = ( {
 		components: {
 			ShippingRatesControlPackage,
 		},
+		context,
 	};
 	const { isEditor } = useEditorContext();
 

assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.js

@@ -40,6 +40,7 @@ const ShippingRateSelector = ( {
 				}
 				shippingRates={ shippingRates }
 				shippingRatesLoading={ shippingRatesLoading }
+				context="woocommerce/cart"
 			/>
 		</fieldset>
 	);

assets/js/base/context/hooks/use-checkout-address.ts

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import {
+	defaultAddressFields,
+	AddressFields,
+	EnteredAddress,
+	ShippingAddress,
+	BillingAddress,
+} from '@woocommerce/settings';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useShippingDataContext,
+	useCheckoutContext,
+} from '../providers/cart-checkout';
+import { useCustomerData } from './use-customer-data';
+
+interface CheckoutAddress {
+	shippingAddress: ShippingAddress;
+	billingData: BillingAddress;
+	setShippingAddress: ( data: Partial< EnteredAddress > ) => void;
+	setBillingData: ( data: Partial< EnteredAddress > ) => void;
+	setEmail: ( value: string ) => void;
+	setBillingPhone: ( value: string ) => void;
+	setShippingPhone: ( value: string ) => void;
+	useShippingAsBilling: boolean;
+	setUseShippingAsBilling: ( useShippingAsBilling: boolean ) => void;
+	defaultAddressFields: AddressFields;
+	showShippingFields: boolean;
+	showBillingFields: boolean;
+}
+
+/**
+ * Custom hook for exposing address related functionality for the checkout address form.
+ */
+export const useCheckoutAddress = (): CheckoutAddress => {
+	const { needsShipping } = useShippingDataContext();
+	const {
+		useShippingAsBilling,
+		setUseShippingAsBilling,
+	} = useCheckoutContext();
+	const {
+		billingData,
+		setBillingData,
+		shippingAddress,
+		setShippingAddress,
+	} = useCustomerData();
+
+	const setEmail = useCallback(
+		( value ) =>
+			void setBillingData( {
+				email: value,
+			} ),
+		[ setBillingData ]
+	);
+
+	const setBillingPhone = useCallback(
+		( value ) =>
+			void setBillingData( {
+				phone: value,
+			} ),
+		[ setBillingData ]
+	);
+
+	const setShippingPhone = useCallback(
+		( value ) =>
+			void setShippingAddress( {
+				phone: value,
+			} ),
+		[ setShippingAddress ]
+	);
+
+	return {
+		shippingAddress,
+		billingData,
+		setShippingAddress,
+		setBillingData,
+		setEmail,
+		setBillingPhone,
+		setShippingPhone,
+		defaultAddressFields,
+		useShippingAsBilling,
+		setUseShippingAsBilling,
+		showShippingFields: needsShipping,
+		showBillingFields: ! needsShipping || ! useShippingAsBilling,
+	};
+};