@wordpress/block-editor 9.0.0 → 9.1.0

package/src/components/block-draggable/use-scroll-when-dragging.native.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import { useWindowDimensions } from 'react-native';
+import {
+	useSharedValue,
+	useAnimatedRef,
+	scrollTo,
+	useAnimatedReaction,
+	withTiming,
+	withRepeat,
+	cancelAnimation,
+	Easing,
+} from 'react-native-reanimated';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockListContext } from '../block-list/block-list-context';
+
+const SCROLL_INACTIVE_DISTANCE_PX = 50;
+const SCROLL_INTERVAL_MS = 1000;
+const VELOCITY_MULTIPLIER = 5000;
+
+/**
+ * React hook that scrolls the scroll container when a block is being dragged.
+ *
+ * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
+ *                      functions to be called in `onDragStart`, `onDragOver`
+ *                      and `onDragEnd` events respectively. Additionally,
+ * 						`scrollHandler` function is returned which should be
+ * 						called in the `onScroll` event of the block list.
+ */
+export default function useScrollWhenDragging() {
+	const { scrollRef } = useBlockListContext();
+	const animatedScrollRef = useAnimatedRef();
+	animatedScrollRef( scrollRef );
+
+	const { height: windowHeight } = useWindowDimensions();
+
+	const velocityY = useSharedValue( 0 );
+	const offsetY = useSharedValue( 0 );
+	const dragStartY = useSharedValue( 0 );
+	const animationTimer = useSharedValue( 0 );
+	const isAnimationTimerActive = useSharedValue( false );
+	const isScrollActive = useSharedValue( false );
+
+	const scroll = {
+		offsetY: useSharedValue( 0 ),
+		maxOffsetY: useSharedValue( 0 ),
+	};
+	const scrollHandler = ( event ) => {
+		'worklet';
+		const { contentSize, contentOffset, layoutMeasurement } = event;
+		scroll.offsetY.value = contentOffset.y;
+		scroll.maxOffsetY.value = contentSize.height - layoutMeasurement.height;
+	};
+
+	const stopScrolling = () => {
+		'worklet';
+		cancelAnimation( animationTimer );
+
+		isAnimationTimerActive.value = false;
+		isScrollActive.value = false;
+		velocityY.value = 0;
+	};
+
+	const startScrolling = ( y ) => {
+		'worklet';
+		stopScrolling();
+		offsetY.value = scroll.offsetY.value;
+		dragStartY.value = y;
+
+		animationTimer.value = 0;
+		animationTimer.value = withRepeat(
+			withTiming( 1, {
+				duration: SCROLL_INTERVAL_MS,
+				easing: Easing.linear,
+			} ),
+			-1,
+			true
+		);
+		isAnimationTimerActive.value = true;
+	};
+
+	const scrollOnDragOver = ( y ) => {
+		'worklet';
+		const dragDistance = Math.max(
+			Math.abs( y - dragStartY.value ) - SCROLL_INACTIVE_DISTANCE_PX,
+			0
+		);
+		const distancePercentage = dragDistance / windowHeight;
+
+		if ( ! isScrollActive.value ) {
+			isScrollActive.value = dragDistance > 0;
+		} else if ( y > dragStartY.value ) {
+			// User is dragging downwards.
+			velocityY.value = VELOCITY_MULTIPLIER * distancePercentage;
+		} else if ( y < dragStartY.value ) {
+			// User is dragging upwards.
+			velocityY.value = -VELOCITY_MULTIPLIER * distancePercentage;
+		} else {
+			velocityY.value = 0;
+		}
+	};
+
+	useAnimatedReaction(
+		() => animationTimer.value,
+		( value, previous ) => {
+			if ( velocityY.value === 0 ) {
+				return;
+			}
+
+			const delta = Math.abs( value - previous );
+			let newOffset = offsetY.value + delta * velocityY.value;
+
+			if ( scroll.maxOffsetY.value !== 0 ) {
+				newOffset = Math.max(
+					0,
+					Math.min( scroll.maxOffsetY.value, newOffset )
+				);
+			} else {
+				// Scroll values are empty until receiving the first scroll event.
+				// In that case, the max offset is unknown and we can't clamp the
+				// new offset value.
+				newOffset = Math.max( 0, newOffset );
+			}
+
+			offsetY.value = newOffset;
+			scrollTo( animatedScrollRef, 0, offsetY.value, false );
+		}
+	);
+
+	return [ startScrolling, scrollOnDragOver, stopScrolling, scrollHandler ];
+}

package/src/components/block-list/block-list-context.native.js

@@ -0,0 +1,175 @@
+/**
+ * External dependencies
+ */
+import { orderBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const DEFAULT_BLOCK_LIST_CONTEXT = {
+	scrollRef: null,
+	blocksLayouts: { current: {} },
+	findBlockLayoutByClientId,
+	getBlockLayoutsOrderedByYCoord,
+	findBlockLayoutByPosition,
+	updateBlocksLayouts,
+};
+
+const Context = createContext( DEFAULT_BLOCK_LIST_CONTEXT );
+const { Provider, Consumer } = Context;
+
+/**
+ * Finds a block's layout data by position.
+ *
+ * @param {Object} data       Blocks layouts object.
+ * @param {Object} position   Position to use for finding the block.
+ * @param {number} position.x X coordinate.
+ * @param {number} position.y Y coordinate.
+ *
+ * @return {Object|undefined} Found block layout data that matches the provided position. If none is found, `undefined` will be returned.
+ */
+function findBlockLayoutByPosition( data, position ) {
+	// Only enabled for root level blocks
+	return Object.values( data ).find( ( block ) => {
+		return (
+			position.x >= block.x &&
+			position.x <= block.x + block.width &&
+			position.y >= block.y &&
+			position.y <= block.y + block.height
+		);
+	} );
+}
+
+/**
+ * Finds a block's layout data by its client Id.
+ *
+ * @param {Object} data     Blocks layouts object.
+ * @param {string} clientId Block's clientId.
+ *
+ * @return {Object} Found block layout data.
+ */
+function findBlockLayoutByClientId( data, clientId ) {
+	return Object.entries( data ).reduce( ( acc, entry ) => {
+		const item = entry[ 1 ];
+		if ( acc ) {
+			return acc;
+		}
+		if ( item?.clientId === clientId ) {
+			return item;
+		}
+		if ( item?.innerBlocks && Object.keys( item.innerBlocks ).length > 0 ) {
+			return findBlockLayoutByClientId( item.innerBlocks, clientId );
+		}
+		return null;
+	}, null );
+}
+
+/**
+ * Deletes the layout data of a block by its client Id.
+ *
+ * @param {Object} data     Blocks layouts object.
+ * @param {string} clientId Block's clientsId.
+ *
+ * @return {Object} Updated data object.
+ */
+export function deleteBlockLayoutByClientId( 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 = deleteBlockLayoutByClientId(
+					data[ key ].innerBlocks,
+					clientId
+				);
+			}
+		}
+		return acc;
+	}, {} );
+}
+
+/**
+ * Orders the block's layout data by its Y coordinate.
+ *
+ * @param {Object} data Blocks layouts object.
+ *
+ * @return {Object} Blocks layouts object ordered by its Y coordinate.
+ */
+function getBlockLayoutsOrderedByYCoord( data ) {
+	// Only enabled for root level blocks.
+	// Using lodash orderBy due to hermes not having
+	// stable support for native .sort(). It will be
+	// supported in the React Native version 0.68.0.
+	return orderBy( data, [ 'y', 'asc' ] );
+}
+
+/**
+ * Updates or deletes a block's layout data in the blocksLayouts object,
+ * in case of deletion, the layout data is not required.
+ *
+ * @param {Object}   blocksLayouts          Blocks layouts object.
+ * @param {Object}   blockData              Block's layout data to add or remove to/from the blockLayouts object.
+ * @param {string}   blockData.clientId     Block's clientId.
+ * @param {?string}  blockData.rootClientId Optional. Block's rootClientId.
+ * @param {?boolean} blockData.shouldRemove Optional. Flag to remove it from the blocksLayout list.
+ * @param {number}   blockData.width        Block's width.
+ * @param {number}   blockData.height       Block's height.
+ * @param {number}   blockData.x            Block's x coordinate (relative to the parent).
+ * @param {number}   blockData.y            Block's y coordinate (relative to the parent).
+ */
+
+function updateBlocksLayouts( blocksLayouts, blockData ) {
+	const { clientId, rootClientId, shouldRemove, ...layoutProps } = blockData;
+
+	if ( clientId && shouldRemove ) {
+		blocksLayouts.current = deleteBlockLayoutByClientId(
+			blocksLayouts.current,
+			clientId
+		);
+		return;
+	}
+
+	if ( clientId && ! rootClientId ) {
+		blocksLayouts.current[ clientId ] = {
+			clientId,
+			rootClientId,
+			...layoutProps,
+			innerBlocks: {
+				...blocksLayouts.current[ clientId ]?.innerBlocks,
+			},
+		};
+	} else if ( clientId && rootClientId ) {
+		const block = findBlockLayoutByClientId(
+			blocksLayouts.current,
+			rootClientId
+		);
+
+		if ( block ) {
+			block.innerBlocks[ clientId ] = {
+				clientId,
+				rootClientId,
+				...layoutProps,
+				innerBlocks: {
+					...block.innerBlocks[ clientId ]?.innerBlocks,
+				},
+			};
+		}
+	}
+}
+
+export { Provider as BlockListProvider, Consumer as BlockListConsumer };
+
+/**
+ * Hook that returns the block list context.
+ *
+ * @return {Object} Block list context
+ */
+export const useBlockListContext = () => {
+	return useContext( Context );
+};

package/src/components/block-list/block-list-item-cell.native.js

@@ -0,0 +1,49 @@
+/**
+ * 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( { children, clientId, rootClientId, onLayout } ) {
+	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+
+	useEffect( () => {
+		return () => {
+			updateBlocksLayouts( blocksLayouts, {
+				clientId,
+				shouldRemove: true,
+			} );
+		};
+	}, [] );
+
+	const onCellLayout = useCallback(
+		( event ) => {
+			const {
+				nativeEvent: { layout },
+			} = event;
+			updateBlocksLayouts( blocksLayouts, {
+				clientId,
+				rootClientId,
+				...layout,
+			} );
+
+			if ( onLayout ) {
+				onLayout( event );
+			}
+		},
+		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
+	);
+
+	return <View onLayout={ onCellLayout }>{ children }</View>;
+}
+
+export default BlockListItemCell;

package/src/components/block-list/block-list-item.native.js

@@ -121,6 +121,7 @@ export class BlockListItem extends Component {
 			blockWidth,
 			...restProps
 		} = this.props;
+
 		const readableContentViewStyle =
 			contentResizeMode === 'stretch' && stretchStyle;
 		const { isContainerRelated } = alignmentHelpers;
@@ -162,25 +163,20 @@ export class BlockListItem extends Component {
 	}
 
 	render() {
-		const {
-			gridProperties,
-			clientId,
-			parentWidth,
-			items,
-			blockWidth,
-		} = this.props;
+		const { parentWidth, blockWidth, isGridItem } = this.props;
 
 		if ( ! blockWidth ) {
 			return null;
 		}
 
-		if ( gridProperties ) {
+		if ( isGridItem ) {
+			const { numOfColumns, tileCount, tileIndex } = this.props;
 			return (
 				<Grid
-					numOfColumns={ gridProperties.numColumns }
-					tileCount={ items.length }
-					index={ items.indexOf( clientId ) }
 					maxWidth={ parentWidth }
+					numOfColumns={ numOfColumns }
+					tileCount={ tileCount }
+					index={ tileIndex }
 				>
 					{ this.renderContent() }
 				</Grid>

package/src/components/block-list/block.native.js

@@ -31,6 +31,7 @@ import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
 import { store as blockEditorStore } from '../../store';
+import BlockDraggable from '../block-draggable';
 
 const emptyArray = [];
 function BlockForType( {
@@ -189,6 +190,8 @@ class BlockListBlock extends Component {
 			marginHorizontal,
 			isInnerBlockSelected,
 			name,
+			draggingEnabled,
+			draggingClientId,
 		} = this.props;
 
 		if ( ! attributes || ! blockType ) {
@@ -256,14 +259,22 @@ class BlockListBlock extends Component {
 								] }
 							/>
 						) }
-						{ isValid ? (
-							this.getBlockForType()
-						) : (
-							<BlockInvalidWarning
-								blockTitle={ title }
-								icon={ icon }
-							/>
-						) }
+						<BlockDraggable
+							clientId={ clientId }
+							draggingClientId={ draggingClientId }
+							enabled={ draggingEnabled }
+						>
+							{ () =>
+								isValid ? (
+									this.getBlockForType()
+								) : (
+									<BlockInvalidWarning
+										blockTitle={ title }
+										icon={ icon }
+									/>
+								)
+							}
+						</BlockDraggable>
 						<View
 							style={ styles.neutralToolbar }
 							ref={ this.anchorNodeRef }
@@ -278,6 +289,7 @@ class BlockListBlock extends Component {
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
 									isFullWidth={ isFullWidthToolbar }
+									draggingClientId={ draggingClientId }
 								/>
 							) }
 						</View>
@@ -308,6 +320,7 @@ export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockIndex,
+			getBlockCount,
 			getSettings,
 			isBlockSelected,
 			getBlock,
@@ -315,6 +328,7 @@ export default compose( [
 			getLowestCommonAncestorWithSelectedBlock,
 			getBlockParents,
 			hasSelectedInnerBlock,
+			getBlockHierarchyRootClientId,
 		} = select( blockEditorStore );
 
 		const order = getBlockIndex( clientId );
@@ -359,6 +373,18 @@ export default compose( [
 		const baseGlobalStyles = getSettings()
 			?.__experimentalGlobalStylesBaseStyles;
 
+		const hasInnerBlocks = getBlockCount( clientId ) > 0;
+		// For blocks with inner blocks, we only enable the dragging in the nested
+		// blocks if any of them are selected. This way we prevent the long-press
+		// gesture from being disabled for elements within the block UI.
+		const draggingEnabled =
+			! hasInnerBlocks ||
+			isSelected ||
+			! hasSelectedInnerBlock( clientId, true );
+		// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
+		// will be the top in the hierarchy.
+		const draggingClientId = getBlockHierarchyRootClientId( clientId );
+
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -366,6 +392,8 @@ export default compose( [
 			title,
 			attributes,
 			blockType,
+			draggingClientId,
+			draggingEnabled,
 			isSelected,
 			isInnerBlockSelected,
 			isValid,

package/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,
+	DEFAULT_BLOCK_LIST_CONTEXT,
+} from './block-list-context';
+import { BlockDraggableWrapper } from '../block-draggable';
 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,18 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
+	getCellRendererComponent( { children, item, onLayout } ) {
+		const { rootClientId } = this.props;
+		return (
+			<BlockListItemCell
+				children={ children }
+				clientId={ item }
+				onLayout={ onLayout }
+				rootClientId={ rootClientId }
+			/>
+		);
+	}
+
 	onLayout( { nativeEvent } ) {
 		const { layout } = nativeEvent;
 		const { blockWidth } = this.state;
@@ -170,20 +190,27 @@ export class BlockList extends Component {
 	}
 
 	render() {
-		const { isRootList } = this.props;
+		const { isRootList, isRTL } = 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 }>
-				{ this.renderList() }
-			</BlockListContext.Provider>
+			<BlockListProvider
+				value={ {
+					...DEFAULT_BLOCK_LIST_CONTEXT,
+					scrollRef: this.scrollViewRef,
+				} }
+			>
+				<BlockDraggableWrapper isRTL={ isRTL }>
+					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
+				</BlockDraggableWrapper>
+			</BlockListProvider>
 		) : (
-			<BlockListContext.Consumer>
-				{ ( ref ) =>
+			<BlockListConsumer>
+				{ ( { scrollRef } ) =>
 					this.renderList( {
-						parentScrollRef: ref,
+						parentScrollRef: scrollRef,
 					} )
 				}
-			</BlockListContext.Consumer>
+			</BlockListConsumer>
 		);
 
 		return (
@@ -212,7 +239,7 @@ export class BlockList extends Component {
 			contentResizeMode,
 			blockWidth,
 		} = this.props;
-		const { parentScrollRef } = extraProps;
+		const { parentScrollRef, onScroll } = extraProps;
 
 		const {
 			blockToolbar,
@@ -279,6 +306,7 @@ export class BlockList extends Component {
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
+					CellRendererComponent={ this.getCellRendererComponent }
 					shouldPreventAutomaticScroll={
 						this.shouldFlatListPreventAutomaticScroll
 					}
@@ -286,6 +314,7 @@ export class BlockList extends Component {
 					ListHeaderComponent={ header }
 					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
 					ListFooterComponent={ this.renderBlockListFooter }
+					onScroll={ onScroll }
 				/>
 				{ this.shouldShowInnerBlockAppender() && (
 					<View
@@ -321,6 +350,15 @@ export class BlockList extends Component {
 			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
+
+		// Extracting the grid item properties here to avoid
+		// re-renders in the blockListItem component.
+		const isGridItem = !! gridProperties;
+		const gridItemProps = gridProperties && {
+			numOfColumns: gridProperties.numColumns,
+			tileCount: blockClientIds.length,
+			tileIndex: blockClientIds.indexOf( clientId ),
+		};
 		return (
 			<BlockListItem
 				isStackedHorizontally={ isStackedHorizontally }
@@ -337,8 +375,8 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
-				gridProperties={ gridProperties }
-				items={ blockClientIds }
+				isGridItem={ isGridItem }
+				{ ...gridItemProps }
 			/>
 		);
 	}
@@ -401,6 +439,8 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+			const isRTL = getSettings().isRTL;
+
 			return {
 				blockClientIds,
 				blockCount,
@@ -411,6 +451,7 @@ export default compose( [
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,
+				isRTL,
 			};
 		}
 	),