Commit daa67e9f55f for woocommerce
commit daa67e9f55fa1853e6eb3d2c80a86aae19e4a236
Author: Vismay <89745751+vismaytiwari@users.noreply.github.com>
Date: Tue Jul 14 15:50:20 2026 +0530
Fix several RTL layout issues in the WooCommerce admin (#66518)
- Local Pickup settings modal: action buttons were stuck together in RTL;
use logical margins in the shared SettingsModal footer.
- Customize Your Store banners: the illustration now mirrors to the correct
side in RTL instead of staying pinned right.
- Sample product import: the overlay is positioned correctly in RTL and the
product-list chevrons point in the reading direction.
Closes #65429.
diff --git a/plugins/woocommerce/changelog/65429-fix-rtl-admin-layout b/plugins/woocommerce/changelog/65429-fix-rtl-admin-layout
new file mode 100644
index 00000000000..1f98318122c
--- /dev/null
+++ b/plugins/woocommerce/changelog/65429-fix-rtl-admin-layout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix right-to-left (RTL) layout issues in the admin: the sample product import overlay position and its list chevrons, and the Customize Your Store banner illustration placement.
diff --git a/plugins/woocommerce/client/admin/client/customize-store/style.scss b/plugins/woocommerce/client/admin/client/customize-store/style.scss
index 0109f7735f4..c9683d42743 100644
--- a/plugins/woocommerce/client/admin/client/customize-store/style.scss
+++ b/plugins/woocommerce/client/admin/client/customize-store/style.scss
@@ -202,7 +202,7 @@
.woocommerce-banner-visual {
position: absolute;
- right: 0;
+ inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
@@ -262,7 +262,7 @@
ul {
flex: 1 1 50%;
list-style: disc;
- padding-left: 1rem;
+ padding-inline-start: 1rem;
li {
margin-bottom: 0;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-confirm-modal.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-confirm-modal.scss
index 1f72e411da4..e7e4ac0198c 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-confirm-modal.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-confirm-modal.scss
@@ -1,13 +1,13 @@
.woocommerce-products-load-sample-product-confirm-modal-overlay {
@media (min-width: 783px ) {
& {
- left: 35px;
+ inset-inline-start: 35px;
}
}
@include break-large {
& {
- left: 160px;
+ inset-inline-start: 160px;
}
}
}
@@ -23,7 +23,7 @@
margin-top: $gap;
button {
- margin-left: $gap;
+ margin-inline-start: $gap;
}
}
}
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-modal.scss b/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-modal.scss
index 0bd8f516962..e558d593f1e 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-modal.scss
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/components/load-sample-product-modal.scss
@@ -4,14 +4,14 @@
@media (min-width: 783px ) {
& {
- left: 35px;
+ inset-inline-start: 35px;
}
}
@include break-large {
& {
- left: 160px;
+ inset-inline-start: 160px;
}
}
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/products/constants.tsx b/plugins/woocommerce/client/admin/client/task-lists/fills/products/constants.tsx
index 5db851524cd..7167aecb58f 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/products/constants.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/products/constants.tsx
@@ -1,11 +1,11 @@
/**
* External dependencies
*/
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
import ProductIcon from 'gridicons/dist/product';
import CloudOutlineIcon from 'gridicons/dist/cloud-outline';
import TypesIcon from 'gridicons/dist/types';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
import { recordEvent } from '@woocommerce/tracks';
import { getAdminLink } from '@woocommerce/settings';
@@ -18,6 +18,10 @@ import LightBulb from './icon/lightbulb_24px.js';
import PrintfulIcon from './icon/printful.png';
import Upload from './icon/upload_40px.js';
+// The "after" chevron points in the reading direction (forward), so it must
+// flip for RTL locales instead of always pointing right.
+const listItemChevron = <Icon icon={ isRTL() ? chevronLeft : chevronRight } />;
+
export const productTypes = Object.freeze( [
{
key: 'physical' as const,
@@ -27,7 +31,7 @@ export const productTypes = Object.freeze( [
'woocommerce'
),
before: <ProductIcon />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
},
{
key: 'digital' as const,
@@ -37,7 +41,7 @@ export const productTypes = Object.freeze( [
'woocommerce'
),
before: <CloudOutlineIcon />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
},
{
key: 'variable' as const,
@@ -47,21 +51,21 @@ export const productTypes = Object.freeze( [
'woocommerce'
),
before: <TypesIcon />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
},
{
key: 'grouped' as const,
title: __( 'Grouped product', 'woocommerce' ),
content: __( 'A collection of related products.', 'woocommerce' ),
before: <Widget />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
},
{
key: 'external' as const,
title: __( 'External product', 'woocommerce' ),
content: __( 'Link a product to an external website.', 'woocommerce' ),
before: <Link />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
},
] );
@@ -73,7 +77,7 @@ export const LoadSampleProductType = {
'woocommerce'
),
before: <LightBulb />,
- after: <Icon icon={ chevronRight } />,
+ after: listItemChevron,
className: 'woocommerce-products-list__item-load-sample-product',
};
diff --git a/plugins/woocommerce/client/blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx b/plugins/woocommerce/client/blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx
index 51ad5137931..1f9ab2a5f31 100644
--- a/plugins/woocommerce/client/blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx
@@ -57,12 +57,12 @@ const StyledFooter = styled.div`
> * {
&:not( :first-of-type ) {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
}
.button-link-delete {
- margin-right: auto;
+ margin-inline-end: auto;
color: #d63638;
}
`;
diff --git a/plugins/woocommerce/client/blocks/changelog/65429-fix-rtl-settings-modal-buttons b/plugins/woocommerce/client/blocks/changelog/65429-fix-rtl-settings-modal-buttons
new file mode 100644
index 00000000000..33a232256e1
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/changelog/65429-fix-rtl-settings-modal-buttons
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix right-to-left (RTL) button spacing in the shipping settings modal, where action buttons (for example in Local Pickup) were stuck together.