[wp-trac] [WordPress Trac] #54174: Twenty Twenty-One: @media (prefers-reduced-motion) in sass/07-utilities/a11y.scss breaks some plugins

[WordPress Trac]

#54174: Twenty Twenty-One: @media (prefers-reduced-motion) in
sass/07-utilities/a11y.scss breaks some plugins
--------------------------------------+------------------------------------
 Reporter:  gregoiresailland          |       Owner:  (none)
     Type:  defect (bug)              |      Status:  new
 Priority:  normal                    |   Milestone:  Awaiting Review
Component:  Bundled Theme             |     Version:  5.6
 Severity:  critical                  |  Resolution:
 Keywords:  dev-feedback needs-patch  |     Focuses:  ui, accessibility,
                                      |  css
--------------------------------------+------------------------------------
Changes (by sabernhardt):

 * version:  trunk => 5.6
 * component:  Themes => Bundled Theme


Old description:

> As a fix it could be good to register it as a separate script than in the
> main style.css
> Like that it could be deregistered via wp_deregister_script or
> wp_dequeue_script function
> I have for exemple a plugin (Gallery Lightbox Lite) that is not working
> with gutenberg gallery and Twenty Twenty-One when the os or browser has
> the flag prefers-reduced-motion:reduced active.
>
> Or do you have a solution in order to remove the
> @media (prefers-reduced-motion) {
>         * {
>                 transition-delay: 0s !important;
>                 transition-duration: 0s !important;
>         }
> }
> Some animations are vital to some blocks or plugins and it could be good
> to can disable this limitation in some child theme without having to
> recompile and replace all Twenty Twenty-One scss
>
> Thank you for your support :)

New description:

 As a fix it could be good to register it as a separate script than in the
 main style.css
 Like that it could be deregistered via wp_deregister_script or
 wp_dequeue_script function
 I have for example a plugin (Gallery Lightbox Lite) that is not working
 with gutenberg gallery and Twenty Twenty-One when the OS or browser has
 the flag `prefers-reduced-motion:reduced` active.

 Or do you have a solution in order to remove the
 {{{
 @media (prefers-reduced-motion) {
         * {
                 transition-delay: 0s !important;
                 transition-duration: 0s !important;
         }
 }
 }}}

 Some animations are vital to some blocks or plugins and it could be good
 to can disable this limitation in some child theme without having to
 recompile and replace all Twenty Twenty-One scss

 Thank you for your support :)

--

Comment:

 Welcome and thanks for the report!

 There are only 4 unique `transition` properties in the theme's compiled
 stylesheets. Instead of removing all transitions, these specific styles
 could be wrapped in
 `@media (prefers-reduced-motion: no-preference) { }`

 [https://web.dev/prefers-reduced-motion/#working-with-the-media-query
 Google developers article]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54174#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform