[Mobile] - Drag & drop blocks - Fetch and share blocks layout size and position coordinates

packages/block-editor/src/components/block-list/block-list-context.native.js

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+const blocksLayouts = { current: {} };
+
+const Context = createContext( {
+	scrollRef: null,
+	blocksLayouts: {},
+	updateBlocksLayouts: () => {},
+} );
+const { Provider, Consumer } = Context;
+
+function findByRootId( data, rootClientId ) {
+	return Object.entries( data ).reduce( ( acc, entry ) => {
+		const item = entry[ 1 ];
+		if ( acc ) {
+			return acc;
+		}
+		if ( item?.clientId === rootClientId ) {
+			return item;
+		}
+		if ( item?.innerBlocks && Object.keys( item.innerBlocks ).length > 0 ) {
+			return findByRootId( item.innerBlocks, rootClientId );
+		}
+		return null;
+	}, null );
+}
+
+function deleteByClientId( data, clientId ) {
+	return Object.keys( data ).reduce( ( acc, key ) => {
+		if ( key !== clientId ) {
+			acc[ key ] = data[ key ];
+		}
+		if (
+			data[ key ]?.innerBlocks &&
+			Object.keys( data[ key ].innerBlocks ).length > 0
+		) {
+			if ( acc[ key ] ) {
+				acc[ key ].innerBlocks = deleteByClientId(
+					data[ key ].innerBlocks,
+					clientId
+				);
+			}
+		}
+		return acc;
+	}, {} );
+}
+
+function updateBlocksLayouts( blockData ) {
+	const { clientId, rootClientId, shouldRemove, ...layoutProps } = blockData;
+
+	if ( clientId && shouldRemove ) {
+		blocksLayouts.current = deleteByClientId(
+			blocksLayouts.current,
+			clientId
+		);
+		return;
+	}
+
+	if ( clientId && ! rootClientId ) {
+		blocksLayouts.current[ clientId ] = {
+			clientId,
+			rootClientId,
+			...layoutProps,
+			innerBlocks: {
+				...blocksLayouts.current[ clientId ]?.innerBlocks,
+			},
+		};
+	} else if ( clientId && rootClientId ) {
+		const block = findByRootId( blocksLayouts.current, rootClientId );
+
+		if ( block ) {
+			block.innerBlocks[ clientId ] = {
+				clientId,
+				rootClientId,
+				...layoutProps,
+				innerBlocks: {
+					...block.innerBlocks[ clientId ]?.innerBlocks,
+				},
+			};
+		}
+	}
+}
+
+export {
+	Provider as BlockListProvider,
+	Consumer as BlockListConsumer,
+	updateBlocksLayouts,
+	blocksLayouts,
+};
+
+export const useBlockListContext = () => {
+	const blockListContext = useContext( Context );
+	return blockListContext;
+};

packages/block-editor/src/components/block-list/block-list-item-cell.native.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockListContext } from './block-list-context';
+
+function BlockListItemCell( props ) {
+	const { clientId, rootClientId } = props;
+	const { updateBlocksLayouts } = useBlockListContext();
+
+	useEffect( () => {
+		return () => {
+			updateBlocksLayouts( { clientId, shouldRemove: true } );
+		};
+	}, [] );
+
+	const onLayout = useCallback(
+		( { nativeEvent: { layout } } ) => {
+			updateBlocksLayouts( { clientId, rootClientId, ...layout } );
+		},
+		[ clientId, rootClientId, updateBlocksLayouts ]
+	);
+
+	return <View onLayout={ onLayout }>{ props.children }</View>;
+}
+
+export default BlockListItemCell;

packages/block-editor/src/components/block-list/index.native.js

@@ -25,10 +25,15 @@ import { __ } from '@wordpress/i18n';
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
 import BlockListItem from './block-list-item';
+import BlockListItemCell from './block-list-item-cell';
+import {
+	BlockListProvider,
+	BlockListConsumer,
+	updateBlocksLayouts,
+	blocksLayouts,
+} from './block-list-context';
 import { store as blockEditorStore } from '../../store';
 
-const BlockListContext = createContext();
-
 export const OnCaretVerticalPositionChange = createContext();
 
 const stylesMemo = {};
@@ -78,6 +83,9 @@ export class BlockList extends Component {
 		);
 		this.renderEmptyList = this.renderEmptyList.bind( this );
 		this.getExtraData = this.getExtraData.bind( this );
+		this.getCellRendererComponent = this.getCellRendererComponent.bind(
+			this
+		);
 
 		this.onLayout = this.onLayout.bind( this );
 
@@ -154,6 +162,17 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
+	getCellRendererComponent( { children, item } ) {
+		const { rootClientId } = this.props;
+		return (
+			<BlockListItemCell
+				children={ children }
+				clientId={ item }
+				rootClientId={ rootClientId }
+			/>
+		);
+	}
+
 	onLayout( { nativeEvent } ) {
 		const { layout } = nativeEvent;
 		const { blockWidth } = this.state;
@@ -173,17 +192,23 @@ export class BlockList extends Component {
 		const { isRootList } = this.props;
 		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks
 		const blockList = isRootList ? (
-			<BlockListContext.Provider value={ this.scrollViewRef }>
+			<BlockListProvider
+				value={ {
+					scrollRef: this.scrollViewRef,
+					updateBlocksLayouts,
+					blocksLayouts: blocksLayouts.current,
+				} }
+			>
 				{ this.renderList() }
-			</BlockListContext.Provider>
+			</BlockListProvider>
 		) : (
-			<BlockListContext.Consumer>
-				{ ( ref ) =>
+			<BlockListConsumer>
+				{ ( { scrollRef } ) =>
 					this.renderList( {
-						parentScrollRef: ref,
+						parentScrollRef: scrollRef,
 					} )
 				}
-			</BlockListContext.Consumer>
+			</BlockListConsumer>
 		);
 
 		return (
@@ -279,6 +304,7 @@ export class BlockList extends Component {
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
+					CellRendererComponent={ this.getCellRendererComponent }
 					shouldPreventAutomaticScroll={
 						this.shouldFlatListPreventAutomaticScroll
 					}