From 6314cd30b5ac0461c15c33c5b16f5c477cb3c36c Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Tue, 31 Dec 2024 08:32:58 +0530
Subject: [PATCH] Block Library: Standardize reduced motion handling using
 media queries

---
 packages/block-library/src/freeform/editor.scss    |  7 ++++---
 packages/block-library/src/gallery/editor.scss     |  6 ++++--
 packages/block-library/src/image/style.scss        | 14 +++++++-------
 packages/block-library/src/navigation/style.scss   | 11 +++++++----
 packages/block-library/src/social-links/style.scss |  9 ++++++---
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss
index c2256ecd7a795f..2dd15359d8badd 100644
--- a/packages/block-library/src/freeform/editor.scss
+++ b/packages/block-library/src/freeform/editor.scss
@@ -240,12 +240,13 @@
 
 div[data-type="core/freeform"] {
 	&::before {
-		transition: border-color 0.1s linear, box-shadow 0.1s linear;
-		@include reduce-motion("transition");
 		border: $border-width solid $gray-300;
-
 		// Windows High Contrast mode will show this outline.
 		outline: $border-width solid transparent;
+
+		@media not (prefers-reduced-motion) {
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		}
 	}
 
 	&.is-selected::before {
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 61121f3dd866dc..d204d0347d8eb4 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -137,12 +137,14 @@
 	top: -2px;
 	margin: $grid-unit-10;
 	z-index: z-index(".block-library-gallery-item__inline-menu");
-	transition: box-shadow 0.2s ease-out;
-	@include reduce-motion("transition");
 	border-radius: $radius-small;
 	background: $white;
 	border: $border-width solid $gray-900;
 
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.2s ease-out;
+	}
+
 	&:hover {
 		box-shadow: $elevation-x-small;
 	}
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 20196a5200df08..117045f7dce627 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -11,7 +11,7 @@
 		vertical-align: bottom;
 		box-sizing: border-box;
 
-		@media (prefers-reduced-motion: no-preference) {
+		@media not (prefers-reduced-motion) {
 			&.hide {
 				visibility: hidden;
 			}
@@ -167,7 +167,7 @@
 		text-align: center;
 		padding: 0;
 		border-radius: 4px;
-		@media (prefers-reduced-motion: no-preference) {
+		@media not (prefers-reduced-motion) {
 			transition: opacity 0.2s ease;
 		}
 
@@ -282,29 +282,29 @@
 	// or faster than the scrim to give a sense of depth.
 	&.active {
 		visibility: visible;
-		@media (prefers-reduced-motion: no-preference) {
+		@media not (prefers-reduced-motion) {
 			animation: both turn-on-visibility 0.25s;
 		}
 		img {
-			@media (prefers-reduced-motion: no-preference) {
+			@media not (prefers-reduced-motion) {
 				animation: both turn-on-visibility 0.35s;
 			}
 		}
 	}
 	&.show-closing-animation {
 		&:not(.active) {
-			@media (prefers-reduced-motion: no-preference) {
+			@media not (prefers-reduced-motion) {
 				animation: both turn-off-visibility 0.35s;
 			}
 			img {
-				@media (prefers-reduced-motion: no-preference) {
+				@media not (prefers-reduced-motion) {
 					animation: both turn-off-visibility 0.25s;
 				}
 			}
 		}
 	}
 
-	@media (prefers-reduced-motion: no-preference) {
+	@media not (prefers-reduced-motion) {
 		&.zoom {
 			&.active {
 				opacity: 1;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 5f49eba466a5fd..ab93fa7da67ef4 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -166,7 +166,9 @@ $navigation-icon-size: 24px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
-		transition: opacity 0.1s linear;
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 		visibility: hidden;
 
 		// Don't take up space when the menu is collapsed.
@@ -502,9 +504,10 @@ button.wp-block-navigation-item__content {
 		background-color: inherit;
 
 		// Animation.
-		animation: overlay-menu__fade-in-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not (prefers-reduced-motion) {
+			animation: overlay-menu__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+		}
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 955c0434feea22..7b42f4476d77ec 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -70,8 +70,9 @@
 .wp-block-social-link {
 	display: block;
 	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	transition: transform 0.1s ease;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: transform 0.1s ease;
+	}
 
 	// Dimensions.
 	height: auto;
@@ -80,7 +81,9 @@
 		align-items: center;
 		display: flex;
 		line-height: 0;
-		transition: transform 0.1s ease;
+		@media not (prefers-reduced-motion) {
+			transition: transform 0.1s ease;
+		}
 	}
 
 	&:hover {