From a97b3dfa0780b2986d5bce01fc65913de89aa4fc Mon Sep 17 00:00:00 2001
From: Himanshu Pathak <himanshu.pathak@rtcamp.com>
Date: Fri, 24 Jan 2025 09:57:19 +0530
Subject: [PATCH] Editor: Standardize reduced motion handling using media
 queries (#68424)

* Editor: Standardize reduced motion handling using media queries

* Remove redundant mixin

* Editor: Fix Post Publish Panel animation sliding in reduced motion mode

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 packages/editor/src/components/document-bar/style.scss    | 6 ++++--
 packages/editor/src/components/document-tools/style.scss  | 5 +++--
 .../editor/src/components/post-featured-image/style.scss  | 6 ++++--
 .../editor/src/components/post-publish-panel/style.scss   | 8 +++++---
 .../editor/src/components/post-text-editor/style.scss     | 6 ++++--
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 749da6ec8c9837..4b84d8b44d39f3 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -18,8 +18,10 @@
 
 	.components-button {
 		border-radius: $grid-unit-05;
-		transition: all 0.1s ease-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s ease-out;
+		}
 
 		&:hover {
 			background: $gray-200;
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
index dfafff2126d66d..7f70d02a6eaca0 100644
--- a/packages/editor/src/components/document-tools/style.scss
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -16,8 +16,9 @@
 		display: inline-flex;
 
 		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			}
 		}
 
 		&.is-pressed {
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index bf9433faa662d4..cca45c61adaf8c 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -78,12 +78,14 @@
 
 .editor-post-featured-image__actions {
 	&:not(.editor-post-featured-image__actions-missing-image) {
-		@include reduce-motion("transition");
 		bottom: 0;
 		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
 		padding: $grid-unit-10;
 		position: absolute;
-		transition: opacity 50ms ease-out;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 50ms ease-out;
+		}
 
 		.editor-post-featured-image__action {
 			backdrop-filter: blur(16px) saturate(180%);
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 7b075717651781..6221eaef52767b 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -210,9 +210,11 @@
 		left: auto;
 		width: $sidebar-width + $border-width;
 		border-left: $border-width solid $gray-300;
-		transform: translateX(+100%);
-		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-		@include reduce-motion("animation");
+
+		@media not (prefers-reduced-motion) {
+			transform: translateX(+100%);
+			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		}
 
 		body.is-fullscreen-mode & {
 			top: 0;
diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss
index f3b9b65007df75..5391588d906d8d 100644
--- a/packages/editor/src/components/post-text-editor/style.scss
+++ b/packages/editor/src/components/post-text-editor/style.scss
@@ -10,8 +10,10 @@ textarea.editor-post-text-editor {
 	font-family: $editor-html-font;
 	line-height: 2.4;
 	min-height: 200px;
-	transition: border 0.1s ease-out, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: border 0.1s ease-out, box-shadow 0.1s linear;
+	}
 
 	// Same padding as title.
 	padding: $grid-unit-20;