Popover / ToggleGroupControl: Use useReducedMotion() from @wordpress/compose

[tyxla]

What?

Use our internal useReducedMotion() utility instead of the framer-motion one.

Why?

Our version is more broadly utilized, and it does the same thing, so there's no good reason to use two different versions

How?

We're using the version from @wordpress/compose which is already a dependency.

Testing Instructions

• Use your browser dev tools to emulate prefers-reduced-motion.
• Verify Popover appear/disappear animation still works well and is properly disabled when prefers-reduced-motion is enabled/disabled.
  • You can test it by clicking the ellipsis in the block toolbar to reveal the block settings menu.
  • You can also test it in Storybook.
• Verify ToggleGroupControl selected toggle backdrop animation still works well and is properly disabled when prefers-reduced-motion is enabled/disabled.
  • You can test it with the "Size" field in the block sidebar for a Paragraph block.
  • You can also test it in Storybook.
• All tests should pass and all checks should be green.

Testing Instructions for Keyboard

None

Screenshots or screencast

None

[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: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

[mirka]

Looks good and works as expected 👍 I also checked the source code for the one in Framer, and there was nothing unexpected in there.

[jsnajdr]

Nice. The framer-motion's useReducedMotion uses the same media query (prefers-reduced-motion) but it's interesting that they don't bother to listen to the dynamic updates. They just assume that the value is constant for the entire lifetime of the page and read it just once.

One thing that could be inspiring for us is that they use a shared global instance of the media query. Our useReducedMotion leads to creating 10+ identical media queries, one for each use of the hook. Similarly, useViewportMatch also leads to multiple identical max-width/min-width queries.

I'm not sure if it has any real performance impact, it probably doesn't. MediaQueryList should be a cheap object.