Skip to content

Commit

Permalink
Fix sibling block inserter displaying at end of block list. (#29920)
Browse files Browse the repository at this point in the history
* Only show inserter version of insertion point if there is a next block

* Clarify comment

* Improve boolean logic

* Update e2e test

* Update tests
  • Loading branch information
talldan authored and noisysocks committed Apr 6, 2021
1 parent b8d6c33 commit e3b2a90
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 11 deletions.
23 changes: 16 additions & 7 deletions packages/block-editor/src/components/block-list/insertion-point.js
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,18 @@ 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 =
! isHidden && nextElement && ( isInserterShown || isInserterForced );

// Show the indicator if the insertion point inserter is visible, or if
// the `showInsertionPoint` state is `true`. The latter is generally true
// when hovering blocks for insertion in the block library.
const showInsertionPointIndicator =
showInsertionPointInserter || ( ! isHidden && showInsertionPoint );

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
// While ideally it would be enough to capture the
// bubbling focus event from the Inserter, due to the
Expand All @@ -223,13 +235,10 @@ function InsertionPointPopover( {
className={ className }
style={ style }
>
{ ! isHidden &&
( showInsertionPoint ||
isInserterShown ||
isInserterForced ) && (
<div className="block-editor-block-list__insertion-point-indicator" />
) }
{ ! isHidden && ( isInserterShown || isInserterForced ) && (
{ showInsertionPointIndicator && (
<div className="block-editor-block-list__insertion-point-indicator" />
) }
{ showInsertionPointInserter && (
<InsertionPointInserter
rootClientId={ rootClientId }
clientId={ nextClientId }
Expand Down
11 changes: 7 additions & 4 deletions packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
publishPost,
trashAllPosts,
activateTheme,
canvas,
} from '@wordpress/e2e-test-utils';

/**
Expand Down Expand Up @@ -193,9 +192,13 @@ describe( 'Multi-entity save flow', () => {
await navigationPanel.clickItemByText( 'Index' );
await navigationPanel.close();

// Click the first block so that the template part inserts in the right place.
const firstBlock = await canvas().$( '.wp-block' );
await firstBlock.click();
// Select the header template part via list view.
await page.click( 'button[aria-label="List View"]' );
const headerTemplatePartListViewButton = await page.waitForXPath(
'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
);
headerTemplatePartListViewButton.click();
await page.click( 'button[aria-label="Close list view sidebar"]' );

// Insert something to dirty the editor.
await insertBlock( 'Paragraph' );
Expand Down

0 comments on commit e3b2a90

Please sign in to comment.