Drop zone: avoid media query on mount (#60546)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Apr 23, 2024 · 73f91a2 · 73f91a2
1 parent c2c5bef
commit 73f91a2
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 66 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,7 +12,9 @@
 
 ### Enhancements
 
+-   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
 -   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
+### Internal
 
 ## 27.4.0 (2024-04-19)
 

diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -25,6 +25,71 @@ import {
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
+const backdrop = {
+	hidden: { opacity: 0 },
+	show: {
+		opacity: 1,
+		transition: {
+			type: 'tween',
+			duration: 0.2,
+			delay: 0,
+			delayChildren: 0.1,
+		},
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			duration: 0.2,
+			delayChildren: 0,
+		},
+	},
+};
+
+const foreground = {
+	hidden: { opacity: 0, scale: 0.9 },
+	show: {
+		opacity: 1,
+		scale: 1,
+		transition: {
+			duration: 0.1,
+		},
+	},
+	exit: { opacity: 0, scale: 0.9 },
+};
+
+function DropIndicator( { label }: { label?: string } ) {
+	const disableMotion = useReducedMotion();
+	const children = (
+		<motion.div
+			variants={ backdrop }
+			initial={ disableMotion ? 'show' : 'hidden' }
+			animate="show"
+			exit={ disableMotion ? 'show' : 'exit' }
+			className="components-drop-zone__content"
+			// Without this, when this div is shown,
+			// Safari calls a onDropZoneLeave causing a loop because of this bug
+			// https://bugs.webkit.org/show_bug.cgi?id=66547
+			style={ { pointerEvents: 'none' } }
+		>
+			<motion.div variants={ foreground }>
+				<Icon
+					icon={ upload }
+					className="components-drop-zone__content-icon"
+				/>
+				<span className="components-drop-zone__content-text">
+					{ label ? label : __( 'Drop files to upload' ) }
+				</span>
+			</motion.div>
+		</motion.div>
+	);
+
+	if ( disableMotion ) {
+		return children;
+	}
+
+	return <AnimatePresence>{ children }</AnimatePresence>;
+}
+
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -116,67 +181,6 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const disableMotion = useReducedMotion();
-
-	let children;
-	const backdrop = {
-		hidden: { opacity: 0 },
-		show: {
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0,
-				delayChildren: 0.1,
-			},
-		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: 0.2,
-				delayChildren: 0,
-			},
-		},
-	};
-
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.9 },
-		show: {
-			opacity: 1,
-			scale: 1,
-			transition: {
-				duration: 0.1,
-			},
-		},
-		exit: { opacity: 0, scale: 0.9 },
-	};
-
-	if ( isDraggingOverElement ) {
-		children = (
-			<motion.div
-				variants={ backdrop }
-				initial={ disableMotion ? 'show' : 'hidden' }
-				animate="show"
-				exit={ disableMotion ? 'show' : 'exit' }
-				className="components-drop-zone__content"
-				// Without this, when this div is shown,
-				// Safari calls a onDropZoneLeave causing a loop because of this bug
-				// https://bugs.webkit.org/show_bug.cgi?id=66547
-				style={ { pointerEvents: 'none' } }
-			>
-				<motion.div variants={ foreground }>
-					<Icon
-						icon={ upload }
-						className="components-drop-zone__content-icon"
-					/>
-					<span className="components-drop-zone__content-text">
-						{ label ? label : __( 'Drop files to upload' ) }
-					</span>
-				</motion.div>
-			</motion.div>
-		);
-	}
-
 	const classes = classnames( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
@@ -190,11 +194,7 @@ export function DropZoneComponent( {
 
 	return (
 		<div { ...restProps } ref={ ref } className={ classes }>
-			{ disableMotion ? (
-				children
-			) : (
-				<AnimatePresence>{ children }</AnimatePresence>
-			) }
+			{ isDraggingOverElement && <DropIndicator label={ label } /> }
 		</div>
 	);
 }