@wordpress/block-editor 8.6.0 → 9.2.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,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 );
@@ -359,6 +374,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 +393,8 @@ export default compose( [
 			title,
 			attributes,
 			blockType,
+			draggingClientId,
+			draggingEnabled,
 			isSelected,
 			isInnerBlockSelected,
 			isValid,

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
 import { createContext, useState, useMemo } from '@wordpress/element';
 
@@ -48,6 +48,23 @@ function Root( { className, ...settings } ) {
 		},
 		[]
 	);
+	const { setBlockVisibility } = useDispatch( blockEditorStore );
+	const intersectionObserver = useMemo( () => {
+		const { IntersectionObserver: Observer } = window;
+
+		if ( ! Observer ) {
+			return;
+		}
+
+		return new Observer( ( entries ) => {
+			const updates = {};
+			for ( const entry of entries ) {
+				const clientId = entry.target.getAttribute( 'data-block' );
+				updates[ clientId ] = entry.isIntersecting;
+			}
+			setBlockVisibility( updates );
+		} );
+	}, [] );
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			ref: useMergeRefs( [
@@ -65,7 +82,9 @@ function Root( { className, ...settings } ) {
 	);
 	return (
 		<elementContext.Provider value={ element }>
-			<div { ...innerBlocksProps } />
+			<IntersectionObserver.Provider value={ intersectionObserver }>
+				<div { ...innerBlocksProps } />
+			</IntersectionObserver.Provider>
 		</elementContext.Provider>
 	);
 }
@@ -90,34 +109,17 @@ function Items( {
 	__experimentalAppenderTagName,
 	__experimentalLayout: layout = defaultLayout,
 } ) {
-	const [ intersectingBlocks, setIntersectingBlocks ] = useState( new Set() );
-	const intersectionObserver = useMemo( () => {
-		const { IntersectionObserver: Observer } = window;
-
-		if ( ! Observer ) {
-			return;
-		}
-
-		return new Observer( ( entries ) => {
-			setIntersectingBlocks( ( oldIntersectingBlocks ) => {
-				const newIntersectingBlocks = new Set( oldIntersectingBlocks );
-				for ( const entry of entries ) {
-					const clientId = entry.target.getAttribute( 'data-block' );
-					const action = entry.isIntersecting ? 'add' : 'delete';
-					newIntersectingBlocks[ action ]( clientId );
-				}
-				return newIntersectingBlocks;
-			} );
-		} );
-	}, [ setIntersectingBlocks ] );
-	const { order, selectedBlocks } = useSelect(
+	const { order, selectedBlocks, visibleBlocks } = useSelect(
 		( select ) => {
-			const { getBlockOrder, getSelectedBlockClientIds } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockOrder,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+			} = select( blockEditorStore );
 			return {
 				order: getBlockOrder( rootClientId ),
 				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
 			};
 		},
 		[ rootClientId ]
@@ -125,24 +127,22 @@ function Items( {
 
 	return (
 		<LayoutProvider value={ layout }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				{ order.map( ( clientId ) => (
-					<AsyncModeProvider
-						key={ clientId }
-						value={
-							// Only provide data asynchronously if the block is
-							// not visible and not selected.
-							! intersectingBlocks.has( clientId ) &&
-							! selectedBlocks.includes( clientId )
-						}
-					>
-						<BlockListBlock
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-						/>
-					</AsyncModeProvider>
-				) ) }
-			</IntersectionObserver.Provider>
+			{ order.map( ( clientId ) => (
+				<AsyncModeProvider
+					key={ clientId }
+					value={
+						// Only provide data asynchronously if the block is
+						// not visible and not selected.
+						! visibleBlocks.has( clientId ) &&
+						! selectedBlocks.includes( clientId )
+					}
+				>
+					<BlockListBlock
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+					/>
+				</AsyncModeProvider>
+			) ) }
 			{ order.length < 1 && placeholder }
 			<BlockListAppender
 				tagName={ __experimentalAppenderTagName }