From 0996cef62206ea7f7264676b2d995ca3b5fd284a Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Thu, 8 Oct 2020 14:51:55 +0300 Subject: [PATCH] Revert "Fix blue line indicator not showing at the end (#25849)" This reverts commit e376eabcb109c69c4c2f2d14afcf7b08cefddd12. --- .../components/block-list-appender/index.js | 21 +--- .../src/components/block-list/index.js | 108 ++++++++---------- .../components/block-list/insertion-point.js | 60 ++++------ .../src/components/block-list/style.scss | 4 - .../editor/various/adding-blocks.test.js | 33 ------ .../blocks/widget-area/edit/inner-blocks.js | 1 - 6 files changed, 72 insertions(+), 155 deletions(-) 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 } /> ); }