vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Mike Schroder 2021-08-27 09:35:17 +00:00
parent 524c2a6fd3
commit 2438aca5fc
2 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/js/_enqueues/wp/customize/controls.js vendored
View File

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

33
src/wp-admin/css/customize-controls.css
View File

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