Edit Post: Standardize reduced motion handling using media queries (#68426)

im3dabasia · im3dabasia · t-hamano · web-flow · commit 5b1dacc0c278 · 2025-01-14T16:47:34.000+09:00
Co-authored-by: im3dabasia &lt;im3dabasia1@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
diff --git a/packages/edit-post/src/components/back-button/style.scss b/packages/edit-post/src/components/back-button/style.scss
@@ -23,8 +23,9 @@
 		}
 
 		&::before {
-			transition: box-shadow 0.1s ease;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: box-shadow 0.1s ease;
+			}
 			content: "";
 			display: block;
 			position: absolute;
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -73,8 +73,9 @@
 				width: inherit;
 				height: $grid-unit-05;
 				border-radius: $radius-small;
-				transition: width 0.3s ease-out;
-				@include reduce-motion("transition");
+				@media not (prefers-reduced-motion) {
+					transition: width 0.3s ease-out;
+				}
 			}
 		}
 

Original file line number	Diff line number	Diff line change
`@@ -73,8 +73,9 @@`
`73`	`73`	`width: inherit;`
`74`	`74`	`height: $grid-unit-05;`
`75`	`75`	`border-radius: $radius-small;`
`76`		`- transition: width 0.3s ease-out;`
`77`		`- @include reduce-motion("transition");`
	`76`	`+ @media not (prefers-reduced-motion) {`
	`77`	`+ transition: width 0.3s ease-out;`
	`78`	`+ }`
`78`	`79`	`}`
`79`	`80`	`}`
`80`	`81`