Use logical property values for mx, my, px, and py utilitieslogical-props-spacing-utils

2 files changed, 13 insertions, 10 deletions

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 74f8a3a01c..ae95e655f6 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -316,13 +316,13 @@ $utilities: map-merge(
     ),
     "margin-x": (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline,
       class: mx,
       values: map-merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
-      property: margin-top margin-bottom,
+      property: margin-block,
       class: my,
       values: map-merge($spacers, (auto: auto))
     ),
@@ -359,13 +359,13 @@ $utilities: map-merge(
     ),
     "negative-margin-x": (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline,
       class: mx,
       values: $negative-spacers
     ),
     "negative-margin-y": (
       responsive: true,
-      property: margin-top margin-bottom,
+      property: margin-block,
       class: my,
       values: $negative-spacers
     ),
@@ -402,13 +402,13 @@ $utilities: map-merge(
     ),
     "padding-x": (
       responsive: true,
-      property: padding-right padding-left,
+      property: padding-inline,
       class: px,
       values: $spacers
     ),
     "padding-y": (
       responsive: true,
-      property: padding-top padding-bottom,
+      property: padding-block,
       class: py,
       values: $spacers
     ),
diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md
index 70fbe76945..2a01703cf6 100644
--- a/site/content/docs/5.0/utilities/spacing.md
+++ b/site/content/docs/5.0/utilities/spacing.md
@@ -29,8 +29,8 @@ Where *sides* is one of:
 - `b` - for classes that set `margin-bottom` or `padding-bottom`
 - `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
 - `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
-- `x` - for classes that set both `*-left` and `*-right`
-- `y` - for classes that set both `*-top` and `*-bottom`
+- `x` - for classes that set `*-inline`, the logical property equivalent of `*-left` and `*-right`
+- `y` - for classes that set `*-block`, the logical property equivalent of `*-top` and `*-bottom`
 - blank - for classes that set a `margin` or `padding` on all 4 sides of the element
 
 Where *size* is one of:
@@ -58,9 +58,12 @@ Here are some representative examples of these classes:
   margin-left: ($spacer * .25) !important;
 }
 
+.my-2 {
+  margin-block: ($spacer * .5) !important;
+}
+
 .px-2 {
-  padding-left: ($spacer * .5) !important;
-  padding-right: ($spacer * .5) !important;
+  padding-inline: ($spacer * .5) !important;
 }
 
 .p-3 {