Skip to content

Commit

Permalink
Show insertion point after the last block in a container (#28418)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Jan 27, 2021
1 parent b27ce2a commit 30fafd0
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 48 deletions.
132 changes: 88 additions & 44 deletions packages/block-editor/src/components/block-list/insertion-point.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div
className={ classnames(
Expand All @@ -33,6 +37,7 @@ function InsertionPointInserter( { clientId, setIsInserterForced } ) {
<Inserter
position="bottom center"
clientId={ clientId }
rootClientId={ rootClientId }
__experimentalIsQuick
onToggle={ setIsInserterForced }
onSelectOrClose={ () => setIsInserterForced( false ) }
Expand All @@ -43,7 +48,7 @@ function InsertionPointInserter( { clientId, setIsInserterForced } ) {

function InsertionPointPopover( {
clientId,
rootClientId,
selectedRootClientId,
isInserterShown,
isInserterForced,
setIsInserterForced,
Expand All @@ -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,
Expand All @@ -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();
Expand All @@ -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 ] );
Expand All @@ -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 );
}
}

Expand Down Expand Up @@ -192,7 +231,8 @@ function InsertionPointPopover( {
) }
{ ! isHidden && ( isInserterShown || isInserterForced ) && (
<InsertionPointInserter
clientId={ clientId }
rootClientId={ rootClientId }
clientId={ nextClientId }
setIsInserterForced={ setIsInserterForced }
/>
) }
Expand Down Expand Up @@ -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,
};
}, [] );
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -337,7 +381,7 @@ export default function useInsertionPoint( ref ) {
clientId={
isInserterVisible ? selectedClientId : inserterClientId
}
rootClientId={ selectedRootClientId }
selectedRootClientId={ selectedRootClientId }
isInserterShown={ isInserterShown }
isInserterForced={ isInserterForced }
setIsInserterForced={ ( value ) => {
Expand Down
6 changes: 2 additions & 4 deletions packages/e2e-tests/specs/widgets/adding-widgets.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ describe( 'Widgets screen', () => {
return addParagraphBlock;
}

/*
async function expectInsertionPointIndicatorToBeBelowLastBlock(
widgetArea
) {
Expand All @@ -82,7 +81,6 @@ describe( 'Widgets screen', () => {
insertionPointIndicatorBoundingBox.y > lastBlockBoundingBox.y
).toBe( true );
}
*/

async function getInlineInserterButton() {
return await page.waitForSelector(
Expand Down Expand Up @@ -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' );
Expand Down

0 comments on commit 30fafd0

Please sign in to comment.