diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index fae056e50dcb50..e2a4dbb0ebd6bc 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { createContext, useContext } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { getDefaultBlockName } from '@wordpress/blocks';
@@ -17,9 +16,6 @@ import { getDefaultBlockName } from '@wordpress/blocks';
import DefaultBlockAppender from '../default-block-appender';
import ButtonBlockAppender from '../button-block-appender';
-// A Context to store the map of the appender map.
-export const AppenderNodesContext = createContext();
-
function stopPropagation( event ) {
event.stopPropagation();
}
@@ -34,8 +30,6 @@ function BlockListAppender( {
selectedBlockClientId,
tagName: TagName = 'div',
} ) {
- const appenderNodesMap = useContext( AppenderNodesContext );
-
if ( isLocked || CustomAppender === false ) {
return null;
}
@@ -95,20 +89,7 @@ function BlockListAppender( {
// Prevent the block from being selected when the appender is
// clicked.
onFocus={ stopPropagation }
- className={ classnames(
- 'block-list-appender',
- 'wp-block',
- className
- ) }
- ref={ ( ref ) => {
- if ( ref ) {
- // Set the reference of the "Appender" with `rootClientId` as key.
- appenderNodesMap.set( rootClientId || '', ref );
- } else {
- // If it un-mounts, cleanup the map.
- appenderNodesMap.delete( rootClientId || '' );
- }
- } }
+ className={ classnames( 'block-list-appender', className ) }
>
{ appender }
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index c74ed80bb074b7..22ede3bc48e677 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -13,17 +13,10 @@ import { useRef, forwardRef } from '@wordpress/element';
* Internal dependencies
*/
import BlockListBlock from './block';
-import BlockListAppender, {
- AppenderNodesContext,
-} from '../block-list-appender';
+import BlockListAppender from '../block-list-appender';
import RootContainer from './root-container';
import useBlockDropZone from '../use-block-drop-zone';
-/**
- * A map to store the reference of each "Appenders" rendered with `rootClientId` as key.
- */
-const appenderNodesMap = new Map();
-
/**
* If the block count exceeds the threshold, we disable the reordering animation
* to avoid laginess.
@@ -89,60 +82,57 @@ function BlockList(
dropTargetIndex === blockClientIds.length && isDraggingBlocks;
return (
-
-
- { blockClientIds.map( ( clientId, index ) => {
- const isBlockInSelection = hasMultiSelection
- ? multiSelectedBlockClientIds.includes( clientId )
- : selectedBlockClientId === clientId;
+
+ { blockClientIds.map( ( clientId, index ) => {
+ const isBlockInSelection = hasMultiSelection
+ ? multiSelectedBlockClientIds.includes( clientId )
+ : selectedBlockClientId === clientId;
- const isDropTarget =
- dropTargetIndex === index && isDraggingBlocks;
+ const isDropTarget =
+ dropTargetIndex === index && isDraggingBlocks;
- return (
-
-
-
- );
+ return (
+
+
+
+ );
+ } ) }
+
-
-
+ />
+
);
}
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 ebfc46a22a3d06..8562b088bb9ee4 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
-import { useState, useRef, useMemo, useContext } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
import { Popover } from '@wordpress/components';
import { placeCaretAtVerticalEdge } from '@wordpress/dom';
@@ -17,7 +17,6 @@ import { placeCaretAtVerticalEdge } from '@wordpress/dom';
import Inserter from '../inserter';
import { getClosestTabbable } from '../writing-flow';
import { getBlockDOMNode } from '../../utils/dom';
-import { AppenderNodesContext } from '../block-list-appender';
function InsertionPointInserter( {
clientId,
@@ -99,24 +98,13 @@ function InsertionPointInserter( {
function InsertionPointPopover( {
clientId,
- rootClientId,
isInserterShown,
isInserterForced,
setIsInserterForced,
containerRef,
showInsertionPoint,
} ) {
- const appenderNodesMap = useContext( AppenderNodesContext );
- const element = useMemo( () => {
- if ( clientId ) {
- return getBlockDOMNode( clientId );
- }
-
- // Can't find the element, might be at the end of the block list, or inside an empty block list.
- // We instead try to find the "Appender" and place the indicator above it.
- // `rootClientId` could be null or undefined when there's no parent block, we normalize it to an empty string.
- return appenderNodesMap.get( rootClientId || '' );
- }, [ clientId, rootClientId, appenderNodesMap ] );
+ const element = getBlockDOMNode( clientId );
return (
{
- const {
- isMultiSelecting: _isMultiSelecting,
- isBlockInsertionPointVisible,
- getBlockInsertionPoint,
- getBlockOrder,
- } = select( 'core/block-editor' );
-
- const insertionPoint = getBlockInsertionPoint();
- const order = getBlockOrder( insertionPoint.rootClientId );
-
- return {
- isMultiSelecting: _isMultiSelecting(),
- isInserterVisible: isBlockInsertionPointVisible(),
- selectedClientId: order[ insertionPoint.index ],
- selectedRootClientId: insertionPoint.rootClientId,
- };
- }, [] );
+ const { isMultiSelecting, isInserterVisible, selectedClientId } = useSelect(
+ ( select ) => {
+ const {
+ isMultiSelecting: _isMultiSelecting,
+ isBlockInsertionPointVisible,
+ getBlockInsertionPoint,
+ getBlockOrder,
+ } = select( 'core/block-editor' );
+
+ const insertionPoint = getBlockInsertionPoint();
+ const order = getBlockOrder( insertionPoint.rootClientId );
+
+ return {
+ isMultiSelecting: _isMultiSelecting(),
+ isInserterVisible: isBlockInsertionPointVisible(),
+ selectedClientId: order[ insertionPoint.index ],
+ };
+ },
+ []
+ );
function onMouseMove( event ) {
if (
@@ -230,7 +215,6 @@ export default function InsertionPoint( { children, containerRef } ) {
clientId={
isInserterVisible ? selectedClientId : inserterClientId
}
- rootClientId={ selectedRootClientId }
isInserterShown={ isInserterShown }
isInserterForced={ isInserterForced }
setIsInserterForced={ setIsInserterForced }
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 77b2a30a9dab8f..ad60dd086b12ca 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -365,10 +365,6 @@
position: relative;
z-index: z-index(".block-editor-block-list__insertion-point");
margin-top: -$block-padding * 2;
-
- &.is-insert-after {
- margin-top: $block-padding;
- }
}
.block-editor-block-list__insertion-point-indicator {
diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
index be849af8d01250..d6d1496da80a76 100644
--- a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
@@ -8,7 +8,6 @@ import {
pressKeyTimes,
setBrowserViewport,
closeGlobalBlockInserter,
- searchForBlock,
} from '@wordpress/e2e-test-utils';
/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
@@ -263,36 +262,4 @@ describe( 'adding blocks', () => {
await coverBlock.click();
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
-
- // Check for regression of https://github.com/WordPress/gutenberg/issues/25785
- it( 'inserts a block should show a blue line indicator', async () => {
- // First insert a random Paragraph.
- await insertBlock( 'Paragraph' );
- await page.keyboard.type( 'First paragraph' );
-
- // Open the global inserter and search for the Heading block.
- await searchForBlock( 'Heading' );
-
- const headingButton = (
- await page.$x( `//button//span[contains(text(), 'Heading')]` )
- )[ 0 ];
-
- // Hover over the block should show the blue line indicator.
- await headingButton.hover();
-
- // Should show the blue line indicator somewhere.
- const indicator = await page.$(
- '.block-editor-block-list__insertion-point-indicator'
- );
- const indicatorRect = await indicator.boundingBox();
-
- const paragraphBlock = await page.$(
- 'p[aria-label="Paragraph block"]'
- );
- const paragraphRect = await paragraphBlock.boundingBox();
-
- // The blue line indicator should be below the last block.
- expect( indicatorRect.x ).toBe( paragraphRect.x );
- expect( indicatorRect.y > paragraphRect.y ).toBe( true );
- } );
} );
diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
index 7b27a404a2f6c8..cf23812646eac8 100644
--- a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
+++ b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
@@ -15,7 +15,6 @@ export default function WidgetAreaInnerBlocks() {
onInput={ onInput }
onChange={ onChange }
templateLock={ false }
- renderAppender={ InnerBlocks.DefaultBlockAppender }
/>
);
}