Mobile - BlockList - Pass FlatList internal onLayout through CellRend…

…ererComponent
WordPress · May 17, 2022 · 140b3f1 · 140b3f1
1 parent 27ec8f6
commit 140b3f1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
@@ -13,7 +13,12 @@ import { useEffect, useCallback } from '@wordpress/element';
  */
 import { useBlockListContext } from './block-list-context';
 
-function BlockListItemCell( { children, clientId, rootClientId } ) {
+function BlockListItemCell( {
+	children,
+	clientId,
+	rootClientId,
+	listOnLayout,
+} ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
 
 	useEffect( () => {
@@ -26,14 +31,21 @@ function BlockListItemCell( { children, clientId, rootClientId } ) {
 	}, [] );
 
 	const onLayout = useCallback(
-		( { nativeEvent: { layout } } ) => {
+		( event ) => {
+			const {
+				nativeEvent: { layout },
+			} = event;
 			updateBlocksLayouts( blocksLayouts, {
 				clientId,
 				rootClientId,
 				...layout,
 			} );
+
+			if ( listOnLayout ) {
+				listOnLayout( event );
+			}
 		},
-		[ clientId, rootClientId, updateBlocksLayouts ]
+		[ clientId, rootClientId, updateBlocksLayouts, listOnLayout ]
 	);
 
 	return <View onLayout={ onLayout }>{ children }</View>;

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -162,12 +162,13 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
-	getCellRendererComponent( { children, item } ) {
+	getCellRendererComponent( { children, item, onLayout } ) {
 		const { rootClientId } = this.props;
 		return (
 			<BlockListItemCell
 				children={ children }
 				clientId={ item }
+				listOnLayout={ onLayout }
 				rootClientId={ rootClientId }
 			/>
 		);