Include address fields in the AddressForm component (https://github.com/woocommerce/woocommerce-blocks/pull/1892)

* Move default address fields to blocks; normalise address i18n

* Use optionalLabel and other props from addressFields

* Fix apartment field display

* Country address fields

* Fix default field order

* Update for countries with no states

* Add type defs

plugins/woocommerce-blocks/assets/js/base/components/address-form/country-address-fields.js

@@ -0,0 +1,546 @@
+/** @typedef { import('@woocommerce/type-defs/address-fields').CountryAddressFields } CountryAddressFields */
+/** @typedef { import('@woocommerce/type-defs/address-fields').AddressFieldKey } AddressFieldKey */
+/** @typedef { import('@woocommerce/type-defs/address-fields').AddressField } AddressField */
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Used to render postcode before the city field.
+ *
+ * @type {Object <AddressFieldKey, AddressField>}
+ */
+const postcodeBeforeCity = {
+	city: {
+		index: 9,
+	},
+	postcode: {
+		index: 7,
+	},
+};
+
+/**
+ * Used to make the state field optional.
+ *
+ * @type {Object <AddressFieldKey, AddressField>}
+ */
+const optionalState = {
+	state: {
+		required: false,
+	},
+};
+
+/**
+ * Used to hide the state field.
+ *
+ * @type {Object <AddressFieldKey, AddressField>}
+ */
+const hiddenState = {
+	state: {
+		required: false,
+		hidden: true,
+	},
+};
+
+/**
+ * Used to hide the postcode field.
+ *
+ * @type {Object <AddressFieldKey, AddressField>}
+ */
+const hiddenPostcode = {
+	postcode: {
+		required: false,
+		hidden: true,
+	},
+};
+
+/**
+ * Country specific address field properties.
+ *
+ * @type {CountryAddressFields}
+ */
+const countryAddressFields = {
+	AE: {
+		...hiddenPostcode,
+		...optionalState,
+	},
+	AF: hiddenState,
+	AO: {
+		...hiddenPostcode,
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	AT: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	AU: {
+		city: {
+			label: __( 'Suburb', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Suburb (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		postcode: {
+			label: __( 'Postcode', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Postcode (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'State', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'State (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	AX: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	BD: {
+		postcode: {
+			required: false,
+		},
+		state: {
+			label: __( 'District', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'District (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	BE: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	BH: {
+		postcode: {
+			required: false,
+		},
+		...hiddenState,
+	},
+	BI: hiddenState,
+	BO: hiddenPostcode,
+	BS: hiddenPostcode,
+	CA: {
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	CH: {
+		...postcodeBeforeCity,
+		state: {
+			label: __( 'Canton', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Canton (optional)',
+				'woo-gutenberg-products-block'
+			),
+			required: false,
+		},
+	},
+	CL: {
+		city: {
+			require: true,
+		},
+		postcode: {
+			required: false,
+		},
+		state: {
+			label: __( 'Region', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Region (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	CN: {
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	CO: {
+		postcode: {
+			required: false,
+		},
+	},
+	CZ: hiddenState,
+	DE: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	DK: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	EE: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	ES: {
+		...postcodeBeforeCity,
+		state: {
+			label: __( 'State', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'State (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	FI: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	FR: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	GB: {
+		postcode: {
+			label: __( 'Postcode', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Postcode (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'County', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'County (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	GP: hiddenState,
+	GF: hiddenState,
+	GR: optionalState,
+	HK: {
+		postcode: {
+			required: false,
+		},
+		city: {
+			label: __( 'Town/District', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Town/District (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'Region', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Region (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	HU: {
+		state: {
+			label: __( 'County', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'County (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	ID: {
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	IE: {
+		postcode: {
+			label: __( 'Eircode', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Eircode (optional)',
+				'woo-gutenberg-products-block'
+			),
+			required: false,
+		},
+		state: {
+			label: __( 'County', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'County (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	IS: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	IL: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	IM: hiddenState,
+	IT: {
+		...postcodeBeforeCity,
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	JP: {
+		first_name: {
+			index: 2,
+		},
+		last_name: {
+			index: 1,
+		},
+		address_1: {
+			index: 7,
+		},
+		address_2: {
+			index: 8,
+		},
+		postcode: {
+			index: 4,
+		},
+		city: {
+			index: 6,
+		},
+		state: {
+			label: __( 'Prefecture', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Prefecture (optional)',
+				'woo-gutenberg-products-block'
+			),
+			index: 5,
+		},
+	},
+	KR: hiddenState,
+	KW: hiddenState,
+	LB: hiddenState,
+	LI: {
+		...postcodeBeforeCity,
+		state: {
+			label: __( 'Municipality', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Municipality (optional)',
+				'woo-gutenberg-products-block'
+			),
+			required: false,
+		},
+	},
+	LK: hiddenState,
+	LU: hiddenState,
+	LV: {
+		state: {
+			label: __( 'Municipality', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Municipality (optional)',
+				'woo-gutenberg-products-block'
+			),
+			required: false,
+		},
+	},
+	MQ: hiddenState,
+	MT: hiddenState,
+	MZ: {
+		...hiddenPostcode,
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	NL: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	NG: {
+		...hiddenPostcode,
+		state: {
+			label: __( 'State', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'State (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	NO: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	NP: {
+		postcode: {
+			required: false,
+		},
+		state: {
+			label: __( 'State', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'State (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	NZ: {
+		postcode: {
+			label: __( 'Postcode', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Postcode (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'Region', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Region (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	PL: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	PT: hiddenState,
+	RE: hiddenState,
+	RO: {
+		state: {
+			label: __( 'County', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'County (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	RS: hiddenState,
+	SE: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	SG: {
+		city: {
+			required: false,
+		},
+		...hiddenState,
+	},
+	SK: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	SI: {
+		...postcodeBeforeCity,
+		...hiddenState,
+	},
+	SR: {
+		...hiddenPostcode,
+	},
+	ST: {
+		...hiddenPostcode,
+		state: {
+			label: __( 'District', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'District (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	MD: {
+		state: {
+			label: __(
+				'Municipality/District',
+				'woo-gutenberg-products-block'
+			),
+			optionalLabel: __(
+				'Municipality/District (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	TR: {
+		...postcodeBeforeCity,
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	UG: {
+		...hiddenPostcode,
+		city: {
+			label: __( 'Town/Village', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Town/Village (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'District', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'District (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	US: {
+		postcode: {
+			label: __( 'ZIP', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'ZIP (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+		state: {
+			label: __( 'State', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'State (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	VN: {
+		city: {
+			index: 8,
+		},
+		postcode: {
+			index: 7,
+			required: false,
+		},
+		...hiddenState,
+	},
+	WS: hiddenPostcode,
+	YT: hiddenState,
+	ZA: {
+		state: {
+			label: __( 'Province', 'woo-gutenberg-products-block' ),
+			optionalLabel: __(
+				'Province (optional)',
+				'woo-gutenberg-products-block'
+			),
+		},
+	},
+	ZW: hiddenPostcode,
+};
+
+export default countryAddressFields;

plugins/woocommerce-blocks/assets/js/base/components/address-form/default-address-fields.js

@@ -0,0 +1,123 @@
+/** @typedef { import('@woocommerce/type-defs/address-fields').AddressField } AddressField */
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Default address field properties.
+ *
+ * @property {AddressField} first_name Customer first name.
+ * @property {AddressField} last_name  Customer last name.
+ * @property {AddressField} company    Company name.
+ * @property {AddressField} address_1  Street address.
+ * @property {AddressField} address_2  Second line of address.
+ * @property {AddressField} country    Country code.
+ * @property {AddressField} city       City name.
+ * @property {AddressField} state      State name or code.
+ * @property {AddressField} postcode   Postal code.
+ */
+const AddressFields = {
+	first_name: {
+		label: __( 'First name', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'First name (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'given-name',
+		required: true,
+		hidden: false,
+		index: 1,
+	},
+	last_name: {
+		label: __( 'Last name', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Last name (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'family-name',
+		required: true,
+		hidden: false,
+		index: 2,
+	},
+	company: {
+		label: __( 'Company', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Company (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'organization',
+		required: false,
+		hidden: false,
+		index: 3,
+	},
+	address_1: {
+		label: __( 'Address', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Address (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'address-line1',
+		required: true,
+		hidden: false,
+		index: 4,
+	},
+	address_2: {
+		label: __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Apartment, suite, etc. (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'address-line2',
+		required: false,
+		hidden: false,
+		index: 5,
+	},
+	country: {
+		label: __( 'Country/Region', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Country/Region (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'country',
+		required: true,
+		hidden: false,
+		index: 6,
+	},
+	city: {
+		label: __( 'City', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Apartment, suite, etc. (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'address-level2',
+		required: true,
+		hidden: false,
+		index: 7,
+	},
+	state: {
+		label: __( 'State/County', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'State/County (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'address-level1',
+		required: true,
+		hidden: false,
+		index: 8,
+	},
+	postcode: {
+		label: __( 'Postal code', 'woo-gutenberg-products-block' ),
+		optionalLabel: __(
+			'Postal code (optional)',
+			'woo-gutenberg-products-block'
+		),
+		autocomplete: 'postal-code',
+		required: true,
+		hidden: false,
+		index: 9,
+	},
+};
+
+export default AddressFields;

plugins/woocommerce-blocks/assets/js/base/components/address-form/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import TextInput from '@woocommerce/base-components/text-input';
 import {
@@ -12,91 +11,56 @@ import {
 	BillingStateInput,
 	ShippingStateInput,
 } from '@woocommerce/base-components/state-input';
-import {
-	COUNTRY_LOCALE,
-	DEFAULT_ADDRESS_FIELDS,
-} from '@woocommerce/block-settings';
 
-export const defaultFieldConfig = {
+/**
-	first_name: {
+ * Internal dependencies
-		autocomplete: 'given-name',
+ */
-	},
+import defaultAddressFields from './default-address-fields';
-	last_name: {
+import countryAddressFields from './country-address-fields';
-		autocomplete: 'family-name',
-	},
-	company: {
-		autocomplete: 'organization',
-	},
-	address_1: {
-		autocomplete: 'address-line1',
-	},
-	address_2: {
-		autocomplete: 'address-line2',
-	},
-	country: {
-		autocomplete: 'country',
-		priority: 65,
-		required: true,
-	},
-	city: {
-		autocomplete: 'address-level2',
-	},
-	postcode: {
-		autocomplete: 'postal-code',
-	},
-	state: {
-		autocomplete: 'address-level1',
-	},
-};
 
+/**
+ * Checkout address form.
+ */
 const AddressForm = ( {
-	fields = Object.keys( defaultFieldConfig ),
+	fields = Object.keys( defaultAddressFields ),
-	fieldConfig = defaultFieldConfig,
+	fieldConfig = {},
 	onChange,
 	type = 'shipping',
 	values,
 } ) => {
-	const countryLocale = COUNTRY_LOCALE[ values.country ] || {};
+	const countryLocale = countryAddressFields[ values.country ] || {};
 	const addressFields = fields.map( ( field ) => ( {
 		key: field,
-		...DEFAULT_ADDRESS_FIELDS[ field ],
+		...defaultAddressFields[ field ],
-		...countryLocale[ field ],
 		...fieldConfig[ field ],
+		...countryLocale[ field ],
 	} ) );
 	const sortedAddressFields = addressFields.sort(
-		( a, b ) => a.priority - b.priority
+		( a, b ) => a.index - b.index
 	);
 
-	const optionalText = __( '(optional)', 'woo-gutenberg-products-block' );
-
 	return (
 		<div className="wc-block-address-form">
-			{ sortedAddressFields.map( ( addressField ) => {
+			{ sortedAddressFields.map( ( field ) => {
-				if ( addressField.hidden ) {
+				if ( field.hidden ) {
 					return null;
 				}
 
-				const requiredField = addressField.required;
+				if ( field.key === 'country' ) {
-				let fieldLabel = addressField.label || addressField.placeholder;
-
-				if (
-					! addressField.required &&
-					! fieldLabel.includes( optionalText )
-				) {
-					fieldLabel = fieldLabel + ' ' + optionalText;
-				}
-
-				if ( addressField.key === 'country' ) {
 					const Tag =
 						type === 'shipping'
 							? ShippingCountryInput
 							: BillingCountryInput;
 					return (
 						<Tag
-							key={ addressField.key }
+							key={ field.key }
-							label={ fieldLabel }
+							label={
+								field.required
+									? field.label
+									: field.optionalLabel
+							}
 							value={ values.country }
-							autoComplete={ addressField.autocomplete }
+							autoComplete={ field.autocomplete }
 							onChange={ ( newValue ) =>
 								onChange( {
 									...values,
@@ -104,48 +68,54 @@ const AddressForm = ( {
 									state: '',
 								} )
 							}
-							required={ requiredField }
+							required={ field.required }
 						/>
 					);
 				}
 
-				if ( addressField.key === 'state' ) {
+				if ( field.key === 'state' ) {
 					const Tag =
 						type === 'shipping'
 							? ShippingStateInput
 							: BillingStateInput;
 					return (
 						<Tag
-							key={ addressField.key }
+							key={ field.key }
 							country={ values.country }
-							label={ fieldLabel }
+							label={
+								field.required
+									? field.label
+									: field.optionalLabel
+							}
 							value={ values.state }
-							autoComplete={ addressField.autocomplete }
+							autoComplete={ field.autocomplete }
 							onChange={ ( newValue ) =>
 								onChange( {
 									...values,
 									state: newValue,
 								} )
 							}
-							required={ requiredField }
+							required={ field.required }
 						/>
 					);
 				}
 
 				return (
 					<TextInput
-						key={ addressField.key }
+						key={ field.key }
-						className={ `wc-block-address-form__${ addressField.key }` }
+						className={ `wc-block-address-form__${ field.key }` }
-						label={ fieldLabel }
+						label={
-						value={ values[ addressField.key ] }
+							field.required ? field.label : field.optionalLabel
-						autoComplete={ addressField.autocomplete }
+						}
+						value={ values[ field.key ] }
+						autoComplete={ field.autocomplete }
 						onChange={ ( newValue ) =>
 							onChange( {
 								...values,
-								[ addressField.key ]: newValue,
+								[ field.key ]: newValue,
 							} )
 						}
-						required={ requiredField }
+						required={ field.required }
 					/>
 				);
 			} ) }
@@ -157,7 +127,7 @@ AddressForm.propTypes = {
 	onChange: PropTypes.func.isRequired,
 	values: PropTypes.object.isRequired,
 	fields: PropTypes.arrayOf(
-		PropTypes.oneOf( Object.keys( defaultFieldConfig ) )
+		PropTypes.oneOf( Object.keys( defaultAddressFields ) )
 	),
 	fieldConfig: PropTypes.object,
 	type: PropTypes.oneOf( [ 'billing', 'shipping' ] ),

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js

@@ -3,9 +3,8 @@
  */
 import { Fragment, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import AddressForm, {
+import AddressForm from '@woocommerce/base-components/address-form';
-	defaultFieldConfig,
+import defaultAddressFields from '@woocommerce/base-components/address-form/default-address-fields';
-} from '@woocommerce/base-components/address-form';
 import {
 	FormStep,
 	CheckoutForm,
@@ -63,14 +62,14 @@ const Block = ( { attributes, isEditor = false, shippingRates = [] } ) => {
 		! SHIPPING_ENABLED || ! useShippingAddressAsBilling;
 
 	const addressFields = {
-		...defaultFieldConfig,
+		...defaultAddressFields,
 		company: {
-			...defaultFieldConfig.company,
+			...defaultAddressFields.company,
 			hidden: ! attributes.showCompanyField,
 			required: attributes.requireCompanyField,
 		},
 		address_2: {
-			...defaultFieldConfig.address_2,
+			...defaultAddressFields.address_2,
 			hidden: ! attributes.showAddress2Field,
 		},
 	};

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js

@@ -54,7 +54,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
 					</p>
 					<ToggleControl
 						label={ __(
-							'Company name',
+							'Company',
 							'woo-gutenberg-products-block'
 						) }
 						checked={ showCompanyField }
@@ -81,7 +81,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
 					) }
 					<ToggleControl
 						label={ __(
-							'Apartment, suite, unit etc',
+							'Apartment, suite, etc.',
 							'woo-gutenberg-products-block'
 						) }
 						checked={ showAddress2Field }
@@ -92,10 +92,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
 						}
 					/>
 					<ToggleControl
-						label={ __(
+						label={ __( 'Phone', 'woo-gutenberg-products-block' ) }
-							'Phone number',
-							'woo-gutenberg-products-block'
-						) }
 						checked={ showPhoneField }
 						onChange={ () =>
 							setAttributes( {

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js

@@ -60,6 +60,8 @@ const getProps = ( el ) => {
 			} else {
 				attributes[ key ] = el.dataset[ key ];
 			}
+		} else {
+			attributes[ key ] = blockAttributes[ key ].default;
 		}
 	} );
 

plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js

@@ -53,8 +53,6 @@ export const SHIPPING_METHODS_EXIST = getSetting(
 	'shippingMethodsExist',
 	false
 );
-export const COUNTRY_LOCALE = getSetting( 'countryLocale', {} );
-export const DEFAULT_ADDRESS_FIELDS = getSetting( 'defaultAddressFields', {} );
 
 const defaultPage = {
 	name: '',

plugins/woocommerce-blocks/assets/js/type-defs/address-fields.js

@@ -0,0 +1,27 @@
+/**
+ * @typedef {Object} AddressField
+ *
+ * @property {string} label         The label for the field.
+ * @property {string} optionalLabel The label for the field if made optional.
+ * @property {string} autocomplete  The HTML autocomplete attribute value. See
+ *                                  https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+ * @property {boolean} required     Set to true if the field is required.
+ * @property {boolean} hidden       Set to true if the field should not be
+ *                                  rendered.
+ * @property {number}  index        Fields will be sorted and render in this
+ *                                  order, lowest to highest.
+ */
+
+/**
+ * @typedef {string} CountryCode ISO 3166 Country code.
+ */
+
+/**
+ * @typedef {string} AddressFieldKey Key for an address field, e.g. first_name.
+ */
+
+/**
+ * @typedef {Object <CountryCode, Object <AddressFieldKey, AddressField>>} CountryAddressFields
+ */
+
+export {};

plugins/woocommerce-blocks/src/BlockTypes/Cart.php

@@ -55,12 +55,6 @@ class Cart extends AbstractBlock {
 		if ( ! $data_registry->exists( 'shippingStates' ) ) {
 			$data_registry->add( 'shippingStates', WC()->countries->get_shipping_country_states() );
 		}
-		if ( ! $data_registry->exists( 'countryLocale' ) ) {
-			$data_registry->add( 'countryLocale', WC()->countries->get_country_locale() );
-		}
-		if ( ! $data_registry->exists( 'defaultAddressFields' ) ) {
-			$data_registry->add( 'defaultAddressFields', WC()->countries->get_default_address_fields() );
-		}
 		if ( ! $data_registry->exists( 'cartData' ) ) {
 			$data_registry->add( 'cartData', WC()->api->get_endpoint_data( '/wc/store/cart' ) );
 		}

plugins/woocommerce-blocks/src/BlockTypes/Checkout.php

@@ -69,12 +69,6 @@ class Checkout extends AbstractBlock {
 				$data_registry->add( 'shippingMethodsExist', $methods_exist );
 			}
 		}
-		if ( ! $data_registry->exists( 'countryLocale' ) ) {
-			$data_registry->add( 'countryLocale', WC()->countries->get_country_locale() );
-		}
-		if ( ! $data_registry->exists( 'defaultAddressFields' ) ) {
-			$data_registry->add( 'defaultAddressFields', WC()->countries->get_default_address_fields() );
-		}
 		\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
 		return $content;
 	}

plugins/woocommerce-blocks/src/RestApi/StoreApi/Schemas/OrderSchema.php

@@ -158,58 +158,58 @@ class OrderSchema extends AbstractSchema {
 				'context'     => [ 'view', 'edit' ],
 				'properties'  => [
 					'first_name' => [
-						'description' => __( 'First name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'First name', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'last_name'  => [
-						'description' => __( 'Last name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Last name', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'company'    => [
-						'description' => __( 'Company name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Company', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'address_1'  => [
-						'description' => __( 'Address line 1', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Address', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'address_2'  => [
-						'description' => __( 'Address line 2', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'city'       => [
-						'description' => __( 'City name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'City', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'state'      => [
-						'description' => __( 'ISO code or name of the state, province or district.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'State/County code, or name of the state, county, province, or district.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'postcode'   => [
-						'description' => __( 'Postal code.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Postal code', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'country'    => [
-						'description' => __( 'Country code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Country/Region code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'email'      => [
-						'description' => __( 'Email address.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Email', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'format'      => 'email',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'phone'      => [
-						'description' => __( 'Phone number.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Phone', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
@@ -221,47 +221,47 @@ class OrderSchema extends AbstractSchema {
 				'context'     => [ 'view', 'edit' ],
 				'properties'  => [
 					'first_name' => [
-						'description' => __( 'First name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'First name', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'last_name'  => [
-						'description' => __( 'Last name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Last name', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'company'    => [
-						'description' => __( 'Company name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Company', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'address_1'  => [
-						'description' => __( 'Address line 1', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Address', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'address_2'  => [
-						'description' => __( 'Address line 2', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Apartment, suite, etc.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'city'       => [
-						'description' => __( 'City name.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'City', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'state'      => [
-						'description' => __( 'ISO code or name of the state, province or district.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'State/County code, or name of the state, county, province, or district.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'postcode'   => [
-						'description' => __( 'Postal code.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Postal code', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],
 					'country'    => [
-						'description' => __( 'Country code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
+						'description' => __( 'Country/Region code in ISO 3166-1 alpha-2 format.', 'woo-gutenberg-products-block' ),
 						'type'        => 'string',
 						'context'     => [ 'view', 'edit' ],
 					],