Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show insertion point after the last block in a container #28418

Merged
merged 4 commits into from
Jan 27, 2021
Merged

Show insertion point after the last block in a container #28418

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71205be
Fix insertion point
youknowriad Jan 22, 2021
f554936
Uncomment insertion point assertion
youknowriad Jan 22, 2021
6ddee2b
Fix deadzones handling
youknowriad Jan 25, 2021
9829ec6
Fix inserting at the end of a block list
youknowriad Jan 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 75 additions & 39 deletions packages/block-editor/src/components/block-list/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,13 @@ function InsertionPointPopover( {
const { selectBlock } = useDispatch( 'core/block-editor' );
const ref = useRef();

const { previousElement, nextElement, orientation, isHidden } = useSelect(
const {
previousElement,
nextElement,
orientation,
isHidden,
nextClientId,
} = useSelect(
( select ) => {
const {
getBlockOrder,
Expand All @@ -69,13 +75,16 @@ function InsertionPointPopover( {
? getBlockRootClientId( clientId )
: rootClientId;
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 +95,76 @@ 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,
};
},
[ clientId, rootClientId ]
);

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 +179,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 +224,7 @@ function InsertionPointPopover( {
) }
{ ! isHidden && ( isInserterShown || isInserterForced ) && (
<InsertionPointInserter
clientId={ clientId }
clientId={ nextClientId }
setIsInserterForced={ setIsInserterForced }
/>
) }
Expand Down Expand Up @@ -228,7 +260,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 +293,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
6 changes: 2 additions & 4 deletions packages/e2e-tests/specs/widgets/adding-widgets.test.js
View file
Open in desktop
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