Create County Input

assets/js/base/components/county-input/billing-county-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { ALLOWED_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const BillingCountyInput = ( props ) => {
+	return <CountyInput counties={ ALLOWED_COUNTIES } { ...props } />;
+};
+
+BillingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default BillingCountyInput;

assets/js/base/components/county-input/county-input.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Select from '../select';
+
+const CountyInput = ( {
+	className,
+	counties,
+	country,
+	label,
+	onChange,
+	value = '',
+} ) => {
+	const countryCounties = counties[ country ];
+	if ( ! countryCounties || Object.keys( countryCounties ).length === 0 ) {
+		return null;
+	}
+
+	const options = Object.keys( countryCounties ).map( ( key ) => ( {
+		key,
+		name: decodeEntities( countryCounties[ key ] ),
+	} ) );
+	const formattedValue = countryCounties[ value ]
+		? {
+				key: value,
+				name: decodeEntities( countryCounties[ value ] ),
+		  }
+		: null;
+
+	return (
+		<Select
+			className={ className }
+			label={ label }
+			onChange={ onChange }
+			options={ options }
+			value={ formattedValue }
+		/>
+	);
+};
+
+CountyInput.propTypes = {
+	counties: PropTypes.objectOf(
+		PropTypes.oneOfType( [
+			PropTypes.array,
+			PropTypes.objectOf( PropTypes.string ),
+		] )
+	).isRequired,
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	country: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default CountyInput;

assets/js/base/components/county-input/index.js

@@ -0,0 +1,3 @@
+export { default as CountyInput } from './county-input';
+export { default as BillingCountyInput } from './billing-county-input';
+export { default as ShippingCountyInput } from './shipping-county-input';

assets/js/base/components/county-input/shipping-county-input.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { SHIPPING_COUNTIES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import CountyInput from './county-input.js';
+
+const ShippingCountyInput = ( props ) => {
+	return <CountyInput counties={ SHIPPING_COUNTIES } { ...props } />;
+};
+
+ShippingCountyInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.string,
+};
+
+export default ShippingCountyInput;

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

@@ -8,6 +8,7 @@ import CheckoutForm from '@woocommerce/base-components/checkout/form';
 import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
 import TextInput from '@woocommerce/base-components/text-input';
 import { ShippingCountryInput } from '@woocommerce/base-components/country-input';
+import { ShippingCountyInput } from '@woocommerce/base-components/county-input';
 import RadioControl from '@woocommerce/base-components/radio-control';
 import InputRow from '@woocommerce/base-components/input-row';
 import { CheckboxControl } from '@wordpress/components';
@@ -208,7 +209,8 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
 								/>
 							</InputRow>
 							<InputRow>
-								<TextInput
+								<ShippingCountyInput
+									country={ shippingFields.country }
 									label={ __(
 										'County',
 										'woo-gutenberg-products-block'

assets/js/settings/blocks/constants.js

@@ -35,3 +35,5 @@ export const ATTRIBUTES = getSetting( 'attributes', [] );
 export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
 export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
 export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );
+export const SHIPPING_COUNTIES = getSetting( 'shippingCounties', {} );
+export const ALLOWED_COUNTIES = getSetting( 'allowedCounties', {} );

src/BlockTypes/Checkout.php

@@ -52,6 +52,8 @@ public function render( $attributes = array(), $content = '' ) {
 		);
 		$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
 		$data_registry->add( 'shippingCountries', WC()->countries->get_shipping_countries() );
+		$data_registry->add( 'allowedCounties', WC()->countries->get_allowed_country_states() );
+		$data_registry->add( 'shippingCounties', WC()->countries->get_shipping_country_states() );
 		\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
 		return $content;
 	}