[Block Editor]: A11y - Add and Update missing reduce-motion mixing (#68417)

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

Author: 3 people

packages/block-editor/src/components/block-canvas/style.scss

@@ -4,7 +4,8 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	// Handles transitions between device previews
-	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	}
 	background-color: $gray-300;
 }

packages/block-editor/src/components/block-draggable/style.scss

@@ -59,7 +59,9 @@
 	justify-content: center;
 	align-items: center;
 	background-color: transparent;
-	transition: all 0.1s linear 0.1s;
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.1s linear 0.1s;
+	}
 
 	.block-editor-block-draggable-chip__disabled-icon {
 		width: $grid-unit-50 * 0.5;

packages/block-editor/src/components/block-list/content.scss

@@ -58,10 +58,12 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 			background: var(--wp-admin-theme-color);
 			opacity: 0.4;
 
-			// Animate.
-			animation: selection-overlay__fade-in-animation 0.1s ease-out;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not ( prefers-reduced-motion ) {
+
+				// Animate.
+				animation: selection-overlay__fade-in-animation 0.1s ease-out;
+				animation-fill-mode: forwards;
+			}
 
 			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
@@ -271,8 +273,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
 	opacity: 0.2;
-	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 0.1s linear;
+	}
 
 	// Nested blocks should never be faded. If the parent block is already faded
 	// out, it shouldn't be faded out more. If the parent block in not faded
@@ -339,9 +342,10 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 // Hide the appender that sits at the end of block lists, when inside a nested block,
 // unless the block itself, or a parent, is selected.
 .wp-block .block-list-appender .block-editor-inserter__toggle {
-	animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not ( prefers-reduced-motion ) {
+		animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
+		animation-fill-mode: forwards;
+	}
 }
 
 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
@@ -367,8 +371,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	font-family: $editor-html-font;
 	font-size: $text-editor-font-size;
 	line-height: 1.5;
-	transition: padding 0.2s linear;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: padding 0.2s linear;
+	}
 
 	&:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -400,7 +405,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
 	margin-left: -1px;
 	margin-right: -1px;
-	transition: background-color 0.3s ease;
+	@media not ( prefers-reduced-motion ) {
+		transition: background-color 0.3s ease;
+	}
 	display: flex;
 	align-items: center;
 	justify-content: center;

packages/block-editor/src/components/block-mover/style.scss

@@ -87,10 +87,11 @@
 		right: $grid-unit-10;
 		z-index: -1;
 
-		// Animate in.
-		animation: components-button__appear-animation 0.1s ease;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
+		@media not ( prefers-reduced-motion ) {
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+		}
 	}
 
 	// Don't show the focus inherited by the Button component.

packages/block-editor/src/components/block-pattern-setup/style.scss

@@ -130,7 +130,9 @@
 				background-color: $white;
 				margin: auto;
 				padding: 0;
-				transition: transform 0.5s, z-index 0.5s;
+				@media not ( prefers-reduced-motion ) {
+					transition: transform 0.5s, z-index 0.5s;
+				}
 				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");
 
 				&.active-slide {

packages/block-editor/src/components/block-patterns-list/style.scss

@@ -44,9 +44,9 @@
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
 			border-radius: $radius-medium;
-
-			transition: outline 0.1s linear;
-			@include reduce-motion("transition");
+			@media not ( prefers-reduced-motion ) {
+				transition: outline 0.1s linear;
+			}
 		}
 	}
 

packages/block-editor/src/components/block-switcher/style.scss

@@ -129,7 +129,9 @@
 		.block-editor-block-switcher__preview-patterns-container-list__item {
 			height: 100%;
 			border-radius: $radius-small;
-			transition: all 0.05s ease-in-out;
+			@media not ( prefers-reduced-motion ) {
+				transition: all 0.05s ease-in-out;
+			}
 			position: relative;
 			border: $border-width solid transparent;
 

packages/block-editor/src/components/block-toolbar/style.scss

@@ -12,9 +12,11 @@
 	overflow-y: hidden;
 	overflow-x: auto;
 
-	// Animation
-	transition: border-color 0.1s linear, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+
+		// Animation
+		transition: border-color 0.1s linear, box-shadow 0.1s linear;
+	}
 
 	@include break-small() {
 		overflow: inherit;

packages/block-editor/src/components/block-tools/style.scss

@@ -191,9 +191,12 @@
 
 	.is-dragging-components-draggable & {
 		opacity: 0;
-		// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
-		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
-		animation: hide-during-dragging 1ms linear forwards;
+		@media not ( prefers-reduced-motion ) {
+
+			// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
+			// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
+			animation: hide-during-dragging 1ms linear forwards;
+		}
 	}
 
 	.block-editor-block-parent-selector {

packages/block-editor/src/components/button-block-appender/content.scss

@@ -79,10 +79,8 @@
 		background-color: var(--wp-admin-theme-color);
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
 		color: $light-gray-placeholder;
-		transition: background-color 0.2s ease-in-out;
-
-		@media ( prefers-reduced-motion: reduce ) {
-			transition: none;
+		@media not ( prefers-reduced-motion ) {
+			transition: background-color 0.2s ease-in-out;
 		}
 	}
 }

packages/block-editor/src/components/colors-gradients/style.scss

@@ -129,8 +129,9 @@ $swatch-gap: 12px;
 	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 0.1s ease-in-out;
+	}
 
 	&.block-editor-panel-color-gradient-settings__reset {
 		border-radius: $radius-small;

packages/block-editor/src/components/global-styles/style.scss

@@ -53,7 +53,9 @@
 	box-sizing: border-box;
 
 	transform: scale(1);
-	transition: transform 0.1s ease;
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 0.1s ease;
+	}
 	will-change: transform;
 
 	&:focus {

packages/block-editor/src/components/grid/style.scss

@@ -126,10 +126,11 @@
 			right: $grid-unit-10;
 			z-index: -1;
 
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not ( prefers-reduced-motion ) {
+				// Animate in.
+				animation: components-button__appear-animation 0.1s ease;
+				animation-fill-mode: forwards;
+			}
 		}
 
 		// Don't show the focus inherited by the Button component.

packages/block-editor/src/components/iframe/content.scss

@@ -4,8 +4,11 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// Prevents a flash of background color change when entering/exiting zoom out
-	transition: background-color 400ms;
+
+	@media not ( prefers-reduced-motion ) {
+		// Prevents a flash of background color change when entering/exiting zoom out
+		transition: background-color 400ms;
+	}
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);

packages/block-editor/src/components/inserter-list-item/style.scss

@@ -43,8 +43,9 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 	position: relative;
 	height: auto;
 
@@ -97,17 +98,19 @@
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
 	color: $gray-900;
-	transition: all 0.05s ease-in-out;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: all 0.05s ease-in-out;
+	}
 
 	.block-editor-block-icon {
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	svg {
-		transition: all 0.15s ease-out;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: all 0.15s ease-out;
+		}
 	}
 
 	.block-editor-block-types-list__list-item[draggable="true"] & {

packages/block-editor/src/components/inserter/style.scss

@@ -83,8 +83,9 @@ $block-inserter-tabs-height: 44px;
 	border: none;
 	outline: none;
 	padding: 0;
-	transition: color 0.2s ease;
-	@include reduce-motion("transition");
+	@media not ( prefers-reduced-motion ) {
+		transition: color 0.2s ease;
+	}
 }
 
 .block-editor-inserter__menu {
@@ -563,8 +564,9 @@ $block-inserter-tabs-height: 44px;
 		outline-color: var(--wp-admin-theme-color);
 		outline-width: var(--wp-admin-border-width-focus);
 		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not ( prefers-reduced-motion ) {
+			transition: outline 0.1s linear;
+		}
 	}
 }
 

packages/block-editor/src/components/link-control/style.scss

@@ -289,8 +289,10 @@ $block-editor-link-control-number-of-actions: 1;
 			right: 0;
 			bottom: 0;
 			border-radius: 100%;
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
+			@media not ( prefers-reduced-motion ) {
+				animation: loadingpulse 1s linear infinite;
+				animation-delay: 0.5s; // avoid animating for fast network responses
+			}
 		}
 	}
 }
@@ -381,16 +383,19 @@ $block-editor-link-control-number-of-actions: 1;
 		// Point downwards when open (same as list view expander)
 		&[aria-expanded="true"] svg {
 			visibility: visible;
-			transition: transform 0.1s ease;
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 			transform: rotate(90deg);
-			@include reduce-motion("transition");
+
 		}
 		// Point rightwards when closed (same as list view expander)
 		&[aria-expanded="false"] svg {
 			visibility: visible;
 			transform: rotate(0deg);
-			transition: transform 0.1s ease;
-			@include reduce-motion("transition");
+			@media not ( prefers-reduced-motion ) {
+				transition: transform 0.1s ease;
+			}
 		}
 	}
 }