Edit Site: Standardize reduced motion handling using media queries (#68419)

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

Author: 3 people

packages/edit-site/src/components/canvas-loader/style.scss

@@ -9,9 +9,10 @@
 	align-items: center;
 	justify-content: center;
 
-	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
+		animation-fill-mode: forwards;
+	}
 
 	& > div {
 		width: 160px;

packages/edit-site/src/components/editor-canvas-container/style.scss

@@ -26,7 +26,9 @@
 	position: absolute;
 	right: 0;
 	top: 0;
-	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	@media not (prefers-reduced-motion) {
+		transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	}
 }
 
 .edit-site-editor-canvas-container__close-button {

packages/edit-site/src/components/editor/style.scss

@@ -1,7 +1,9 @@
 .edit-site-editor__editor-interface {
 	opacity: 1;
-	transition: opacity 0.1s ease-out;
-	@include reduce-motion( "transition" );
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-out;
+	}
 
 	&.is-loading {
 		opacity: 0;

packages/edit-site/src/components/global-styles/font-library-modal/style.scss

@@ -129,8 +129,10 @@ $footer-height: 70px;
 	.font-library-modal__font-variant_demo-text {
 		white-space: nowrap;
 		flex-shrink: 0;
-		transition: opacity 0.3s ease-in-out;
-		@include reduce-motion( "transition" );
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.3s ease-in-out;
+		}
 	}
 }
 

packages/edit-site/src/components/global-styles/variations/style.scss

@@ -9,9 +9,10 @@
 		outline-offset: -$border-width;
 		overflow: hidden;
 		position: relative;
-		// Add the same transition that block style variations and other buttons have.
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			// Add the same transition that block style variations and other buttons have.
+			transition: outline 0.1s linear;
+		}
 
 		&.is-pill {
 			height: $button-size-compact;

packages/edit-site/src/components/layout/style.scss

@@ -115,10 +115,13 @@
 
 		.edit-site-resizable-frame__inner-content {
 			box-shadow: $elevation-x-small;
-			transition: border-radius, box-shadow 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
 
+			@media not (prefers-reduced-motion) {
+				transition: border-radius, box-shadow 0.4s;
+			}
+
 			.edit-site-layout:not(.is-full-canvas) & {
 				border-radius: $radius-large;
 			}
@@ -195,8 +198,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
 		content: "";
 		display: block;
 		position: absolute;
@@ -206,6 +207,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		left: 9px;
 		border-radius: $radius-medium;
 		box-shadow: none;
+
+		@media not (prefers-reduced-motion) {
+			transition: box-shadow 0.1s ease;
+		}
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {

packages/edit-site/src/components/page-patterns/style.scss

@@ -26,10 +26,12 @@
 	top: 0;
 	z-index: 2;
 	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
 	min-height: $grid-unit-50;
 
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
+
 	.edit-site-patterns__title {
 		min-height: $grid-unit-50;
 

packages/edit-site/src/components/page-templates/style.scss

@@ -67,9 +67,11 @@
 		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
 		border-radius: 100%;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	&.is-loaded {

packages/edit-site/src/components/page/style.scss

@@ -4,8 +4,10 @@
 	height: calc(100% - #{$header-height});
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
-	transition: width ease-out 0.2s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: width ease-out 0.2s;
+	}
 
 	@include break-medium() {
 		height: 100%;
@@ -19,8 +21,10 @@
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 
 	.components-heading {
 		color: $gray-900;

packages/edit-site/src/components/site-hub/style.scss

@@ -65,8 +65,10 @@
 		opacity: 0;
 		position: absolute;
 		right: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	&:hover::after,