Block Directory: Standardize reduced motion handling using media queries #68419

[im3dabasia]

WIP

Part of: #68282

What?

Refactors animation and transition styles to use @media not (prefers-reduced-motion) for improved accessibility, ensuring a better experience for users who prefer reduced motion.

Why?

Currently, many parts of the codebase do not consider users' motion preferences, which may not be ideal for those with reduced motion settings. This PR addresses and fixes that issue.

How?

This PR updates the old reduce-motion mixin implementation and addresses missing cases to adopt the new approach outlined in the parent issue.

@media not ( prefers-reduced-motion ) {
      transition: box-shadow 0.1s linear;
}

Screenshots or screencast

Screen.Recording.2024-12-31.at.2.43.17.PM.mov

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[im3dabasia]

Hey @t-hamano , Could you please review my PR when you have a moment.

[t-hamano]

LGTM!

Could you rebase this PR to make sure it passes Storybook CI?

[im3dabasia]

Could you rebase this PR to make sure it passes Storybook CI?

Thank you @t-hamano , I have rebased the PR and all the tests have passed. Good to merge into trunk