diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss index c3a156b24a2..8105c83da79 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss +++ b/plugins/woocommerce-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 new file mode 100644 index 00000000000..c1c687f9649 --- /dev/null +++ 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. \ No newline at end of file diff --git a/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php b/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php index cab99fc5df1..0a4752fe7c4 100644 --- a/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php +++ b/plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php @@ -104,6 +104,17 @@ class CheckoutFields { '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 @@ class CheckoutFields { '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' => __(