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