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

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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;
 }
 }
 }