Nux: 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;
}

Screenshots or screencast

[im3dabasia]

Closing this as the component is deprecated

[t-hamano]

@im3dabasia While this component is indeed deprecated, it would be good to have more consistency in styling across the Gutenberg project. Feel free to reopen this PR.

[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 <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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 explored the NUX package and specifically tried locating where the DotTip component is used in the editor, but I couldn’t find its implementation.

Could you kindly guide me on where it is used so I can record a screencast?

Thank you

DotTip Search image

[t-hamano]

I explored the NUX package and specifically tried locating where the DotTip component is used in the editor, but I couldn’t find its implementation.

That's right. To actually see the DotTip component, we'll need to add your own code.

For example, update the Edit component of any block to the following:

import { useBlockProps } from '@wordpress/block-editor';
import { DotTip } from '@wordpress/nux';

export default function CodeEdit() {
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<DotTip tipId="test-1">
				Click here to add the product to your shopping cart.
			</DotTip>
		</div>
	);
}

Then in your browser console run the following (If you hide the DotTip):

wp.data.dispatch( 'core/nux' ).enableTips()

Then you should see the following UI:

[t-hamano]

LGTM 👍