Image block: fix resize listener

packages/block-library/src/image/image-size.js

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { withGlobalEvents } from '@wordpress/compose';
+import { useGlobalEvent } from '@wordpress/compose';
 import { useRef, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { calculatePreferedImageSize } from './utils';
 
-function ImageSize( { src, dirtynessTrigger, children } ) {
+export default function ImageSize( { src, dirtynessTrigger, children } ) {
 	const ref = useRef();
+	const image = useRef();
 	const [ state, setState ] = useState( {
 		imageWidth: null,
 		imageHeight: null,
@@ -20,35 +21,37 @@ function ImageSize( { src, dirtynessTrigger, children } ) {
 		imageHeightWithinContainer: null,
 	} );
 
+	function calculateSize() {
+		const { width, height } = calculatePreferedImageSize(
+			image.current,
+			ref.current
+		);
+
+		setState( {
+			imageWidth: image.current.width,
+			imageHeight: image.current.height,
+			containerWidth: ref.current.clientWidth,
+			containerHeight: ref.current.clientHeight,
+			imageWidthWithinContainer: width,
+			imageHeightWithinContainer: height,
+		} );
+	}
+
 	useEffect( () => {
-		const image = new window.Image();
-
-		image.onload = () => {
-			const { width, height } = calculatePreferedImageSize(
-				image,
-				ref.current
-			);
-
-			setState( {
-				imageWidth: image.width,
-				imageHeight: image.height,
-				containerWidth: ref.current.clientWidth,
-				containerHeight: ref.current.clientHeight,
-				imageWidthWithinContainer: width,
-				imageHeightWithinContainer: height,
-			} );
-		};
+		if ( ! image.current ) {
+			const { defaultView } = ref.current.ownerDocument;
+			image.current = new defaultView.Image();
+		}
 
-		image.src = src;
+		image.current.onload = calculateSize;
+		image.current.src = src;
 
 		return () => {
-			image.onload = undefined;
+			image.current.onload = undefined;
 		};
 	}, [ src, dirtynessTrigger ] );
 
+	useGlobalEvent( ref, 'resize', calculateSize, [] );
+
 	return <div ref={ ref }>{ children( state ) }</div>;
 }
-
-export default withGlobalEvents( {
-	resize: 'calculateSize',
-} )( ImageSize );

packages/compose/README.md

@@ -119,6 +119,10 @@ _Returns_
 
 -   `WPComponent`: Component class with generated display name assigned.
 
+<a name="useGlobalEvent" href="#useGlobalEvent">#</a> **useGlobalEvent**
+
+Undocumented declaration.
+
 <a name="useInstanceId" href="#useInstanceId">#</a> **useInstanceId**
 
 Provides a unique instance ID.

packages/compose/src/hooks/use-global-event/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+export default function useGlobalEvent( ref, ...args ) {
+	const dependencies = args.pop();
+
+	useEffect( () => {
+		const { defaultView } = ref.current.ownerDocument;
+
+		defaultView.addEventListener( ...args );
+
+		return () => {
+			defaultView.removeEventListener( ...args );
+		};
+	}, dependencies );
+}

packages/compose/src/index.js

@@ -14,6 +14,7 @@ export { default as withState } from './higher-order/with-state';
 
 // Hooks
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
+export { default as useGlobalEvent } from './hooks/use-global-event';
 export { default as useInstanceId } from './hooks/use-instance-id';
 export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';