diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index e393710dc5a47..db2653b031bc7 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -23,7 +23,11 @@ import { isRTL } from '@wordpress/i18n';
import Inserter from '../inserter';
import { getBlockDOMNode } from '../../utils/dom';
-function InsertionPointInserter( { clientId, setIsInserterForced } ) {
+function InsertionPointInserter( {
+ clientId,
+ rootClientId,
+ setIsInserterForced,
+} ) {
return (
setIsInserterForced( false ) }
@@ -43,7 +48,7 @@ function InsertionPointInserter( { clientId, setIsInserterForced } ) {
function InsertionPointPopover( {
clientId,
- rootClientId,
+ selectedRootClientId,
isInserterShown,
isInserterForced,
setIsInserterForced,
@@ -53,7 +58,14 @@ function InsertionPointPopover( {
const { selectBlock } = useDispatch( 'core/block-editor' );
const ref = useRef();
- const { previousElement, nextElement, orientation, isHidden } = useSelect(
+ const {
+ previousElement,
+ nextElement,
+ orientation,
+ isHidden,
+ nextClientId,
+ rootClientId,
+ } = useSelect(
( select ) => {
const {
getBlockOrder,
@@ -67,15 +79,18 @@ function InsertionPointPopover( {
const { ownerDocument } = containerRef.current;
const targetRootClientId = clientId
? getBlockRootClientId( clientId )
- : rootClientId;
+ : selectedRootClientId;
const blockOrder = getBlockOrder( targetRootClientId );
- if ( blockOrder.length < 2 ) {
+ if ( ! blockOrder.length ) {
return {};
}
- const next = clientId
+ const previous = clientId
? clientId
: blockOrder[ blockOrder.length - 1 ];
- const previous = blockOrder[ blockOrder.indexOf( next ) - 1 ];
+ const isLast = previous === blockOrder[ blockOrder.length - 1 ];
+ const next = isLast
+ ? null
+ : blockOrder[ blockOrder.indexOf( previous ) + 1 ];
const { hasReducedUI } = getSettings();
const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds();
const selectedBlockClientId = getSelectedBlockClientId();
@@ -86,53 +101,77 @@ function InsertionPointPopover( {
return {
previousElement: getBlockDOMNode( previous, ownerDocument ),
nextElement: getBlockDOMNode( next, ownerDocument ),
+ nextClientId: next,
isHidden:
hasReducedUI ||
( hasMultiSelection()
- ? multiSelectedBlockClientIds.includes( clientId )
- : blockOrientation === 'vertical' &&
- clientId === selectedBlockClientId ),
+ ? next && multiSelectedBlockClientIds.includes( next )
+ : next &&
+ blockOrientation === 'vertical' &&
+ next === selectedBlockClientId ),
orientation: blockOrientation,
+ rootClientId: targetRootClientId,
};
},
- [ clientId, rootClientId ]
+ [ clientId, selectedRootClientId ]
);
const style = useMemo( () => {
- if ( ! previousElement || ! nextElement ) {
+ if ( ! previousElement ) {
return {};
}
const previousRect = previousElement.getBoundingClientRect();
- const nextRect = nextElement.getBoundingClientRect();
-
- return orientation === 'vertical'
- ? {
- width: previousElement.offsetWidth,
- height: nextRect.top - previousRect.bottom,
- }
- : {
- width: isRTL()
- ? previousRect.left - nextRect.right
- : nextRect.left - previousRect.right,
- height: previousElement.offsetHeight,
- };
+ const nextRect = nextElement
+ ? nextElement.getBoundingClientRect()
+ : null;
+
+ if ( orientation === 'vertical' ) {
+ return {
+ width: previousElement.offsetWidth,
+ height: nextRect ? nextRect.top - previousRect.bottom : 0,
+ };
+ }
+
+ let width = 0;
+ if ( nextElement ) {
+ width = isRTL()
+ ? previousRect.left - nextRect.right
+ : nextRect.left - previousRect.right;
+ }
+
+ return {
+ width,
+ height: previousElement.offsetHeight,
+ };
}, [ previousElement, nextElement ] );
const getAnchorRect = useCallback( () => {
const previousRect = previousElement.getBoundingClientRect();
- const nextRect = nextElement.getBoundingClientRect();
+ const nextRect = nextElement
+ ? nextElement.getBoundingClientRect()
+ : null;
if ( orientation === 'vertical' ) {
return {
top: previousRect.bottom,
left: previousRect.left,
right: previousRect.right,
- bottom: nextRect.top,
+ bottom: nextRect ? nextRect.top : previousRect.bottom,
+ };
+ }
+
+ if ( isRTL() ) {
+ return {
+ top: previousRect.top,
+ left: nextRect ? nextRect.right : previousRect.left,
+ right: previousRect.left,
+ bottom: previousRect.bottom,
};
}
+
return {
top: previousRect.top,
- left: isRTL() ? nextRect.right : previousRect.right,
- right: isRTL() ? previousRect.left : nextRect.left,
+ left: previousRect.right,
+ right: nextRect ? nextRect.left : previousRect.right,
bottom: previousRect.bottom,
};
}, [ previousElement, nextElement ] );
@@ -147,8 +186,8 @@ function InsertionPointPopover( {
);
function onClick( event ) {
- if ( event.target === ref.current ) {
- selectBlock( clientId, -1 );
+ if ( event.target === ref.current && nextClientId ) {
+ selectBlock( nextClientId, -1 );
}
}
@@ -192,7 +231,8 @@ function InsertionPointPopover( {
) }
{ ! isHidden && ( isInserterShown || isInserterForced ) && (
) }
@@ -228,7 +268,7 @@ export default function useInsertionPoint( ref ) {
getBlockListSettings: _getBlockListSettings,
isMultiSelecting: _isMultiSelecting(),
isInserterVisible: isBlockInsertionPointVisible(),
- selectedClientId: order[ insertionPoint.index ],
+ selectedClientId: order[ insertionPoint.index - 1 ],
selectedRootClientId: insertionPoint.rootClientId,
};
}, [] );
@@ -261,16 +301,20 @@ export default function useInsertionPoint( ref ) {
const rect = event.target.getBoundingClientRect();
const offsetTop = event.clientY - rect.top;
const offsetLeft = event.clientX - rect.left;
- let element = Array.from( event.target.children ).find(
- ( blockEl ) => {
- return (
- ( orientation === 'vertical' &&
- blockEl.offsetTop > offsetTop ) ||
- ( orientation === 'horizontal' &&
- blockEl.offsetLeft > offsetLeft )
- );
- }
- );
+
+ const children = Array.from( event.target.children );
+ const nextElement = children.find( ( blockEl ) => {
+ return (
+ ( orientation === 'vertical' &&
+ blockEl.offsetTop > offsetTop ) ||
+ ( orientation === 'horizontal' &&
+ blockEl.offsetLeft > offsetLeft )
+ );
+ } );
+
+ let element = nextElement
+ ? children[ children.indexOf( nextElement ) - 1 ]
+ : children[ children.length - 1 ];
if ( ! element ) {
return;
@@ -337,7 +381,7 @@ export default function useInsertionPoint( ref ) {
clientId={
isInserterVisible ? selectedClientId : inserterClientId
}
- rootClientId={ selectedRootClientId }
+ selectedRootClientId={ selectedRootClientId }
isInserterShown={ isInserterShown }
isInserterForced={ isInserterForced }
setIsInserterForced={ ( value ) => {
diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
index 3fd2fe3c744a5..7db8bb38e1cc0 100644
--- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -64,7 +64,6 @@ describe( 'Widgets screen', () => {
return addParagraphBlock;
}
- /*
async function expectInsertionPointIndicatorToBeBelowLastBlock(
widgetArea
) {
@@ -82,7 +81,6 @@ describe( 'Widgets screen', () => {
insertionPointIndicatorBoundingBox.y > lastBlockBoundingBox.y
).toBe( true );
}
- */
async function getInlineInserterButton() {
return await page.waitForSelector(
@@ -124,9 +122,9 @@ describe( 'Widgets screen', () => {
addParagraphBlock = await getParagraphBlockInGlobalInserter();
await addParagraphBlock.hover();
- /*await expectInsertionPointIndicatorToBeBelowLastBlock(
+ await expectInsertionPointIndicatorToBeBelowLastBlock(
firstWidgetArea
- );*/
+ );
await addParagraphBlock.click();
await page.keyboard.type( 'Second Paragraph' );