Simplify media placeholder to obviate layout effect hook

WordPress · Jul 12, 2022 · 7aedf1f · 7aedf1f
1 parent 832ea2c
commit 7aedf1f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 26 deletions.
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
@@ -61,7 +61,7 @@ export default function FocalPointPicker( {
 
 	const dragAreaRef = useRef();
 	const [ bounds, setBounds ] = useState( INITIAL_BOUNDS );
-	const { current: updateBounds } = useRef( () => {
+	const refUpdateBounds = useRef( () => {
 		const { clientWidth: width, clientHeight: height } =
 			dragAreaRef.current;
 		// Falls back to initial bounds if the ref has no size. Since styles
@@ -73,13 +73,19 @@ export default function FocalPointPicker( {
 	} );
 
 	useEffect( () => {
+		const updateBounds = refUpdateBounds.current;
 		const { defaultView } = dragAreaRef.current.ownerDocument;
 		defaultView.addEventListener( 'resize', updateBounds );
-		return () => {
-			defaultView.removeEventListener( 'resize', updateBounds );
-		};
+		return () => defaultView.removeEventListener( 'resize', updateBounds );
 	}, [] );
 
+	useEffect( () => {
+		// Updates bounds if there’s no media (and thus no load event to trigger
+		// a bounds update). Even then, this will only have an effect if the
+		// component is styled to non-default dimensions.
+		if ( ! url ) refUpdateBounds.current();
+	}, [ url ] );
+
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
 			dragAreaRef.current.focus();
@@ -170,7 +176,7 @@ export default function FocalPointPicker( {
 					<Media
 						alt={ __( 'Media preview' ) }
 						autoPlay={ autoPlay }
-						onLoad={ updateBounds }
+						onLoad={ refUpdateBounds.current }
 						src={ url }
 					/>
 					<FocalPoint

diff --git a/packages/components/src/focal-point-picker/media.js b/packages/components/src/focal-point-picker/media.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useLayoutEffect } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -22,10 +17,10 @@ export default function Media( {
 } ) {
 	if ( ! src ) {
 		return (
-			<MediaPlaceholderElement
+			<MediaPlaceholder
 				className="components-focal-point-picker__media components-focal-point-picker__media--placeholder"
-				onLoad={ onLoad }
-				mediaRef={ mediaRef }
+				ref={ mediaRef }
+				{ ...props }
 			/>
 		);
 	}
@@ -54,16 +49,3 @@ export default function Media( {
 		/>
 	);
 }
-
-function MediaPlaceholderElement( { mediaRef, onLoad, ...props } ) {
-	/**
-	 * This async callback mimics the onLoad (img) / onLoadedData (video) callback
-	 * for media elements. It is used in the main <FocalPointPicker /> component
-	 * to calculate the dimensions + boundaries for positioning.
-	 */
-	useLayoutEffect( () => {
-		window.requestAnimationFrame( () => onLoad() );
-	}, [] );
-
-	return <MediaPlaceholder ref={ mediaRef } { ...props } />;
-}