From c60d6756071075bdad53cf4fba16b4d7d55a5d55 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 27 Jan 2020 20:44:20 +0100
Subject: [PATCH 01/11] Create withContainerMatches HOC

---
 .../with-container-matches/compare-width.js   | 21 +++++++++
 .../with-container-matches/index.native.js    | 47 +++++++++++++++++++
 packages/components/src/index.native.js       |  1 +
 3 files changed, 69 insertions(+)
 create mode 100644 packages/components/src/higher-order/with-container-matches/compare-width.js
 create mode 100644 packages/components/src/higher-order/with-container-matches/index.native.js

diff --git a/packages/components/src/higher-order/with-container-matches/compare-width.js b/packages/components/src/higher-order/with-container-matches/compare-width.js
new file mode 100644
index 0000000000000..cafc123d76a3f
--- /dev/null
+++ b/packages/components/src/higher-order/with-container-matches/compare-width.js
@@ -0,0 +1,21 @@
+export default function compareWidths( operator, queryWidth, containerWidth ) {
+	switch ( operator ) {
+		case '<':
+			return containerWidth < queryWidth;
+		case '<=':
+			return containerWidth <= queryWidth;
+		case '===' :
+		case '==' :
+		case '=' :
+			return containerWidth === queryWidth;
+		case '!==' :
+		case '!=' :
+			return containerWidth !== queryWidth;
+		case '>' :
+			return containerWidth > queryWidth;
+		case '>=':
+			return containerWidth >= queryWidth;
+		default:
+			throw new Error( `Unsupported operator: ${ operator }` );
+	}
+}
diff --git a/packages/components/src/higher-order/with-container-matches/index.native.js b/packages/components/src/higher-order/with-container-matches/index.native.js
new file mode 100644
index 0000000000000..1e8f0d8eafe47
--- /dev/null
+++ b/packages/components/src/higher-order/with-container-matches/index.native.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import compareWidths from './compare-widths';
+
+const withContainerMatch = ( queries ) => createHigherOrderComponent(
+	( WrappedComponent ) => ( props ) => {
+		const [ currentContainerWidth, setContainerWidth ] = useState( null );
+		const [ containerMatches, setContainerMatches ] = useState( null );
+
+		const matchWidth = ( containerWidth ) => mapValues( queries, ( query ) => {
+			const [ queryWidth, operator = '>=' ] = query.split( ' ' ).reverse();
+			return compareWidths( operator, queryWidth, containerWidth );
+		} );
+
+		const onLayout = ( { nativeEvent } ) => {
+			const { width } = nativeEvent.layout;
+
+			if ( width !== currentContainerWidth ) {
+				setContainerWidth( width );
+				matchWidth( width );
+				setContainerMatches( matchWidth( width ) );
+			}
+		};
+
+		return (
+			<WrappedComponent
+				{ ...props }
+				onLayout={ onLayout }
+				{ ...containerMatches }
+			/>
+		);
+	},
+	'withContainerMatch'
+);
+
+export default withContainerMatch;
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index a8cfaff721aa2..3997b5120454a 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -29,6 +29,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { default as withContainerMatch } from './higher-order/with-container-match';
 
 // Mobile Components
 export { default as BottomSheet } from './mobile/bottom-sheet';

From 50bbadc5c9a310c0898dfa8eb92e5c2baaef4d57 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 29 Jan 2020 16:03:41 +0100
Subject: [PATCH 02/11] Replace HOC in favor of hook

---
 .../with-container-matches/index.native.js    | 47 -------------------
 packages/components/src/index.native.js       |  1 -
 .../use-container-match/compare-widths.js}    |  0
 .../hooks/use-container-match/index.native.js | 38 +++++++++++++++
 packages/compose/src/index.native.js          |  1 +
 5 files changed, 39 insertions(+), 48 deletions(-)
 delete mode 100644 packages/components/src/higher-order/with-container-matches/index.native.js
 rename packages/{components/src/higher-order/with-container-matches/compare-width.js => compose/src/hooks/use-container-match/compare-widths.js} (100%)
 create mode 100644 packages/compose/src/hooks/use-container-match/index.native.js

diff --git a/packages/components/src/higher-order/with-container-matches/index.native.js b/packages/components/src/higher-order/with-container-matches/index.native.js
deleted file mode 100644
index 1e8f0d8eafe47..0000000000000
--- a/packages/components/src/higher-order/with-container-matches/index.native.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import compareWidths from './compare-widths';
-
-const withContainerMatch = ( queries ) => createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const [ currentContainerWidth, setContainerWidth ] = useState( null );
-		const [ containerMatches, setContainerMatches ] = useState( null );
-
-		const matchWidth = ( containerWidth ) => mapValues( queries, ( query ) => {
-			const [ queryWidth, operator = '>=' ] = query.split( ' ' ).reverse();
-			return compareWidths( operator, queryWidth, containerWidth );
-		} );
-
-		const onLayout = ( { nativeEvent } ) => {
-			const { width } = nativeEvent.layout;
-
-			if ( width !== currentContainerWidth ) {
-				setContainerWidth( width );
-				matchWidth( width );
-				setContainerMatches( matchWidth( width ) );
-			}
-		};
-
-		return (
-			<WrappedComponent
-				{ ...props }
-				onLayout={ onLayout }
-				{ ...containerMatches }
-			/>
-		);
-	},
-	'withContainerMatch'
-);
-
-export default withContainerMatch;
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 3997b5120454a..a8cfaff721aa2 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -29,7 +29,6 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
-export { default as withContainerMatch } from './higher-order/with-container-match';
 
 // Mobile Components
 export { default as BottomSheet } from './mobile/bottom-sheet';
diff --git a/packages/components/src/higher-order/with-container-matches/compare-width.js b/packages/compose/src/hooks/use-container-match/compare-widths.js
similarity index 100%
rename from packages/components/src/higher-order/with-container-matches/compare-width.js
rename to packages/compose/src/hooks/use-container-match/compare-widths.js
diff --git a/packages/compose/src/hooks/use-container-match/index.native.js b/packages/compose/src/hooks/use-container-match/index.native.js
new file mode 100644
index 0000000000000..1a1d4bfe18a87
--- /dev/null
+++ b/packages/compose/src/hooks/use-container-match/index.native.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { mapValues } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import compareWidths from './compare-widths';
+
+const useContainerMatch = ( queries ) => {
+	const [ currentContainerWidth, setContainerWidth ] = useState( null );
+	const [ containerMatches, setContainerMatches ] = useState( null );
+
+	const matchWidth = ( containerWidth ) => mapValues( queries, ( query ) => {
+		const [ queryWidth, operator = '>=' ] = query.split( ' ' ).reverse();
+		return compareWidths( operator, queryWidth, containerWidth );
+	} );
+
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		const { width } = nativeEvent.layout;
+
+		if ( width !== currentContainerWidth ) {
+			setContainerWidth( width );
+			matchWidth( width );
+			setContainerMatches( matchWidth( width ) );
+		}
+	}, [] );
+
+	return [ containerMatches, onLayout ];
+};
+
+export default useContainerMatch;
+
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
index f410b60094d00..86c3785039a00 100644
--- a/packages/compose/src/index.native.js
+++ b/packages/compose/src/index.native.js
@@ -7,3 +7,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
+export { default as useContainerMatch } from './hooks/use-container-match';

From 74d92273cd1c782fd57f0fee9dbe56eccbada7f7 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 5 Feb 2020 09:49:05 +0100
Subject: [PATCH 03/11] Add useContainerMatch hook tests

---
 .../test/compare-widths.js                    | 34 +++++++++++
 .../use-container-match/test/index.native.js  | 58 +++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 packages/compose/src/hooks/use-container-match/test/compare-widths.js
 create mode 100644 packages/compose/src/hooks/use-container-match/test/index.native.js

diff --git a/packages/compose/src/hooks/use-container-match/test/compare-widths.js b/packages/compose/src/hooks/use-container-match/test/compare-widths.js
new file mode 100644
index 0000000000000..049dd3dee8f29
--- /dev/null
+++ b/packages/compose/src/hooks/use-container-match/test/compare-widths.js
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import compareWidths from '../compare-widths';
+
+describe( 'compareWidths()', () => {
+	it( 'should return true if container width < query', () => {
+		expect( compareWidths( '<', 300, 100 ) ).toBe( true );
+	} );
+
+	it( 'should return true if container width <= query', () => {
+		expect( compareWidths( '<=', 300, 300 ) ).toBe( true );
+	} );
+
+	it( 'should return true if container width === query', () => {
+		expect( compareWidths( '=', 300, 300 ) ).toBe( true );
+	} );
+
+	it( 'should return true if container width !== query', () => {
+		expect( compareWidths( '!==', 100, 300 ) ).toBe( true );
+	} );
+
+	it( 'should return true if container width > query', () => {
+		expect( compareWidths( '>', 100, 300 ) ).toBe( true );
+	} );
+
+	it( 'should return true if container width ">=" query', () => {
+		expect( compareWidths( '>=', 300, 300 ) ).toBe( true );
+	} );
+
+	it( 'should throw an error when operator is wrong', () => {
+		expect( () => compareWidths( '=>', 300, 300 ) ).toThrow( new Error( 'Unsupported operator: =>' ) );
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-container-match/test/index.native.js b/packages/compose/src/hooks/use-container-match/test/index.native.js
new file mode 100644
index 0000000000000..5eadc6b3641fa
--- /dev/null
+++ b/packages/compose/src/hooks/use-container-match/test/index.native.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import useContainerMatch from '../';
+
+const TestComponent = ( { query } ) => {
+	const [ matches, onLayout ] = useContainerMatch( query );
+
+	return (
+		<View onLayout={ onLayout } matches={ matches } />
+	);
+};
+
+const renderWithOnLayout = ( component ) => {
+	const testComponent = create( component );
+
+	const mockNativeEvent = {
+		nativeEvent: {
+			layout: {
+				width: 300,
+			},
+		},
+	};
+
+	act( () => {
+		testComponent.toJSON().props.onLayout( mockNativeEvent );
+	} );
+
+	return testComponent.toJSON();
+};
+
+describe( 'useContainerMatch()', () => {
+	it( 'should return "{ isSmall: false }"', () => {
+		const component = renderWithOnLayout( <TestComponent query={ { isSmall: '< 200' } } /> );
+		expect( component.props.matches ).toMatchObject( { isSmall: false } );
+	} );
+
+	it( 'should return "{ isMedium: true }"', () => {
+		const component = renderWithOnLayout( <TestComponent query={ { isMedium: '> 250' } } /> );
+		expect( component.props.matches ).toMatchObject( { isMedium: true } );
+	} );
+
+	it( 'should return "{ isSmall: false, isMedium: true, isLarge: false }"', () => {
+		const component = renderWithOnLayout( <TestComponent query={ { isSmall: '< 200', isMedium: '> 250', isLarge: '> 400' } } /> );
+		expect( component.props.matches ).toMatchObject( { isSmall: false, isMedium: true, isLarge: false } );
+	} );
+
+	it( 'should return "{ isMedium: true }" using default operator', () => {
+		const component = renderWithOnLayout( <TestComponent query={ { isMedium: '200' } } /> );
+		expect( component.props.matches ).toMatchObject( { isMedium: true } );
+	} );
+} );

From aa3eeaa2b0a6fe15c8279c80c8573519dc393f61 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 2 Mar 2020 10:55:56 +0100
Subject: [PATCH 04/11] Refactor hook to be useResizeObserver() and unify with
 web API

---
 package-lock.json                             |  4 +-
 packages/components/package.json              |  1 -
 packages/components/src/placeholder/index.js  | 10 ++--
 .../components/src/placeholder/test/index.js  | 15 +++---
 packages/compose/README.md                    | 23 ++++++++
 packages/compose/package.json                 |  3 +-
 .../src/hooks/use-resize-observer/index.js    | 33 ++++++++++++
 .../hooks/use-resize-observer/index.native.js | 52 +++++++++++++++++++
 .../use-resize-observer/test/index.native.js  | 50 ++++++++++++++++++
 packages/compose/src/index.js                 |  1 +
 packages/compose/src/index.native.js          |  1 +
 test/unit/config/global-mocks.js              |  1 +
 12 files changed, 180 insertions(+), 14 deletions(-)
 create mode 100644 packages/compose/src/hooks/use-resize-observer/index.js
 create mode 100644 packages/compose/src/hooks/use-resize-observer/index.native.js
 create mode 100644 packages/compose/src/hooks/use-resize-observer/test/index.native.js

diff --git a/package-lock.json b/package-lock.json
index 722755976b17d..b96a5296140cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10213,7 +10213,6 @@
 				"moment": "^2.22.1",
 				"re-resizable": "^6.0.0",
 				"react-dates": "^17.1.1",
-				"react-resize-aware": "^3.0.0",
 				"react-spring": "^8.0.20",
 				"reakit": "^1.0.0-beta.12",
 				"rememo": "^3.0.0",
@@ -10228,7 +10227,8 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"lodash": "^4.17.15",
-				"mousetrap": "^1.6.2"
+				"mousetrap": "^1.6.2",
+				"react-resize-aware": "^3.0.0"
 			}
 		},
 		"@wordpress/core-data": {
diff --git a/packages/components/package.json b/packages/components/package.json
index 459884fe35bd4..c5192e41d0b65 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -52,7 +52,6 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
-		"react-resize-aware": "^3.0.0",
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
index 251690a0a8bb7..d37b3566f2430 100644
--- a/packages/components/src/placeholder/index.js
+++ b/packages/components/src/placeholder/index.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import useResizeAware from 'react-resize-aware';
+
+/**
+ * WordPress dependencies
+ */
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,9 +30,9 @@ function Placeholder( {
 	isColumnLayout,
 	...additionalProps
 } ) {
-	const [ resizeListener, { width } ] = useResizeAware();
+	const [ resizeListener, { width } ] = useResizeObserver();
 
-	// Since `useResizeAware` will report a width of `null` until after the
+	// Since `useResizeObserver` will report a width of `null` until after the
 	// first render, avoid applying any modifier classes until width is known.
 	let modifierClassNames;
 	if ( typeof width === 'number' ) {
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index cf14e596469c9..a0c50d8a1bf96 100644
--- a/packages/components/src/placeholder/test/index.js
+++ b/packages/components/src/placeholder/test/index.js
@@ -2,23 +2,24 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { more } from '@wordpress/icons';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Placeholder from '../';
 
-jest.mock( 'react-resize-aware' );
-
 describe( 'Placeholder', () => {
 	beforeEach( () => {
-		useResizeAware.mockReturnValue( [ <div key="1" />, { width: 320 } ] );
+		useResizeObserver.mockReturnValue( [
+			<div key="1" />,
+			{ width: 320 },
+		] );
 	} );
 
 	describe( 'basic rendering', () => {
@@ -109,8 +110,8 @@ describe( 'Placeholder', () => {
 	} );
 
 	describe( 'resize aware', () => {
-		it( 'should not assign modifier class in first-pass `null` width from `useResizeAware`', () => {
-			useResizeAware.mockReturnValue( [
+		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
+			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: 320 },
 			] );
@@ -123,7 +124,7 @@ describe( 'Placeholder', () => {
 		} );
 
 		it( 'should assign modifier class', () => {
-			useResizeAware.mockReturnValue( [
+			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
 				{ width: null },
 			] );
diff --git a/packages/compose/README.md b/packages/compose/README.md
index b473af456e8ec..df22f6dcb9770 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -157,6 +157,29 @@ _Returns_
 
 -   `boolean`: Reduced motion preference value.
 
+<a name="useResizeObserver" href="#useResizeObserver">#</a> **useResizeObserver**
+
+Hook which allows to listen the resize event of any target element when it changes sizes.
+
+_Usage_
+
+```js
+const App = () => {
+	const [ resizeListener, sizes ] = useResizeObserver();
+
+	return (
+		<div>
+			{ resizeListener }
+			Your content here
+		</div>
+	);
+};
+```
+
+_Returns_
+
+-   `Object`: Measurements object with properties `width` and `height`.
+
 <a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
 
 Returns true if the viewport matches the given query, or false otherwise.
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 8f677e9c87520..98b445f213cb7 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -27,7 +27,8 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"lodash": "^4.17.15",
-		"mousetrap": "^1.6.2"
+		"mousetrap": "^1.6.2",
+		"react-resize-aware": "^3.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
new file mode 100644
index 0000000000000..b76c7b4df9381
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import useResizeAware from 'react-resize-aware';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ *
+ * @return {Object} Measurements object with properties `width` and `height`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ *
+ */
+const useResizeObserver = () => {
+	const [ resizeListener, sizes ] = useResizeAware();
+
+	return [ resizeListener, sizes ];
+};
+
+export default useResizeObserver;
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
new file mode 100644
index 0000000000000..d92a75276a77e
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { View, StyleSheet } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ *
+ * @return {Object} Measurements object with properties `width` and `height`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<View>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</View>
+ * 	);
+ * };
+ * ```
+ *
+ */
+const useResizeObserver = () => {
+	const [ measurements, setMeasurements ] = useState( null );
+
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		const { width, height } = nativeEvent.layout;
+
+		setMeasurements( { width, height } );
+	}, [] );
+
+	const resizeObserver = () => {
+		return (
+			<View
+				style={ { ...StyleSheet.absoluteFill } }
+				onLayout={ onLayout }
+			/>
+		);
+	};
+
+	return [ resizeObserver(), measurements ];
+};
+
+export default useResizeObserver;
diff --git a/packages/compose/src/hooks/use-resize-observer/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/test/index.native.js
new file mode 100644
index 0000000000000..4e4165cd6a4db
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/test/index.native.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import useResizeObserver from '../';
+
+const TestComponent = ( { onLayout } ) => {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+
+	return (
+		<View sizes={ sizes } onLayout={ onLayout }>
+			{ resizeObserver }
+		</View>
+	);
+};
+
+const renderWithOnLayout = ( component ) => {
+	const testComponent = create( component );
+
+	const mockNativeEvent = {
+		nativeEvent: {
+			layout: {
+				width: 300,
+				height: 500,
+			},
+		},
+	};
+
+	act( () => {
+		testComponent.toJSON().children[ 0 ].props.onLayout( mockNativeEvent );
+	} );
+
+	return testComponent.toJSON();
+};
+
+describe( 'useResizeObserver()', () => {
+	it( 'should return "{ width: 300, height: 500 }"', () => {
+		const component = renderWithOnLayout( <TestComponent /> );
+
+		expect( component.props.sizes ).toMatchObject( {
+			width: 300,
+			height: 500,
+		} );
+	} );
+} );
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index 3a1aabde92cfe..083d41c3f9269 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -19,3 +19,4 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
+export { default as useResizeObserver } from './hooks/use-resize-observer';
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
index c0fe8a74bd1ae..c7df1d092e65e 100644
--- a/packages/compose/src/index.native.js
+++ b/packages/compose/src/index.native.js
@@ -7,3 +7,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
 export { default as useContainerMatch } from './hooks/use-container-match';
+export { default as useResizeObserver } from './hooks/use-resize-observer';
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index 60b430759ab28..8aff47b049dc1 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -2,5 +2,6 @@ jest.mock( '@wordpress/compose', () => {
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
 		useViewportMatch: jest.fn(),
+		useResizeObserver: jest.fn(),
 	};
 } );

From a741278a8986aa8e8b1633acbce9c54fe6f5fa3c Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 2 Mar 2020 12:25:20 +0100
Subject: [PATCH 05/11] Remove old implementation and update tests

---
 .../embed/test/__snapshots__/index.js.snap    | 10 +--
 .../use-container-match/compare-widths.js     | 21 ------
 .../hooks/use-container-match/index.native.js | 40 ----------
 .../test/compare-widths.js                    | 36 ---------
 .../use-container-match/test/index.native.js  | 74 -------------------
 packages/compose/src/index.native.js          |  1 -
 storybook/test/__snapshots__/index.js.snap    | 23 +-----
 test/unit/config/global-mocks.js              |  6 +-
 8 files changed, 7 insertions(+), 204 deletions(-)
 delete mode 100644 packages/compose/src/hooks/use-container-match/compare-widths.js
 delete mode 100644 packages/compose/src/hooks/use-container-match/index.native.js
 delete mode 100644 packages/compose/src/hooks/use-container-match/test/compare-widths.js
 delete mode 100644 packages/compose/src/hooks/use-container-match/test/index.native.js

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index a3aa6b0bb28b6..d3a08d978e03b 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -2,16 +2,8 @@
 
 exports[`core/embed block edit matches snapshot 1`] = `
 <div
-  class="components-placeholder wp-block-embed"
+  class="components-placeholder wp-block-embed is-large"
 >
-  <iframe
-    aria-hidden="true"
-    aria-label="resize-listener"
-    frameborder="0"
-    src="about:blank"
-    style="display:block;opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1"
-    tabindex="-1"
-  />
   <div
     class="components-placeholder__label"
   >
diff --git a/packages/compose/src/hooks/use-container-match/compare-widths.js b/packages/compose/src/hooks/use-container-match/compare-widths.js
deleted file mode 100644
index beaa67cad4e6f..0000000000000
--- a/packages/compose/src/hooks/use-container-match/compare-widths.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default function compareWidths( operator, queryWidth, containerWidth ) {
-	switch ( operator ) {
-		case '<':
-			return containerWidth < queryWidth;
-		case '<=':
-			return containerWidth <= queryWidth;
-		case '===':
-		case '==':
-		case '=':
-			return containerWidth === queryWidth;
-		case '!==':
-		case '!=':
-			return containerWidth !== queryWidth;
-		case '>':
-			return containerWidth > queryWidth;
-		case '>=':
-			return containerWidth >= queryWidth;
-		default:
-			throw new Error( `Unsupported operator: ${ operator }` );
-	}
-}
diff --git a/packages/compose/src/hooks/use-container-match/index.native.js b/packages/compose/src/hooks/use-container-match/index.native.js
deleted file mode 100644
index 9a43046c9d2d6..0000000000000
--- a/packages/compose/src/hooks/use-container-match/index.native.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useCallback } from '@wordpress/element';
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import compareWidths from './compare-widths';
-
-const useContainerMatch = ( queries ) => {
-	const [ currentContainerWidth, setContainerWidth ] = useState( null );
-	const [ containerMatches, setContainerMatches ] = useState( null );
-
-	const matchWidth = ( containerWidth ) =>
-		mapValues( queries, ( query ) => {
-			const [ queryWidth, operator = '>=' ] = query
-				.split( ' ' )
-				.reverse();
-			return compareWidths( operator, queryWidth, containerWidth );
-		} );
-
-	const onLayout = useCallback( ( { nativeEvent } ) => {
-		const { width } = nativeEvent.layout;
-
-		if ( width !== currentContainerWidth ) {
-			setContainerWidth( width );
-			matchWidth( width );
-			setContainerMatches( matchWidth( width ) );
-		}
-	}, [] );
-
-	return [ containerMatches, onLayout ];
-};
-
-export default useContainerMatch;
diff --git a/packages/compose/src/hooks/use-container-match/test/compare-widths.js b/packages/compose/src/hooks/use-container-match/test/compare-widths.js
deleted file mode 100644
index 93679b6f23056..0000000000000
--- a/packages/compose/src/hooks/use-container-match/test/compare-widths.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Internal dependencies
- */
-import compareWidths from '../compare-widths';
-
-describe( 'compareWidths()', () => {
-	it( 'should return true if container width < query', () => {
-		expect( compareWidths( '<', 300, 100 ) ).toBe( true );
-	} );
-
-	it( 'should return true if container width <= query', () => {
-		expect( compareWidths( '<=', 300, 300 ) ).toBe( true );
-	} );
-
-	it( 'should return true if container width === query', () => {
-		expect( compareWidths( '=', 300, 300 ) ).toBe( true );
-	} );
-
-	it( 'should return true if container width !== query', () => {
-		expect( compareWidths( '!==', 100, 300 ) ).toBe( true );
-	} );
-
-	it( 'should return true if container width > query', () => {
-		expect( compareWidths( '>', 100, 300 ) ).toBe( true );
-	} );
-
-	it( 'should return true if container width ">=" query', () => {
-		expect( compareWidths( '>=', 300, 300 ) ).toBe( true );
-	} );
-
-	it( 'should throw an error when operator is wrong', () => {
-		expect( () => compareWidths( '=>', 300, 300 ) ).toThrow(
-			new Error( 'Unsupported operator: =>' )
-		);
-	} );
-} );
diff --git a/packages/compose/src/hooks/use-container-match/test/index.native.js b/packages/compose/src/hooks/use-container-match/test/index.native.js
deleted file mode 100644
index 338ca2944e43d..0000000000000
--- a/packages/compose/src/hooks/use-container-match/test/index.native.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { create, act } from 'react-test-renderer';
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import useContainerMatch from '../';
-
-const TestComponent = ( { query } ) => {
-	const [ matches, onLayout ] = useContainerMatch( query );
-
-	return <View onLayout={ onLayout } matches={ matches } />;
-};
-
-const renderWithOnLayout = ( component ) => {
-	const testComponent = create( component );
-
-	const mockNativeEvent = {
-		nativeEvent: {
-			layout: {
-				width: 300,
-			},
-		},
-	};
-
-	act( () => {
-		testComponent.toJSON().props.onLayout( mockNativeEvent );
-	} );
-
-	return testComponent.toJSON();
-};
-
-describe( 'useContainerMatch()', () => {
-	it( 'should return "{ isSmall: false }"', () => {
-		const component = renderWithOnLayout(
-			<TestComponent query={ { isSmall: '< 200' } } />
-		);
-		expect( component.props.matches ).toMatchObject( { isSmall: false } );
-	} );
-
-	it( 'should return "{ isMedium: true }"', () => {
-		const component = renderWithOnLayout(
-			<TestComponent query={ { isMedium: '> 250' } } />
-		);
-		expect( component.props.matches ).toMatchObject( { isMedium: true } );
-	} );
-
-	it( 'should return "{ isSmall: false, isMedium: true, isLarge: false }"', () => {
-		const component = renderWithOnLayout(
-			<TestComponent
-				query={ {
-					isSmall: '< 200',
-					isMedium: '> 250',
-					isLarge: '> 400',
-				} }
-			/>
-		);
-		expect( component.props.matches ).toMatchObject( {
-			isSmall: false,
-			isMedium: true,
-			isLarge: false,
-		} );
-	} );
-
-	it( 'should return "{ isMedium: true }" using default operator', () => {
-		const component = renderWithOnLayout(
-			<TestComponent query={ { isMedium: '200' } } />
-		);
-		expect( component.props.matches ).toMatchObject( { isMedium: true } );
-	} );
-} );
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
index c7df1d092e65e..b42258930b6ce 100644
--- a/packages/compose/src/index.native.js
+++ b/packages/compose/src/index.native.js
@@ -6,5 +6,4 @@ export { default as withPreferredColorScheme } from './higher-order/with-preferr
 
 // Hooks
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
-export { default as useContainerMatch } from './hooks/use-container-match';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index b9f1491f1eb4f..2b0d00fffcf0b 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -4311,29 +4311,8 @@ exports[`Storyshots Components/Panel With Icon 1`] = `
 
 exports[`Storyshots Components/Placeholder Default 1`] = `
 <div
-  className="components-placeholder"
+  className="components-placeholder is-large"
 >
-  <iframe
-    aria-hidden={true}
-    aria-label="resize-listener"
-    frameBorder={0}
-    src="about:blank"
-    style={
-      Object {
-        "display": "block",
-        "height": "100%",
-        "left": 0,
-        "opacity": 0,
-        "overflow": "hidden",
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "width": "100%",
-        "zIndex": -1,
-      }
-    }
-    tabIndex={-1}
-  />
   <div
     className="components-placeholder__label"
   >
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index 8aff47b049dc1..0398af83c3a0b 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -1,7 +1,11 @@
 jest.mock( '@wordpress/compose', () => {
+	const App = () => null;
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
 		useViewportMatch: jest.fn(),
-		useResizeObserver: jest.fn(),
+		useResizeObserver: jest.fn( () => [
+			<App key={ 'mock-key' } />,
+			{ width: 700, height: 500 },
+		] ),
 	};
 } );

From 057990d6ed1a34b767a0c66bc0488fea05a096be Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 2 Mar 2020 16:42:41 +0100
Subject: [PATCH 06/11] Avoid setting state in onLayout frequently

---
 packages/compose/README.md                    |  1 +
 .../src/hooks/use-resize-observer/index.js    |  1 +
 .../hooks/use-resize-observer/index.native.js | 27 ++++++++++---------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/compose/README.md b/packages/compose/README.md
index df22f6dcb9770..be767d7263882 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -160,6 +160,7 @@ _Returns_
 <a name="useResizeObserver" href="#useResizeObserver">#</a> **useResizeObserver**
 
 Hook which allows to listen the resize event of any target element when it changes sizes.
+_Note: `useResizeObserver` will report `null` until after first render_
 
 _Usage_
 
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
index b76c7b4df9381..c1b533537f3cf 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.js
@@ -5,6 +5,7 @@ import useResizeAware from 'react-resize-aware';
 
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
+ * _Note: `useResizeObserver` will report `null` until after first render_
  *
  * @return {Object} Measurements object with properties `width` and `height`.
  *
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index d92a75276a77e..3a66e10c8ae9a 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -33,20 +33,23 @@ const useResizeObserver = () => {
 
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		const { width, height } = nativeEvent.layout;
-
-		setMeasurements( { width, height } );
+		setMeasurements( ( prevState ) => {
+			if (
+				! prevState ||
+				prevState.width !== width ||
+				prevState.height !== height
+			) {
+				return { width, height };
+			}
+			return prevState;
+		} );
 	}, [] );
 
-	const resizeObserver = () => {
-		return (
-			<View
-				style={ { ...StyleSheet.absoluteFill } }
-				onLayout={ onLayout }
-			/>
-		);
-	};
-
-	return [ resizeObserver(), measurements ];
+	return [
+		// eslint-disable-next-line react/jsx-key
+		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />,
+		measurements,
+	];
 };
 
 export default useResizeObserver;

From 6f48b928cd1b0570e8d3e75ca053d71e25ba2ef2 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Tue, 3 Mar 2020 12:41:52 +0100
Subject: [PATCH 07/11] Add comment and improve typing

---
 packages/compose/README.md                                     | 2 +-
 packages/compose/src/hooks/use-resize-observer/index.js        | 2 +-
 packages/compose/src/hooks/use-resize-observer/index.native.js | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/compose/README.md b/packages/compose/README.md
index be767d7263882..5091ca7ecaf2d 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -179,7 +179,7 @@ const App = () => {
 
 _Returns_
 
--   `Object`: Measurements object with properties `width` and `height`.
+-   `?Object`: Measurements object with properties `width` and `height`.
 
 <a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
 
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
index c1b533537f3cf..2691991b40afb 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.js
@@ -7,7 +7,7 @@ import useResizeAware from 'react-resize-aware';
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  * _Note: `useResizeObserver` will report `null` until after first render_
  *
- * @return {Object} Measurements object with properties `width` and `height`.
+ * @return {?Object} Measurements object with properties `width` and `height`.
  *
  * @example
  *
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index 3a66e10c8ae9a..1f66bde9ce94c 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -46,6 +46,7 @@ const useResizeObserver = () => {
 	}, [] );
 
 	return [
+		// `key` is needless in that place since we are not rendering an array of elements
 		// eslint-disable-next-line react/jsx-key
 		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />,
 		measurements,

From 2ac3218e08f8002f71595f3772bee3f58e2dd60f Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 4 Mar 2020 09:02:32 +0100
Subject: [PATCH 08/11] Move observer to const to avoid adding comment for
 disabling eslint

---
 .../src/hooks/use-resize-observer/index.native.js     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index 1f66bde9ce94c..b56dfb9cc31f4 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -45,12 +45,11 @@ const useResizeObserver = () => {
 		} );
 	}, [] );
 
-	return [
-		// `key` is needless in that place since we are not rendering an array of elements
-		// eslint-disable-next-line react/jsx-key
-		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />,
-		measurements,
-	];
+	const observer = (
+		<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } />
+	);
+
+	return [ observer, measurements ];
 };
 
 export default useResizeObserver;

From 0b3ac33476980332b61eafb2e1187830a338a3c2 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 9 Mar 2020 11:29:21 +0100
Subject: [PATCH 09/11] Refactor doc

---
 packages/compose/README.md                              | 2 +-
 packages/compose/src/hooks/use-resize-observer/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compose/README.md b/packages/compose/README.md
index 5091ca7ecaf2d..51503ec2eeb5a 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -179,7 +179,7 @@ const App = () => {
 
 _Returns_
 
--   `?Object`: Measurements object with properties `width` and `height`.
+-   `Array`: An array of {Element} `resizeListener` and g{?Object} `measurements` with properties `width` and `height`
 
 <a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
 
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
index 2691991b40afb..ab2036a9648d5 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.js
@@ -7,7 +7,7 @@ import useResizeAware from 'react-resize-aware';
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  * _Note: `useResizeObserver` will report `null` until after first render_
  *
- * @return {?Object} Measurements object with properties `width` and `height`.
+ * @return {Array} An array of {Element} `resizeListener` and g{?Object} `measurements` with properties `width` and `height`
  *
  * @example
  *

From 423ac9cd38ef73da8f98692e33e4397eabe3f438 Mon Sep 17 00:00:00 2001
From: Jakub Binda <jakub.binda@gmail.com>
Date: Tue, 10 Mar 2020 17:37:23 +0100
Subject: [PATCH 10/11] use resizeObserver in COlumns

---
 .../block-library/src/column/edit.native.js   |  2 +-
 .../block-library/src/columns/edit.native.js  | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
index 2d0757d4162c1..f2daf3905bd87 100644
--- a/packages/block-library/src/column/edit.native.js
+++ b/packages/block-library/src/column/edit.native.js
@@ -42,7 +42,7 @@ function ColumnEdit( {
 	const containerWidth = columnsContainerWidth || containerMaxWidth;
 
 	const minWidth = Math.min( containerWidth, containerMaxWidth );
-	const columnBaseWidth = minWidth / columnsInRow;
+	const columnBaseWidth = minWidth / Math.max( 1, columnsInRow );
 
 	const applyBlockStyle = ( placeholder = false ) => {
 		if ( isMobile ) {
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index b0fc0d04e811e..cb99250af4a7b 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -17,7 +17,11 @@ import {
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import {
+	compose,
+	withPreferredColorScheme,
+	useResizeObserver,
+} from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { withViewportMatch } from '@wordpress/viewport';
 /**
@@ -53,11 +57,13 @@ function ColumnsEditContainer( {
 	isMobile,
 	columnCount,
 } ) {
-	const { verticalAlignment } = attributes;
+	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsSettings, setColumnsSettings ] = useState( {
 		columnsInRow: 2,
 	} );
-	const { width } = columnsSettings;
+
+	const { verticalAlignment } = attributes;
+	const { width } = sizes || {};
 
 	useEffect( () => {
 		updateColumns(
@@ -66,6 +72,13 @@ function ColumnsEditContainer( {
 		);
 	}, [ columnCount ] );
 
+	useEffect( () => {
+		setColumnsSettings( {
+			columnsInRow: getColumnsInRow( width, columnCount ),
+			width,
+		} );
+	}, [ width ] );
+
 	const getColumnsInRow = ( containerWidth, columnsNumber ) => {
 		if ( containerWidth < 480 ) {
 			return 1;
@@ -99,20 +112,8 @@ function ColumnsEditContainer( {
 					isCollapsed={ false }
 				/>
 			</BlockControls>
-			<View
-				onLayout={ ( event ) => {
-					const { width: newWidth } = event.nativeEvent.layout;
-					if ( newWidth !== width ) {
-						setColumnsSettings( {
-							columnsInRow: getColumnsInRow(
-								newWidth,
-								columnCount
-							),
-							width: newWidth,
-						} );
-					}
-				} }
-			>
+			<View>
+				{ resizeListener }
 				<InnerBlocks
 					flatListProps={ {
 						...( ! isMobile && {

From 8b02d17718f0c92191f735c59503784027fafc3f Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Wed, 11 Mar 2020 12:29:53 +0100
Subject: [PATCH 11/11] Refactor doc and web light wrapper

---
 packages/compose/README.md                             |  2 +-
 .../compose/src/hooks/use-resize-observer/index.js     | 10 ++--------
 .../src/hooks/use-resize-observer/index.native.js      |  2 +-
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/compose/README.md b/packages/compose/README.md
index 51503ec2eeb5a..bfc6d2b024759 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -179,7 +179,7 @@ const App = () => {
 
 _Returns_
 
--   `Array`: An array of {Element} `resizeListener` and g{?Object} `measurements` with properties `width` and `height`
+-   `Array`: An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
 
 <a name="useViewportMatch" href="#useViewportMatch">#</a> **useViewportMatch**
 
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
index ab2036a9648d5..a46539e10438d 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.js
@@ -7,7 +7,7 @@ import useResizeAware from 'react-resize-aware';
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  * _Note: `useResizeObserver` will report `null` until after first render_
  *
- * @return {Array} An array of {Element} `resizeListener` and g{?Object} `measurements` with properties `width` and `height`
+ * @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
  *
  * @example
  *
@@ -25,10 +25,4 @@ import useResizeAware from 'react-resize-aware';
  * ```
  *
  */
-const useResizeObserver = () => {
-	const [ resizeListener, sizes ] = useResizeAware();
-
-	return [ resizeListener, sizes ];
-};
-
-export default useResizeObserver;
+export default useResizeAware;
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index b56dfb9cc31f4..26e6f647f5b5a 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -10,7 +10,7 @@ import { useState, useCallback } from '@wordpress/element';
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  *
- * @return {Object} Measurements object with properties `width` and `height`.
+ * @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
  *
  * @example
  *