Move country to top of form for all countries (#47375)

* Move country to top of form for all countries * adjust styling * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com>
woocommerce · May 13, 2024 · 76a9e2e · 76a9e2e
1 parent 2db2916
commit 76a9e2e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/...oocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss
@@ -26,8 +26,11 @@
 				flex: 1 0 calc(50% - #{$gap-small}); // "flex-grow = 1" allows the input to grow to fill the space
 				box-sizing: border-box;
 
-				&:nth-of-type(2),
-				&:first-of-type {
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:first-child + .wc-block-components-text-input {
 					margin-top: 0;
 				}
 			}
@@ -38,6 +41,10 @@
 			.wc-block-components-country-input,
 			.wc-block-components-checkbox {
 				flex: 0 0 100%;
+
+				&:first-child {
+					margin-top: 0;
+				}
 			}
 		}
 	}

diff --git a/plugins/woocommerce/changelog/47375-add-move-country-to-first b/plugins/woocommerce/changelog/47375-add-move-country-to-first
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Move country to be the first field in Checkout block.
diff --git a/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php b/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php
@@ -104,6 +104,17 @@ public function __construct( AssetDataRegistry $asset_data_registry ) {
 				'autocapitalize' => 'none',
 				'index'          => 0,
 			],
+			'country'    => [
+				'label'         => __( 'Country/Region', 'woocommerce' ),
+				'optionalLabel' => __(
+					'Country/Region (optional)',
+					'woocommerce'
+				),
+				'required'      => true,
+				'hidden'        => false,
+				'autocomplete'  => 'country',
+				'index'         => 1,
+			],
 			'first_name' => [
 				'label'          => __( 'First name', 'woocommerce' ),
 				'optionalLabel'  => __(
@@ -164,17 +175,6 @@ public function __construct( AssetDataRegistry $asset_data_registry ) {
 				'autocapitalize' => 'sentences',
 				'index'          => 50,
 			],
-			'country'    => [
-				'label'         => __( 'Country/Region', 'woocommerce' ),
-				'optionalLabel' => __(
-					'Country/Region (optional)',
-					'woocommerce'
-				),
-				'required'      => true,
-				'hidden'        => false,
-				'autocomplete'  => 'country',
-				'index'         => 50,
-			],
 			'city'       => [
 				'label'          => __( 'City', 'woocommerce' ),
 				'optionalLabel'  => __(