Edit Widgets and Base Styles: Standardize reduced motion handling using media queries

[Infinite-Null]

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 Edit Widgets and Base Styles for individuals with reduced motion settings, ensuring a smoother and more inclusive user experience.

How?

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.

@media not (prefers-reduced-motion) {
       transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}

Screencast:

2025-01-03_12-14-43.mp4

[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: Infinite-Null <[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.

[Infinite-Null]

Hi @t-hamano,

I have implemented reduced motion handling using media queries for the Edit Widgets and Base Styles. Please look at it at your convenience.

Thank you!

[t-hamano]

LGTM!

• ✅ All the changes you made work just as they did before.
• ✅ I also confirmed that I can build Storybook (see this comment for why I tested this).

[t-hamano]

@tyxla I think this PR should not break Storybook. In fact, the Storybook build for this PR on CI passed. However, we did run into an issue with the edit-site package (See this comment).

The issue with the edit-site package has been resolved in #68464. Also, a solution to this issue is explored in this comment.