@wordpress/block-editor 9.0.0 → 9.3.0

package/src/components/block-content-overlay/index.js

@@ -2,114 +2,24 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-export default function BlockContentOverlay( {
-	clientId,
-	tagName: TagName = 'div',
-	wrapperProps,
-	className,
-} ) {
-	const baseClassName = 'block-editor-block-content-overlay';
-	const [ isOverlayActive, setIsOverlayActive ] = useState( true );
-	const [ isHovered, setIsHovered ] = useState( false );
-
-	const {
-		canEdit,
-		isParentSelected,
-		hasChildSelected,
-		isDraggingBlocks,
-		isParentHighlighted,
-	} = useSelect(
+export default function useBlockOverlayActive( clientId ) {
+	return useSelect(
 		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				isDraggingBlocks: _isDraggingBlocks,
-				isBlockHighlighted,
-				canEditBlock,
-			} = select( blockEditorStore );
-			return {
-				canEdit: canEditBlock( clientId ),
-				isParentSelected: isBlockSelected( clientId ),
-				hasChildSelected: hasSelectedInnerBlock( clientId, true ),
-				isDraggingBlocks: _isDraggingBlocks(),
-				isParentHighlighted: isBlockHighlighted( clientId ),
-			};
+			const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } =
+				select( blockEditorStore );
+
+			return (
+				! canEditBlock( clientId ) ||
+				( ! isBlockSelected( clientId ) &&
+					! hasSelectedInnerBlock( clientId, true ) )
+			);
 		},
 		[ clientId ]
 	);
-
-	const classes = classnames(
-		baseClassName,
-		wrapperProps?.className,
-		className,
-		{
-			'overlay-active': isOverlayActive,
-			'parent-highlighted': isParentHighlighted,
-			'is-dragging-blocks': isDraggingBlocks,
-		}
-	);
-
-	useEffect( () => {
-		// The overlay is always active when editing is locked.
-		if ( ! canEdit ) {
-			setIsOverlayActive( true );
-			return;
-		}
-
-		// Reenable when blocks are not in use.
-		if ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {
-			setIsOverlayActive( true );
-		}
-		// Disable if parent selected by another means (such as list view).
-		// We check hover to ensure the overlay click interaction is not taking place.
-		// Trying to click the overlay will select the parent block via its 'focusin'
-		// listener on the wrapper, so if the block is selected while hovered we will
-		// let the mouseup disable the overlay instead.
-		if ( isParentSelected && ! isHovered && isOverlayActive ) {
-			setIsOverlayActive( false );
-		}
-		// Ensure overlay is disabled if a child block is selected.
-		if ( hasChildSelected && isOverlayActive ) {
-			setIsOverlayActive( false );
-		}
-	}, [
-		isParentSelected,
-		hasChildSelected,
-		isOverlayActive,
-		isHovered,
-		canEdit,
-	] );
-
-	// Disabled because the overlay div doesn't actually have a role or functionality
-	// as far as the a11y is concerned. We're just catching the first click so that
-	// the block can be selected without interacting with its contents.
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
-	return (
-		<TagName
-			{ ...wrapperProps }
-			className={ classes }
-			onMouseEnter={ () => setIsHovered( true ) }
-			onMouseLeave={ () => setIsHovered( false ) }
-			onMouseUp={
-				isOverlayActive && canEdit
-					? () => setIsOverlayActive( false )
-					: undefined
-			}
-		>
-			{ wrapperProps?.children }
-		</TagName>
-	);
 }
-/* eslint-enable jsx-a11y/no-static-element-interactions */

package/src/components/block-content-overlay/style.scss

@@ -1,5 +1,5 @@
 .block-editor-block-content-overlay {
-	&.overlay-active::before {
+	&::before {
 		content: "";
 		position: absolute;
 		top: 0;
@@ -12,17 +12,8 @@
 		z-index: z-index(".block-editor-block-content-overlay__overlay");
 	}
 
-	&:hover:not(.is-dragging-blocks).overlay-active::before,
-	&.parent-highlighted.overlay-active::before {
+	&:hover:not(.is-dragging-blocks)::before {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
-
-	&.overlay-active:not(.is-dragging-blocks) * {
-		pointer-events: none;
-	}
-
-	&.is-dragging-blocks {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
 }

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

@@ -25,10 +25,10 @@ const Context = createContext( {} );
  */
 export function BlockContextProvider( { value, children } ) {
 	const context = useContext( Context );
-	const nextValue = useMemo( () => ( { ...context, ...value } ), [
-		context,
-		value,
-	] );
+	const nextValue = useMemo(
+		() => ( { ...context, ...value } ),
+		[ context, value ]
+	);
 
 	return <Context.Provider value={ nextValue } children={ children } />;
 }

package/src/components/block-controls/hook.js

@@ -17,9 +17,8 @@ export default function useBlockControlsFill( group, shareWithChildBlocks ) {
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
 		( select ) => {
-			const { getBlockName, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockName, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
 			return (
 				shareWithChildBlocks &&

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

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { dragHandle } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import styles from './style.scss';
+
+const shadowStyle = {
+	shadowColor: '#000',
+	shadowOffset: {
+		width: 0,
+		height: 2,
+	},
+	shadowOpacity: 0.25,
+	shadowRadius: 3.84,
+
+	elevation: 5,
+};
+
+/**
+ * Block draggable chip component
+ *
+ * @param {Object} props        Component props.
+ * @param {Object} [props.icon] Block icon.
+ * @return {JSX.Element} Chip component.
+ */
+export default function BlockDraggableChip( { icon } ) {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles[ 'draggable-chip__container' ],
+		styles[ 'draggable-chip__container--dark' ]
+	);
+
+	return (
+		<View style={ [ containerStyle, shadowStyle ] } testID="draggable-chip">
+			<BlockIcon icon={ dragHandle } />
+			{ icon && <BlockIcon icon={ icon } /> }
+		</View>
+	);
+}

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.js

@@ -22,11 +22,8 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const {
-				canMoveBlocks,
-				getBlockRootClientId,
-				getBlockName,
-			} = select( blockEditorStore );
+			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 
@@ -39,15 +36,11 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 	const isDragging = useRef( false );
-	const [
-		startScrolling,
-		scrollOnDragOver,
-		stopScrolling,
-	] = useScrollWhenDragging();
+	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
+		useScrollWhenDragging();
 
-	const { startDraggingBlocks, stopDraggingBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { startDraggingBlocks, stopDraggingBlocks } =
+		useDispatch( blockEditorStore );
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {