From 6d998a4b8deb4964cee80bb17f2e4869fd125f9d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 28 Jul 2021 09:43:43 -0700
Subject: [PATCH] Use logical property values for mx, my, px, and py utilities

---
 scss/_utilities.scss                       | 12 ++++++------
 site/content/docs/5.0/utilities/spacing.md | 11 +++++++----
 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 {