diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index 9ad8ff2ee624e..28b96308abd78 100644 --- 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 } diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index b836beba7d3ae..3739e81ff9ad0 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -79,24 +79,33 @@ 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; @@ -104,31 +113,41 @@ function InsertionPointPopover( { 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, }; @@ -136,29 +155,25 @@ function InsertionPointPopover( { 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 index a034f1af2d7e7..f9edab7273353 100644 --- 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.