Block Library: Standardize reduced motion handling with media queries #68315
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Hey @t-hamano! Updated the animation handling to follow user preferences. Let me know if this is what you had in mind. Thanks! |
t-hamano
added
[Type] Enhancement
There was a problem hiding this comment.
Thanks for the PR! Two pieces of feedback from me:
- It would be better to use
@media not ( prefers-reduced-motion )instead of@media (prefers-reduced-motion: no-preference). See this comment. Furthermore, it would be good if you could update existing@media (prefers-reduced-motion: no-preference). - Does this PR only target the Image block? Or does it target the
@wordpress/block-library? If it is the latter, it would be good to check other blocks as well.
|
Hey @t-hamano, Thanks for the feedback. Earlier I used This PR only targets the Image block but I can target the |
|
After looking into the issue, it looks like we need to update We may want to come back to this PR after progressing through #68380. |
|
Now that I've merged #68380, could you rebase this PR? We should now be able to use Additionally, it may be a good idea to unify the following two formats:
Either is fine, but it's a good idea to make it clear in the PR title and description so that others can easily understand when they visit this PR later. |
himanshupathak95
requested review from
geriux,
ajitbohra and
fabiankaegy
as code owners
himanshupathak95
changed the title
There was a problem hiding this comment.
Thanks for the PR!
I found two places where animations are not disabled even when "Reduced Motion" is enabled. Can you deal with these as well?
Image Lightbox: Hover animation on the toggle button and overlay animation when the lightbox is opened:
image.mp4
Navigation: Hover animation on a menu with child menus:
navigation.mp4
| @media not (prefers-reduced-motion) { | ||
| transition: box-shadow 0.2s ease-out; | ||
| } |
There was a problem hiding this comment.
The element to which this style is applied (.block-library-gallery-item__inline-menu) no longer exists, so it can be removed in a follow-up.
| transition: transform 0.1s ease; | ||
| @media not (prefers-reduced-motion) { | ||
| transition: transform 0.1s ease; | ||
| } |
There was a problem hiding this comment.
It looks like a transition itself isn't needed here, because there is no animation applied to the a element.
Part of: #68282
What?
Refactors animation and transition styles to use
@media not (prefers-reduced-motion)ensuring better accessibility for users who prefer reduced motion.Why?
Currently, many places in the codebase do not account for user's motion preferences. This might not be correct for user's having reduced motion preferences. This PR fixes that.
Testing Instructions
Open the Block Editor
Add an Image block and upload an image
Enable the lightbox feature in block settings
Test normal behavior:
Test with reduced motion preference:
Disable reduced motion and verify all original animations work correctly
Screencast
Image Block -
Screen.Recording.2024-12-26.at.15.53.49.mov
Navigation Block -
Screen.Recording.2024-12-31.at.08.52.32.mov
Social Links -
Screen.Recording.2024-12-31.at.08.58.58.mov