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.
Built from https://develop.svn.wordpress.org/trunk@51677


git-svn-id: http://core.svn.wordpress.org/trunk@51283 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -106,6 +106,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;
 }
@@ -124,6 +130,12 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	transition: right .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;
 }
@@ -538,6 +550,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;
@@ -636,6 +655,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;
 }
@@ -1724,6 +1751,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%;

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

wp-admin/js/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;
 			}
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.9-alpha-51676';
+$wp_version = '5.9-alpha-51677';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.