diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index ec4059d9e1924d..a6f6997bb653dc 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -438,11 +438,11 @@ export class BlockListBlock extends Component { // Insertion point can only be made visible when the side inserter is // not present, and either the block is at the extent of a selection or - // is the last block in the top-level list rendering. + // is the first block in the top-level list rendering. const shouldShowInsertionPoint = ( - ( ! isMultiSelected && ! isLast ) || + ( ! isMultiSelected && ! isFirst ) || ( isMultiSelected && isLastInSelection ) || - ( isLast && ! rootUID && ! isEmptyDefaultBlock ) + ( isFirst && ! rootUID && ! isEmptyDefaultBlock ) ); // Generate the wrapper class names handling the different states of the block. @@ -493,6 +493,13 @@ export class BlockListBlock extends Component { ] } { ...wrapperProps } > + { shouldShowInsertionPoint && ( + + ) } { !! error && } - { shouldShowInsertionPoint && ( - - ) } { showSideInserter && (
diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js index f296f88cd5a5d4..2f94cda3f6e61f 100644 --- a/editor/components/block-list/insertion-point.js +++ b/editor/components/block-list/insertion-point.js @@ -60,7 +60,7 @@ export default compose( connect( ( state, { uid, rootUID } ) => { const blockIndex = uid ? getBlockIndex( state, uid, rootUID ) : -1; - const insertIndex = blockIndex + 1; + const insertIndex = blockIndex; const insertionPoint = getBlockInsertionPoint( state ); const block = uid ? getBlock( state, uid ) : null; diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js index f688787c956588..d1e33331dc5c1c 100644 --- a/editor/components/block-list/layout.js +++ b/editor/components/block-list/layout.js @@ -24,7 +24,6 @@ import { Component } from '@wordpress/element'; */ import './style.scss'; import BlockListBlock from './block'; -import BlockInsertionPoint from './insertion-point'; import IgnoreNestedEvents from './ignore-nested-events'; import DefaultBlockAppender from '../default-block-appender'; import { @@ -216,7 +215,6 @@ class BlockListLayout extends Component { return (
- { !! blockUIDs.length && } { map( blockUIDs, ( uid, blockIndex ) => ( .editor-block-list__insertion-point { position: absolute; - bottom: -$block-padding; - height: $block-padding * 2; // Matches the whole empty space between two blocks - top: auto; - left: 0; - right: 0; -} - -// Before the first block -.editor-block-list__layout > .editor-block-list__insertion-point { - position: relative; top: -$block-padding; - margin-left: auto; - margin-right: auto; + height: $block-padding * 2; // Matches the whole empty space between two blocks + bottom: auto; left: 0; right: 0; } diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js index 3520d72eefdba3..5bea657e5e85c0 100644 --- a/test/e2e/integration/002-adding-blocks.js +++ b/test/e2e/integration/002-adding-blocks.js @@ -26,7 +26,7 @@ describe( 'Adding blocks', () => { // Using the between inserter cy.document().trigger( 'mousemove', { clientX: 200, clientY: 300 } ); cy.document().trigger( 'mousemove', { clientX: 250, clientY: 350 } ); - cy.get( '[data-type="core/paragraph"] .editor-block-list__insertion-point-inserter' ).click(); + cy.get( '[data-type="core/code"] .editor-block-list__insertion-point-inserter' ).click(); cy.focused().type( 'Second paragraph' ); // Switch to Text Mode to check HTML Output