Changeset 51677

Timestamp:

08/27/2021 09:35:17 AM (3 years ago)

Author:

mikeschroder

Message:

Customizer: Respect prefers-reduced-motion media query in Customizer animations.

Disables Customizer animations when media query prefers-reduced-motion: reduce returns true.

Continues the effort to reduce motion within the WordPress admin panel when users have enabled this feature in their operating system or browser.

It has the additional effect of making the Block Editor's end-to-end tests run faster, as explored initially with a different approach in #53562.

See ​https://github.com/WordPress/gutenberg/issues/32024 for the related Gutenberg issue.

See ​https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion for ways to enable this feature on various platforms.

Props kevin940726, isabel_brison, zieladam, youknowriad, desrosj, mamaduka, mikeschroder.
Previously [51389], [50028], [47813].
Fixes #53542.

Location:

trunk/src

Files:

• js/_enqueues/wp/customize/controls.js (modified) (2 diffs)
• wp-admin/css/customize-controls.css (modified) (5 diffs)

trunk/src/js/_enqueues/wp/customize/controls.js

@@ -6 +6 @@
 (function( exports, $ ){
     var Container, focus, normalizedTransitionendEventName, api = wp.customize;
+
+    var reducedMotionMediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );
+    var isReducedMotion = reducedMotionMediaQuery.matches;
+    reducedMotionMediaQuery.addEventListener( 'change' , function handleReducedMotionChange( event ) {
+        isReducedMotion = event.matches;
+    });
 
     api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{
@@ -1265 +1271 @@
          */
         _animateChangeExpanded: function( completeCallback ) {
-            // Return if CSS transitions are not supported.
-            if ( ! normalizedTransitionendEventName ) {
-                if ( completeCallback ) {
-                    completeCallback();
-                }
+            // Return if CSS transitions are not supported or if reduced motion is enabled.
+            if ( ! normalizedTransitionendEventName || isReducedMotion ) {
+                // Schedule the callback until the next tick to prevent focus loss.
+                _.defer( function () {
+                    if ( completeCallback ) {
+                        completeCallback();
+                    }
+                } );
                 return;
             }

trunk/src/wp-admin/css/customize-controls.css

@@ -106 +106 @@
 }
 
+@media (prefers-reduced-motion: reduce) {
+    #customize-sidebar-outer-content {
+        transition: none;
+    }
+}
+
 #customize-theme-controls .control-section-outer {
     display: none !important;
@@ -122 +128 @@
     left: 100%;
     transition: left .18s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
+        transition: none;
+    }
 }
 
@@ -538 +550 @@
 }
 
+@media (prefers-reduced-motion: reduce) {
+    #customize-theme-controls .accordion-section-title,
+    #customize-outer-theme-controls .accordion-section-title {
+        transition: none;
+    }
+}
+
 #customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
     color: #50575e;
@@ -634 +653 @@
     box-sizing: border-box;
     transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #customize-info,
+    #customize-theme-controls .customize-pane-parent,
+    #customize-theme-controls .customize-pane-child {
+        transition: none;
+    }
 }
 
@@ -1722 +1749 @@
     background: #f0f0f1;
     z-index: 20;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .control-panel-themes .customize-themes-full-container {
+        transition: none;
+    }
 }