Ideally, the reduce-motion scss mixin should be able to reset any CSS transition / animation. However, this is not the case. Thdre are a few occurrences in the codebase where specific, ad-hoc, media query prefers-reduced-motion are in place because the mixin doesn't cover all the cases to properly reset a transition or animation.
Ideally, these specific ad-hoc media query should be avoided because they are redundant code, hard to maintain, and pronoe to bugs. A unique, centralized, mixin that works for all cases is certainly better.
The specific case in https://github.com/WordPress/gutenberg/pull/55547 didn't allow to use the reduce-motion mixin because the animation for the 'saving' buttons state uses the CSS property animation-iteration-count with a value of infinite. This property is not reset by the reduce-motion mixin.
Notice the mixin sets animation-duration to 1ms instead of 0. This is because of this reason, which dates to more than 3 years ago. I'm not sure whther that concern is still valid. Regardles, the effect of:
animation-duration: 1ms;
on the saving buttons animation would just make the animation very fast because animation-iteration-count is still infinite.
At the very least, the mixing:
Should set animation-iteration-count to 0 (or maybe 1).
We should check whether animation-duration: 1ms; is still needed. Ideally, this should be set to 0.
Any other property used in other animations should be evaluated to check whether it can be reset by the mixin,
Any 'ad-hoc' usage of prefers-reduced-motion in the codebase should be replaced by the mixin.
An new animation should be crafted since the beginning taking into consideration that it needs to be compatible with the reduce-motion mixin.
Step-by-step reproduction instructions
Testing would require altering the code and building, so this is not for everyone.
Description
Splitting this out from https://github.com/WordPress/gutenberg/pull/55547
Ideally, the
reduce-motion
scss mixin should be able to reset any CSS transition / animation. However, this is not the case. Thdre are a few occurrences in the codebase where specific, ad-hoc, media queryprefers-reduced-motion
are in place because the mixin doesn't cover all the cases to properly reset a transition or animation.Ideally, these specific ad-hoc media query should be avoided because they are redundant code, hard to maintain, and pronoe to bugs. A unique, centralized, mixin that works for all cases is certainly better.
The specific case in https://github.com/WordPress/gutenberg/pull/55547 didn't allow to use the
reduce-motion
mixin because the animation for the 'saving' buttons state uses the CSS propertyanimation-iteration-count
with a value ofinfinite
. This property is not reset by thereduce-motion
mixin.https://github.com/WordPress/gutenberg/blob/1ee154f51d6b0a743fc7c99ba5959371237bbb0e/packages/base-styles/_mixins.scss#L185-L205
Notice the mixin sets
animation-duration
to1ms
instead of0
. This is because of this reason, which dates to more than 3 years ago. I'm not sure whther that concern is still valid. Regardles, the effect of:animation-duration: 1ms;
on the saving buttons animation would just make the animation very fast becauseanimation-iteration-count
is stillinfinite
.At the very least, the mixing:
animation-iteration-count
to0
(or maybe 1).animation-duration: 1ms;
is still needed. Ideally, this should be set to0
.prefers-reduced-motion
in the codebase should be replaced by the mixin.reduce-motion
mixin.Step-by-step reproduction instructions
@include reduce-motion("animation");
after this line: https://github.com/WordPress/gutenberg/blob/1ee154f51d6b0a743fc7c99ba5959371237bbb0e/packages/components/src/button/style.scss#L244@include reduce-motion("animation");
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes