From 2438aca5fce96f0363d3606069ab7bd0f5be51fc Mon Sep 17 00:00:00 2001
From: Mike Schroder <mikeschroder@git.wordpress.org>
Date: Fri, 27 Aug 2021 09:35:17 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@51677 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/wp/customize/controls.js | 19 +++++++++----
 src/wp-admin/css/customize-controls.css   | 33 +++++++++++++++++++++++
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js
index c8ee3de8df..0496435e42 100644
--- a/src/js/_enqueues/wp/customize/controls.js
+++ b/src/js/_enqueues/wp/customize/controls.js
@@ -6,6 +6,12 @@
 (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 */{
 
 		/**
@@ -1264,11 +1270,14 @@
 		 * @return {void}
 		 */
 		_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;
 			}
 
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 7685073d9a..7e50a59bb5 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -105,6 +105,12 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	height: 100%;
 }
 
+@media (prefers-reduced-motion: reduce) {
+	#customize-sidebar-outer-content {
+		transition: none;
+	}
+}
+
 #customize-theme-controls .control-section-outer {
 	display: none !important;
 }
@@ -123,6 +129,12 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	transition: left .18s;
 }
 
+@media (prefers-reduced-motion: reduce) {
+	.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
+		transition: none;
+	}
+}
+
 .customize-outer-pane-parent {
 	margin: 0;
 }
@@ -537,6 +549,13 @@ body.trashing #publish-settings {
 		.15s border-color ease-in-out;
 }
 
+@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;
 	background-color: #fff;
@@ -635,6 +654,14 @@ body.trashing #publish-settings {
 	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;
+	}
+}
+
 #customize-theme-controls .customize-pane-child.skip-transition {
 	transition: none;
 }
@@ -1723,6 +1750,12 @@ p.customize-section-description {
 	z-index: 20;
 }
 
+@media (prefers-reduced-motion: reduce) {
+	.control-panel-themes .customize-themes-full-container {
+		transition: none;
+	}
+}
+
 @media screen and (min-width: 1670px) {
 	.control-panel-themes .customize-themes-full-container {
 		width: 82%;