Support reduced animations

WordPress · Jul 26, 2024 · 3fd252b · 3fd252b
1 parent eb9a34c
commit 3fd252b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -52,41 +52,6 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const toggleVariants = {
-	edit: {
-		width: 60,
-		height: 60,
-		top: 0,
-		left: 0,
-		borderRadius: '0px',
-		boxShadow: 'none',
-		transition: {
-			delay: 0.1,
-			duration: 0.2,
-			type: 'tween',
-			stiffness: 400,
-		},
-	},
-};
-
-const siteIconVariants = {
-	edit: {
-		clipPath: 'inset(0% round 0)',
-	},
-	hover: {
-		clipPath: 'inset( 22% round 2px )',
-		transition: {
-			duration: 0.2,
-		},
-	},
-	tap: {
-		clipPath: 'inset(0% round 0)',
-		transition: {
-			delay: 0.1,
-		},
-	},
-};
-
 const toggleHomeIconVariants = {
 	edit: {
 		opacity: 0,
@@ -100,6 +65,7 @@ const toggleHomeIconVariants = {
 };
 
 export default function EditSiteEditor( { isPostsList = false } ) {
+	const disableMotion = useReducedMotion();
 	const { params } = useLocation();
 	const isLoading = useIsSiteEditorLoading();
 	const {
@@ -228,6 +194,44 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 
 	const isReady = ! isLoading;
 
+	const toggleVariants = {
+		edit: {
+			width: 60,
+			height: 60,
+			top: 0,
+			left: 0,
+			borderRadius: '0px',
+			boxShadow: 'none',
+			transition: {
+				delay: 0.1,
+				duration: disableMotion ? 0 : 0.2,
+				type: 'tween',
+				stiffness: 400,
+			},
+		},
+	};
+
+	const siteIconVariants = {
+		edit: {
+			clipPath: 'inset(0% round 0)',
+			transition: {
+				duration: disableMotion ? 0 : 0.2,
+			},
+		},
+		hover: {
+			clipPath: 'inset( 22% round 2px )',
+			transition: {
+				duration: disableMotion ? 0 : 0.2,
+			},
+		},
+		tap: {
+			clipPath: 'inset(0% round 0)',
+			transition: {
+				delay: disableMotion ? 0 : 0.1,
+			},
+		},
+	};
+
 	return (
 		<>
 			<GlobalStylesRenderer />

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -148,6 +148,14 @@
 html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	animation-delay: 255ms;
 }
+
+@media (prefers-reduced-motion) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
 /* stylelint-enable  */
 
 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {