WordPress.org

Make WordPress Core

Changeset 51677


Ignore:
Timestamp:
08/27/2021 09:35:17 AM (3 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/wp/customize/controls.js

    r51417 r51677  
    66(function( exports, $ ){
    77    var Container, focus, normalizedTransitionendEventName, api = wp.customize;
     8
     9    var reducedMotionMediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );
     10    var isReducedMotion = reducedMotionMediaQuery.matches;
     11    reducedMotionMediaQuery.addEventListener( 'change' , function handleReducedMotionChange( event ) {
     12        isReducedMotion = event.matches;
     13    });
    814
    915    api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{
     
    12651271         */
    12661272        _animateChangeExpanded: function( completeCallback ) {
    1267             // Return if CSS transitions are not supported.
    1268             if ( ! normalizedTransitionendEventName ) {
    1269                 if ( completeCallback ) {
    1270                     completeCallback();
    1271                 }
     1273            // Return if CSS transitions are not supported or if reduced motion is enabled.
     1274            if ( ! normalizedTransitionendEventName || isReducedMotion ) {
     1275                // Schedule the callback until the next tick to prevent focus loss.
     1276                _.defer( function () {
     1277                    if ( completeCallback ) {
     1278                        completeCallback();
     1279                    }
     1280                } );
    12721281                return;
    12731282            }
  • trunk/src/wp-admin/css/customize-controls.css

    r51456 r51677  
    106106}
    107107
     108@media (prefers-reduced-motion: reduce) {
     109    #customize-sidebar-outer-content {
     110        transition: none;
     111    }
     112}
     113
    108114#customize-theme-controls .control-section-outer {
    109115    display: none !important;
     
    122128    left: 100%;
    123129    transition: left .18s;
     130}
     131
     132@media (prefers-reduced-motion: reduce) {
     133    .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
     134        transition: none;
     135    }
    124136}
    125137
     
    538550}
    539551
     552@media (prefers-reduced-motion: reduce) {
     553    #customize-theme-controls .accordion-section-title,
     554    #customize-outer-theme-controls .accordion-section-title {
     555        transition: none;
     556    }
     557}
     558
    540559#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
    541560    color: #50575e;
     
    634653    box-sizing: border-box;
    635654    transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
     655}
     656
     657@media (prefers-reduced-motion: reduce) {
     658    #customize-info,
     659    #customize-theme-controls .customize-pane-parent,
     660    #customize-theme-controls .customize-pane-child {
     661        transition: none;
     662    }
    636663}
    637664
     
    17221749    background: #f0f0f1;
    17231750    z-index: 20;
     1751}
     1752
     1753@media (prefers-reduced-motion: reduce) {
     1754    .control-panel-themes .customize-themes-full-container {
     1755        transition: none;
     1756    }
    17241757}
    17251758
Note: See TracChangeset for help on using the changeset viewer.