diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss index 044f4d8ea5a..0c248edf928 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss @@ -4,6 +4,10 @@ margin: 0 auto $gap; position: relative; + &:has(> :last-child.wp-block-woocommerce-checkout-fields-block) { + flex-direction: row-reverse; + } + .wc-block-must-login-prompt { display: block; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx index 54ca73d261f..99ed87843fc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx @@ -86,8 +86,8 @@ export const Edit = ( { }, [ clientId ] ); const defaultTemplate = [ - [ 'woocommerce/checkout-fields-block', {}, [] ], [ 'woocommerce/checkout-totals-block', {}, [] ], + [ 'woocommerce/checkout-fields-block', {}, [] ], ] as TemplateArray; const toggleAttribute = ( key: keyof Attributes ): void => { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss index df95a310dd6..a0c60460914 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss @@ -8,6 +8,10 @@ align-items: flex-start; padding-left: 5px; + &:has(> :first-child.wp-block-woocommerce-checkout-totals-block) { + flex-direction: row-reverse; + } + .wc-block-checkout__additional_fields { padding: 0; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss index b1ca21dd3ee..eadb4280e4d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss @@ -43,6 +43,11 @@ flex-wrap: wrap; margin: 0 auto $gap; position: relative; + + &:has(> :last-child.wp-block-woocommerce-checkout-fields-block) { + flex-direction: row-reverse; + } + .wp-block-woocommerce-checkout-totals-block { width: 35%; padding-left: math.percentage(math.div($gap-large, 1060px)); diff --git a/plugins/woocommerce/changelog/fix-43638 b/plugins/woocommerce/changelog/fix-43638 new file mode 100644 index 00000000000..dfa251b8e65 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-43638 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix focus order on checkout block page.