Edit Post: Standardize reduced motion handling using media queries

[im3dabasia]

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?

It addresses instances where animations and transitions were not optimized for Data Views for individuals with reduced motion settings, ensuring a smoother and more inclusive user experience.

How?

This PR updates the outdated reduce-motion mixin implementation and resolves previously missed instances by adopting the new approach defined in the parent issue.

@media not (prefers-reduced-motion) {
	transition: padding ease-out 0.1s;
}

Screencast

Screen.Recording.2025-01-14.at.10.07.36.AM.mov

Testing instructions:

• Install and activate a plugin with meta boxes like Yoast SEO

Screen.Recording.2025-01-14.at.10.17.35.AM.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]

Hi @t-hamano,

I have this PR ready for review. Please take a look at your convenience and share your feedback.

Thank you!

[t-hamano]

LGTM 👍

e0e4626085202737b6058c07351dbe5d.mp4