Fix drag and drop indicator above first block and RTL drop indicators (…

…#33024) * Update logic * RTL and block appender fixes * Fix RTL positioning calculations * Avoid adding wp-block to the appender
WordPress · Jun 28, 2021 · 962e084 · 962e084
1 parent d2111e0
commit 962e084
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -94,11 +94,7 @@ function BlockListAppender( {
 			// Prevent the block from being selected when the appender is
 			// clicked.
 			onFocus={ stopPropagation }
-			className={ classnames(
-				'block-list-appender',
-				'wp-block',
-				className
-			) }
+			className={ classnames( 'block-list-appender', className ) }
 		>
 			{ appender }
 		</TagName>

diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -79,86 +79,101 @@ function InsertionPointPopover( {
 	}, [] );
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
+
 	const style = useMemo( () => {
-		if ( ! previousElement ) {
+		if ( ! previousElement && ! nextElement ) {
 			return {};
 		}
-		const previousRect = previousElement.getBoundingClientRect();
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
 		const nextRect = nextElement
 			? nextElement.getBoundingClientRect()
 			: null;
 
 		if ( orientation === 'vertical' ) {
 			return {
-				width: previousElement.offsetWidth,
-				height: nextRect ? nextRect.top - previousRect.bottom : 0,
+				width: previousElement
+					? previousElement.offsetWidth
+					: nextElement.offsetWidth,
+				height:
+					nextRect && previousRect
+						? nextRect.top - previousRect.bottom
+						: 0,
 			};
 		}
 
 		let width = 0;
-		if ( nextElement ) {
+		if ( previousRect && nextRect ) {
 			width = isRTL()
 				? previousRect.left - nextRect.right
 				: nextRect.left - previousRect.right;
 		}
 
 		return {
 			width,
-			height: previousElement.offsetHeight,
+			height: previousElement
+				? previousElement.offsetHeight
+				: nextElement.offsetHeight,
 		};
 	}, [ previousElement, nextElement ] );
 
 	const getAnchorRect = useCallback( () => {
-		const { ownerDocument } = previousElement;
-		const previousRect = previousElement.getBoundingClientRect();
+		if ( ! previousElement && ! nextElement ) {
+			return {};
+		}
+
+		const { ownerDocument } = previousElement || nextElement;
+
+		const previousRect = previousElement
+			? previousElement.getBoundingClientRect()
+			: null;
 		const nextRect = nextElement
 			? nextElement.getBoundingClientRect()
 			: null;
+
 		if ( orientation === 'vertical' ) {
 			if ( isRTL() ) {
 				return {
-					top: previousRect.bottom,
-					left: previousRect.right,
-					right: previousRect.left,
+					top: previousRect ? previousRect.bottom : nextRect.top,
+					left: previousRect ? previousRect.right : nextRect.right,
+					right: previousRect ? previousRect.left : nextRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
 					ownerDocument,
 				};
 			}
 
 			return {
-				top: previousRect.bottom,
-				left: previousRect.left,
-				right: previousRect.right,
+				top: previousRect ? previousRect.bottom : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.left,
+				right: previousRect ? previousRect.right : nextRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
 				ownerDocument,
 			};
 		}
 
 		if ( isRTL() ) {
 			return {
-				top: previousRect.top,
-				left: nextRect ? nextRect.right : previousRect.left,
-				right: previousRect.left,
-				bottom: previousRect.bottom,
+				top: previousRect ? previousRect.top : nextRect.top,
+				left: previousRect ? previousRect.left : nextRect.right,
+				right: nextRect ? nextRect.right : previousRect.left,
+				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
 				ownerDocument,
 			};
 		}
 
 		return {
-			top: previousRect.top,
-			left: previousRect.right,
+			top: previousRect ? previousRect.top : nextRect.top,
+			left: previousRect ? previousRect.right : nextRect.left,
 			right: nextRect ? nextRect.left : previousRect.right,
-			bottom: previousRect.bottom,
+			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
 			ownerDocument,
 		};
 	}, [ previousElement, nextElement ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement ) {
-		return null;
-	}
-
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
 		'is-' + orientation
@@ -178,10 +193,10 @@ function InsertionPointPopover( {
 		}
 	}
 
-	// Only show the inserter when there's a `nextElement` (a block after the
-	// insertion point). At the end of the block list the trailing appender
-	// should serve the purpose of inserting blocks.
-	const showInsertionPointInserter = nextElement && isInserterShown;
+	// Only show the in-between inserter between blocks, so when there's a
+	// previous and a next element.
+	const showInsertionPointInserter =
+		previousElement && nextElement && isInserterShown;
 
 	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	// While ideally it would be enough to capture the

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -7,6 +7,7 @@ import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -39,6 +40,8 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 			? [ 'left', 'right' ]
 			: [ 'top', 'bottom' ];
 
+	const isRightToLeft = isRTL();
+
 	let candidateIndex;
 	let candidateDistance;
 
@@ -53,7 +56,12 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 		if ( candidateDistance === undefined || distance < candidateDistance ) {
 			// If the user is dropping to the trailing edge of the block
 			// add 1 to the index to represent dragging after.
-			const isTrailingEdge = edge === 'bottom' || edge === 'right';
+			// Take RTL languages into account where the left edge is
+			// the trailing edge.
+			const isTrailingEdge =
+				edge === 'bottom' ||
+				( ! isRightToLeft && edge === 'right' ) ||
+				( isRightToLeft && edge === 'left' );
 			const offset = isTrailingEdge ? 1 : 0;
 
 			// Update the currently known best candidate.