@wordpress/block-editor 9.0.0 → 9.3.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-edit/test/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow, mount } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import {
 import { Edit } from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
+const noop = () => {};
+
 describe( 'Edit', () => {
 	afterEach( () => {
 		getBlockTypes().forEach( ( block ) => {

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

@@ -37,12 +37,8 @@ export class BlockListItem extends Component {
 			parentWidth,
 			blockWidth,
 		} = this.props;
-		const {
-			isFullWidth,
-			isWideWidth,
-			isWider,
-			isContainerRelated,
-		} = alignmentHelpers;
+		const { isFullWidth, isWideWidth, isWider, isContainerRelated } =
+			alignmentHelpers;
 
 		if ( isFullWidth( blockAlignment ) ) {
 			if ( ! hasParents ) {
@@ -83,12 +79,8 @@ export class BlockListItem extends Component {
 	}
 
 	getContentStyles( readableContentViewStyle ) {
-		const {
-			blockAlignment,
-			blockName,
-			hasParents,
-			parentBlockName,
-		} = this.props;
+		const { blockAlignment, blockName, hasParents, parentBlockName } =
+			this.props;
 		const { isFullWidth, isContainerRelated } = alignmentHelpers;
 
 		return [
@@ -121,6 +113,7 @@ export class BlockListItem extends Component {
 			blockWidth,
 			...restProps
 		} = this.props;
+
 		const readableContentViewStyle =
 			contentResizeMode === 'stretch' && stretchStyle;
 		const { isContainerRelated } = alignmentHelpers;
@@ -162,25 +155,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-selection-button.native.js

@@ -81,9 +81,8 @@ const BlockSelectionButton = ( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlockRootClientId, getBlockName, getSettings } = select(
-			blockEditorStore
-		);
+		const { getBlockRootClientId, getBlockName, getSettings } =
+			select( blockEditorStore );
 		const rootClientId = getBlockRootClientId( clientId );
 
 		if ( ! rootClientId ) {

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

@@ -269,10 +269,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
 		setAttributes( newAttributes ) {
-			const { getMultiSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
-			const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const { getMultiSelectedBlockClientIds } =
+				select( blockEditorStore );
+			const multiSelectedBlockClientIds =
+				getMultiSelectedBlockClientIds();
 			const { clientId } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
@@ -292,9 +292,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		},
 		onMerge( forward ) {
 			const { clientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId } = select(
-				blockEditorStore
-			);
+			const { getPreviousBlockClientId, getNextBlockClientId } =
+				select( blockEditorStore );
 
 			if ( forward ) {
 				const nextBlockClientId = getNextBlockClientId( clientId );
@@ -302,9 +301,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
 			} else {
-				const previousBlockClientId = getPreviousBlockClientId(
-					clientId
-				);
+				const previousBlockClientId =
+					getPreviousBlockClientId( clientId );
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
 				}

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,23 @@ class BlockListBlock extends Component {
 								] }
 							/>
 						) }
-						{ isValid ? (
-							this.getBlockForType()
-						) : (
-							<BlockInvalidWarning
-								blockTitle={ title }
-								icon={ icon }
-							/>
-						) }
+						<BlockDraggable
+							clientId={ clientId }
+							draggingClientId={ draggingClientId }
+							enabled={ draggingEnabled }
+							testID="draggable-trigger-content"
+						>
+							{ () =>
+								isValid ? (
+									this.getBlockForType()
+								) : (
+									<BlockInvalidWarning
+										blockTitle={ title }
+										icon={ icon }
+									/>
+								)
+							}
+						</BlockDraggable>
 						<View
 							style={ styles.neutralToolbar }
 							ref={ this.anchorNodeRef }
@@ -278,6 +290,7 @@ class BlockListBlock extends Component {
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
 									isFullWidth={ isFullWidthToolbar }
+									draggingClientId={ draggingClientId }
 								/>
 							) }
 						</View>
@@ -308,6 +321,7 @@ export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockIndex,
+			getBlockCount,
 			getSettings,
 			isBlockSelected,
 			getBlock,
@@ -315,6 +329,7 @@ export default compose( [
 			getLowestCommonAncestorWithSelectedBlock,
 			getBlockParents,
 			hasSelectedInnerBlock,
+			getBlockHierarchyRootClientId,
 		} = select( blockEditorStore );
 
 		const order = getBlockIndex( clientId );
@@ -332,9 +347,8 @@ export default compose( [
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
-		const commonAncestor = getLowestCommonAncestorWithSelectedBlock(
-			clientId
-		);
+		const commonAncestor =
+			getLowestCommonAncestorWithSelectedBlock( clientId );
 		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
 		const firstToSelectId = commonAncestor
 			? parents[ commonAncestorIndex ]
@@ -348,16 +362,27 @@ export default compose( [
 		const selectedParents = selectedBlockClientId
 			? getBlockParents( selectedBlockClientId )
 			: [];
-		const isDescendantOfParentSelected = selectedParents.includes(
-			parentId
-		);
+		const isDescendantOfParentSelected =
+			selectedParents.includes( parentId );
 		const isTouchable =
 			isSelected ||
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
-		const baseGlobalStyles = getSettings()
-			?.__experimentalGlobalStylesBaseStyles;
+		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,
@@ -366,6 +391,8 @@ export default compose( [
 			title,
 			attributes,
 			blockType,
+			draggingClientId,
+			draggingEnabled,
 			isSelected,
 			isInnerBlockSelected,
 			isValid,
@@ -391,10 +418,8 @@ export default compose( [
 		return {
 			mergeBlocks( forward ) {
 				const { clientId } = ownProps;
-				const {
-					getPreviousBlockClientId,
-					getNextBlockClientId,
-				} = select( blockEditorStore );
+				const { getPreviousBlockClientId, getNextBlockClientId } =
+					select( blockEditorStore );
 
 				if ( forward ) {
 					const nextBlockClientId = getNextBlockClientId( clientId );
@@ -402,9 +427,8 @@ export default compose( [
 						mergeBlocks( clientId, nextBlockClientId );
 					}
 				} else {
-					const previousBlockClientId = getPreviousBlockClientId(
-						clientId
-					);
+					const previousBlockClientId =
+						getPreviousBlockClientId( clientId );
 					if ( previousBlockClientId ) {
 						mergeBlocks( previousBlockClientId, clientId );
 					}