@wordpress/block-editor 8.5.7 → 9.1.0

package/src/components/block-draggable/dropping-insertion-point.native.js

@@ -0,0 +1,181 @@
+/**
+ * External dependencies
+ */
+import Animated, {
+	useSharedValue,
+	useAnimatedStyle,
+	withTiming,
+	useAnimatedReaction,
+	runOnJS,
+} from 'react-native-reanimated';
+import {
+	useSafeAreaInsets,
+	useSafeAreaFrame,
+} from 'react-native-safe-area-context';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { generateHapticFeedback } from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import styles from './dropping-insertion-point.scss';
+
+/**
+ * Dropping zone indicator component.
+ *
+ * This component shows where a block can be dropped when it's being dragged.
+ *
+ * @param {Object}                                        props                  Component props.
+ * @param {Object}                                        props.scroll           Scroll offset object.
+ * @param {Object}                                        props.currentYPosition Current Y coordinate position when dragging.
+ * @param {import('react-native-reanimated').SharedValue} props.isDragging       Whether or not dragging has started.
+ * @param {import('react-native-reanimated').SharedValue} props.targetBlockIndex Current block target index.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+export default function DroppingInsertionPoint( {
+	scroll,
+	currentYPosition,
+	isDragging,
+	targetBlockIndex,
+} ) {
+	const {
+		getBlockOrder,
+		isBlockBeingDragged,
+		isDraggingBlocks,
+		getPreviousBlockClientId,
+		getNextBlockClientId,
+	} = useSelect( blockEditorStore );
+
+	const { blocksLayouts, findBlockLayoutByClientId } = useBlockListContext();
+	const { top, bottom } = useSafeAreaInsets();
+	const { height } = useSafeAreaFrame();
+	const safeAreaOffset = top + bottom;
+	const maxHeight =
+		height -
+		( safeAreaOffset + styles[ 'dropping-insertion-point' ].height );
+
+	const blockYPosition = useSharedValue( 0 );
+	const opacity = useSharedValue( 0 );
+
+	useAnimatedReaction(
+		() => isDragging.value,
+		( value ) => {
+			if ( ! value ) {
+				opacity.value = 0;
+				blockYPosition.value = 0;
+			}
+		}
+	);
+
+	function getSelectedBlockIndicatorPosition( positions ) {
+		const currentYPositionWithScroll =
+			currentYPosition.value + scroll.offsetY.value;
+		const midpoint = ( positions.top + positions.bottom ) / 2;
+
+		return midpoint < currentYPositionWithScroll
+			? positions.bottom
+			: positions.top;
+	}
+
+	function setIndicatorPosition( index ) {
+		const insertionPointIndex = index;
+		const order = getBlockOrder();
+		const isDraggingAnyBlocks = isDraggingBlocks();
+
+		if (
+			! isDraggingAnyBlocks ||
+			insertionPointIndex === null ||
+			! order.length
+		) {
+			return;
+		}
+
+		let previousClientId = order[ insertionPointIndex - 1 ];
+		let nextClientId = order[ insertionPointIndex ];
+
+		while ( isBlockBeingDragged( previousClientId ) ) {
+			previousClientId = getPreviousBlockClientId( previousClientId );
+		}
+
+		while ( isBlockBeingDragged( nextClientId ) ) {
+			nextClientId = getNextBlockClientId( nextClientId );
+		}
+
+		const previousElement = previousClientId
+			? findBlockLayoutByClientId(
+					blocksLayouts.current,
+					previousClientId
+			  )
+			: null;
+		const nextElement = nextClientId
+			? findBlockLayoutByClientId( blocksLayouts.current, nextClientId )
+			: null;
+
+		const previousElementPosition = previousElement
+			? previousElement.y + previousElement.height
+			: 0;
+		const nextElementPosition = nextElement ? nextElement.y : 0;
+
+		const elementsPositions = {
+			top: Math.floor(
+				previousElement ? previousElementPosition : nextElementPosition
+			),
+			bottom: Math.floor(
+				nextElement ? nextElementPosition : previousElementPosition
+			),
+		};
+
+		const nextPosition =
+			elementsPositions.top !== elementsPositions.bottom
+				? getSelectedBlockIndicatorPosition( elementsPositions )
+				: elementsPositions.top;
+
+		if ( nextPosition && blockYPosition.value !== nextPosition ) {
+			opacity.value = 0;
+			blockYPosition.value = nextPosition;
+			opacity.value = withTiming( 1 );
+			generateHapticFeedback();
+		}
+	}
+
+	useAnimatedReaction(
+		() => targetBlockIndex.value,
+		( value, previous ) => {
+			if ( value !== previous ) {
+				runOnJS( setIndicatorPosition )( value );
+			}
+		}
+	);
+
+	const animatedStyles = useAnimatedStyle( () => {
+		const translationY = blockYPosition.value - scroll.offsetY.value;
+		// Prevents overflowing behind the header/footer
+		const shouldHideIndicator =
+			translationY < 0 || translationY > maxHeight;
+
+		return {
+			opacity: shouldHideIndicator ? 0 : opacity.value,
+			transform: [
+				{
+					translateY: translationY,
+				},
+			],
+		};
+	} );
+
+	const insertionPointStyles = [
+		styles[ 'dropping-insertion-point' ],
+		animatedStyles,
+	];
+
+	return (
+		<Animated.View pointerEvents="none" style={ insertionPointStyles } />
+	);
+}

package/src/components/block-draggable/dropping-insertion-point.native.scss

@@ -0,0 +1,8 @@
+.dropping-insertion-point {
+	position: absolute;
+	left: $dashed-border-space;
+	right: $dashed-border-space;
+	height: 3;
+	background-color: $blue-wordpress;
+	z-index: 1;
+}

package/src/components/block-draggable/index.native.js

@@ -0,0 +1,458 @@
+/**
+ * External dependencies
+ */
+import { AccessibilityInfo } from 'react-native';
+import {
+	useSafeAreaInsets,
+	useSafeAreaFrame,
+} from 'react-native-safe-area-context';
+import Animated, {
+	runOnJS,
+	runOnUI,
+	useAnimatedRef,
+	useAnimatedStyle,
+	useSharedValue,
+	withDelay,
+	withTiming,
+	ZoomInEasyDown,
+} from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { Draggable, DraggableTrigger } from '@wordpress/components';
+import { select, useSelect, useDispatch } from '@wordpress/data';
+import {
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	Platform,
+} from '@wordpress/element';
+import { getBlockType } from '@wordpress/blocks';
+import { generateHapticFeedback } from '@wordpress/react-native-bridge';
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useScrollWhenDragging from './use-scroll-when-dragging';
+import DraggableChip from './draggable-chip';
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import DroppingInsertionPoint from './dropping-insertion-point';
+import useBlockDropZone from '../use-block-drop-zone';
+import styles from './style.scss';
+
+const CHIP_OFFSET_TO_TOUCH_POSITION = 32;
+const BLOCK_OPACITY_ANIMATION_CONFIG = { duration: 350 };
+const BLOCK_OPACITY_ANIMATION_DELAY = 250;
+const DEFAULT_LONG_PRESS_MIN_DURATION = 500;
+const DEFAULT_IOS_LONG_PRESS_MIN_DURATION =
+	DEFAULT_LONG_PRESS_MIN_DURATION - 50;
+
+/**
+ * Block draggable wrapper component
+ *
+ * This component handles all the interactions for dragging blocks.
+ * It relies on the block list and its context for dragging, hence it
+ * should be rendered between the `BlockListProvider` component and the
+ * block list rendering. It also requires listening to scroll events,
+ * therefore for this purpose, it returns the `onScroll` event handler
+ * that should be attached to the list that renders the blocks.
+ *
+ *
+ * @param {Object}      props          Component props.
+ * @param {JSX.Element} props.children Children to be rendered.
+ * @param {boolean}     props.isRTL    Check if current locale is RTL.
+ *
+ * @return {Function} Render function that passes `onScroll` event handler.
+ */
+const BlockDraggableWrapper = ( { children, isRTL } ) => {
+	const [ draggedBlockIcon, setDraggedBlockIcon ] = useState();
+
+	const {
+		selectBlock,
+		startDraggingBlocks,
+		stopDraggingBlocks,
+	} = useDispatch( blockEditorStore );
+
+	const { scrollRef } = useBlockListContext();
+	const animatedScrollRef = useAnimatedRef();
+	const { left, right } = useSafeAreaInsets();
+	const { width } = useSafeAreaFrame();
+	const safeAreaOffset = left + right;
+	const contentWidth = width - safeAreaOffset;
+	animatedScrollRef( scrollRef );
+
+	const scroll = {
+		offsetY: useSharedValue( 0 ),
+	};
+	const chip = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+		width: useSharedValue( 0 ),
+		height: useSharedValue( 0 ),
+	};
+	const currentYPosition = useSharedValue( 0 );
+	const isDragging = useSharedValue( false );
+
+	const [
+		startScrolling,
+		scrollOnDragOver,
+		stopScrolling,
+		draggingScrollHandler,
+	] = useScrollWhenDragging();
+
+	const scrollHandler = ( event ) => {
+		'worklet';
+		const { contentOffset } = event;
+		scroll.offsetY.value = contentOffset.y;
+
+		draggingScrollHandler( event );
+	};
+
+	const {
+		onBlockDragOver,
+		onBlockDragEnd,
+		onBlockDrop,
+		targetBlockIndex,
+	} = useBlockDropZone();
+
+	// Stop dragging blocks if the block draggable is unmounted.
+	useEffect( () => {
+		return () => {
+			if ( isDragging.value ) {
+				stopDraggingBlocks();
+			}
+		};
+	}, [] );
+
+	const setDraggedBlockIconByClientId = ( clientId ) => {
+		const blockName = select( blockEditorStore ).getBlockName( clientId );
+		const blockIcon = getBlockType( blockName )?.icon;
+		if ( blockIcon ) {
+			setDraggedBlockIcon( blockIcon );
+		}
+	};
+
+	const onStartDragging = ( { clientId, position } ) => {
+		if ( clientId ) {
+			startDraggingBlocks( [ clientId ] );
+			setDraggedBlockIconByClientId( clientId );
+			runOnUI( startScrolling )( position.y );
+			generateHapticFeedback();
+		} else {
+			// We stop dragging if no block is found.
+			runOnUI( stopDragging )();
+		}
+	};
+
+	const onStopDragging = ( { clientId } ) => {
+		if ( clientId ) {
+			onBlockDrop( {
+				// Dropping is only allowed at root level
+				srcRootClientId: '',
+				srcClientIds: [ clientId ],
+				type: 'block',
+			} );
+			selectBlock( clientId );
+			setDraggedBlockIcon( undefined );
+		}
+		onBlockDragEnd();
+		stopDraggingBlocks();
+	};
+
+	const onChipLayout = ( { nativeEvent: { layout } } ) => {
+		if ( layout.width > 0 ) {
+			chip.width.value = layout.width;
+		}
+		if ( layout.height > 0 ) {
+			chip.height.value = layout.height;
+		}
+	};
+
+	const startDragging = ( { x, y, id } ) => {
+		'worklet';
+		const dragPosition = { x, y };
+		chip.x.value = dragPosition.x;
+		chip.y.value = dragPosition.y;
+		currentYPosition.value = dragPosition.y;
+
+		isDragging.value = true;
+
+		runOnJS( onStartDragging )( { clientId: id, position: dragPosition } );
+	};
+
+	const updateDragging = ( { x, y } ) => {
+		'worklet';
+		const dragPosition = { x, y };
+		chip.x.value = dragPosition.x;
+		chip.y.value = dragPosition.y;
+		currentYPosition.value = dragPosition.y;
+
+		runOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );
+
+		// Update scrolling velocity
+		scrollOnDragOver( dragPosition.y );
+	};
+
+	const stopDragging = ( { id } ) => {
+		'worklet';
+		isDragging.value = false;
+
+		stopScrolling();
+		runOnJS( onStopDragging )( { clientId: id } );
+	};
+
+	const chipDynamicStyles = useAnimatedStyle( () => {
+		const chipOffset = chip.width.value / 2;
+		const translateX = ! isRTL
+			? chip.x.value - chipOffset
+			: -( contentWidth - ( chip.x.value + chipOffset ) );
+
+		return {
+			transform: [
+				{
+					translateX,
+				},
+				{
+					translateY:
+						chip.y.value -
+						chip.height.value -
+						CHIP_OFFSET_TO_TOUCH_POSITION,
+				},
+			],
+		};
+	} );
+	const chipStyles = [
+		chipDynamicStyles,
+		styles[ 'draggable-chip__wrapper' ],
+	];
+
+	const exitingAnimation = ( { currentHeight, currentWidth } ) => {
+		'worklet';
+		const translateX = ! isRTL ? 0 : currentWidth * -1;
+		const duration = 150;
+		const animations = {
+			transform: [
+				{
+					translateY: withTiming( currentHeight, {
+						duration,
+					} ),
+				},
+				{
+					translateX: withTiming( translateX, {
+						duration,
+					} ),
+				},
+				{ scale: withTiming( 0, { duration } ) },
+			],
+		};
+		const initialValues = {
+			transform: [ { translateY: 0 }, { translateX }, { scale: 1 } ],
+		};
+		return {
+			initialValues,
+			animations,
+		};
+	};
+
+	return (
+		<>
+			<DroppingInsertionPoint
+				scroll={ scroll }
+				currentYPosition={ currentYPosition }
+				isDragging={ isDragging }
+				targetBlockIndex={ targetBlockIndex }
+			/>
+			<Draggable
+				onDragStart={ startDragging }
+				onDragOver={ updateDragging }
+				onDragEnd={ stopDragging }
+			>
+				{ children( { onScroll: scrollHandler } ) }
+			</Draggable>
+			<Animated.View
+				onLayout={ onChipLayout }
+				style={ chipStyles }
+				pointerEvents="none"
+			>
+				{ draggedBlockIcon && (
+					<Animated.View
+						entering={ ZoomInEasyDown.duration( 200 ) }
+						exiting={ exitingAnimation }
+					>
+						<DraggableChip icon={ draggedBlockIcon } />
+					</Animated.View>
+				) }
+			</Animated.View>
+		</>
+	);
+};
+
+/**
+ * Block draggable component
+ *
+ * This component serves for animating the block when it is being dragged.
+ * Hence, it should be wrapped around the rendering of a block.
+ *
+ * @param {Object}      props                    Component props.
+ * @param {JSX.Element} props.children           Children to be rendered.
+ * @param {string}      props.clientId           Client id of the block.
+ * @param {string}      [props.draggingClientId] Client id to use for dragging. If not defined, the value from `clientId` will be used.
+ * @param {boolean}     [props.enabled]          Enables the draggable trigger.
+ *
+ * @return {Function} Render function which includes the parameter `isDraggable` to determine if the block can be dragged.
+ */
+const BlockDraggable = ( {
+	clientId,
+	children,
+	draggingClientId,
+	enabled = true,
+} ) => {
+	const wasBeingDragged = useRef( false );
+	const [ isEditingText, setIsEditingText ] = useState( false );
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
+		false
+	);
+
+	const draggingAnimation = {
+		opacity: useSharedValue( 1 ),
+	};
+
+	const startDraggingBlock = () => {
+		draggingAnimation.opacity.value = withTiming(
+			0.4,
+			BLOCK_OPACITY_ANIMATION_CONFIG
+		);
+	};
+
+	const stopDraggingBlock = () => {
+		draggingAnimation.opacity.value = withDelay(
+			BLOCK_OPACITY_ANIMATION_DELAY,
+			withTiming( 1, BLOCK_OPACITY_ANIMATION_CONFIG )
+		);
+	};
+
+	const { isDraggable, isBeingDragged, isBlockSelected } = useSelect(
+		( _select ) => {
+			const {
+				getBlockRootClientId,
+				getTemplateLock,
+				isBlockBeingDragged,
+				getSelectedBlockClientId,
+			} = _select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			const templateLock = rootClientId
+				? getTemplateLock( rootClientId )
+				: null;
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				isBeingDragged: isBlockBeingDragged( clientId ),
+				isDraggable: 'all' !== templateLock,
+				isBlockSelected:
+					selectedBlockClientId && selectedBlockClientId === clientId,
+			};
+		},
+		[ clientId ]
+	);
+
+	useEffect( () => {
+		if ( isBeingDragged !== wasBeingDragged.current ) {
+			if ( isBeingDragged ) {
+				startDraggingBlock();
+			} else {
+				stopDraggingBlock();
+			}
+		}
+		wasBeingDragged.current = isBeingDragged;
+	}, [ isBeingDragged ] );
+
+	const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
+		setIsEditingText( isFocused );
+	}, [] );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
+		if ( isAnyAztecInputFocused ) {
+			setIsEditingText( isAnyAztecInputFocused );
+		}
+
+		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		const screenReaderChangedListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			setIsScreenReaderEnabled
+		);
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			RCTAztecView.InputState.removeFocusChangeListener(
+				onFocusChangeAztec
+			);
+
+			screenReaderChangedListener.remove();
+		};
+	}, [] );
+
+	const onLongPressDraggable = useCallback( () => {
+		// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
+		RCTAztecView.InputState.blurCurrentFocusedElement();
+	}, [] );
+
+	const animatedWrapperStyles = useAnimatedStyle( () => {
+		return {
+			opacity: draggingAnimation.opacity.value,
+		};
+	} );
+	const wrapperStyles = [
+		animatedWrapperStyles,
+		styles[ 'draggable-wrapper__container' ],
+	];
+
+	const canDragBlock =
+		enabled &&
+		! isScreenReaderEnabled &&
+		( ! isBlockSelected || ! isEditingText );
+
+	if ( ! isDraggable ) {
+		return children( { isDraggable: false } );
+	}
+
+	return (
+		<DraggableTrigger
+			id={ draggingClientId || clientId }
+			enabled={ enabled && canDragBlock }
+			minDuration={ Platform.select( {
+				// On iOS, using a lower min duration than the default
+				// value prevents the long-press gesture from being
+				// triggered in underneath elements. This is required to
+				// prevent enabling text editing when dragging is available.
+				ios: canDragBlock
+					? DEFAULT_IOS_LONG_PRESS_MIN_DURATION
+					: DEFAULT_LONG_PRESS_MIN_DURATION,
+				android: DEFAULT_LONG_PRESS_MIN_DURATION,
+			} ) }
+			onLongPress={ onLongPressDraggable }
+		>
+			<Animated.View style={ wrapperStyles }>
+				{ children( { isDraggable: true } ) }
+			</Animated.View>
+		</DraggableTrigger>
+	);
+};
+
+export { BlockDraggableWrapper };
+export default BlockDraggable;

package/src/components/block-draggable/style.native.scss

@@ -0,0 +1,19 @@
+.draggable-wrapper__container {
+	flex: 1;
+}
+
+.draggable-chip__wrapper {
+	position: absolute;
+	z-index: 10;
+}
+
+.draggable-chip__container {
+	flex-direction: row;
+	padding: 16px;
+	background-color: $gray-0;
+	border-radius: 8px;
+}
+
+.draggable-chip__container--dark {
+	background-color: $app-background-dark-alt;
+}