diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 7923499db87990..b713ad80f82a02 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -184,10 +184,10 @@ function Items( { selectedBlocks, visibleBlocks, shouldRenderAppender, - insertionPoint, isZoomOut, sectionRootClientId, sectionClientIds, + blockInsertionPoint, } = useSelect( ( select ) => { const { @@ -199,6 +199,7 @@ function Items( { getTemplateLock, getBlockEditingMode, __unstableGetEditorMode, + getBlockInsertionPoint, } = unlock( select( blockEditorStore ) ); const _order = getBlockOrder( rootClientId ); @@ -213,13 +214,6 @@ function Items( { const { sectionRootClientId: root } = unlock( getSettings() ); const selectedBlockClientId = getSelectedBlockClientId(); const sectionRootClientIds = getBlockOrder( root ); - // To do: move ZoomOutModeInserters to core/editor. - // Or we perhaps we should move the insertion point state to the - // block-editor store. I'm not sure what it was ever moved to the editor - // store, because all the inserter components all live in the - // block-editor package. - // eslint-disable-next-line @wordpress/data-no-store-string-literals - const editor = select( 'core/editor' ); return { order: _order, selectedBlocks: getSelectedBlockClientIds(), @@ -238,7 +232,7 @@ function Items( { sectionRootClientId: root, sectionClientIds: sectionRootClientIds, blockOrder: getBlockOrder( root ), - insertionPoint: unlock( editor ).getInsertionPoint(), + blockInsertionPoint: getBlockInsertionPoint(), }; }, [ rootClientId, hasAppender, hasCustomAppender ] @@ -291,11 +285,9 @@ function Items( { > { renderZoomOutSeparator( isSectionBlock( clientId, sectionClientIds ) && - insertionPoint.insertionIndex === 0 && + blockInsertionPoint.index === 0 && clientId === - sectionClientIds[ - insertionPoint.insertionIndex - ] + sectionClientIds[ blockInsertionPoint.index ] ) } diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js index 45b1cf0f64bd7d..b56c15addd69cb 100644 --- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js +++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; /** * Internal dependencies @@ -16,9 +16,9 @@ function ZoomOutModeInserters() { const [ isReady, setIsReady ] = useState( false ); const { hasSelection, + blockInsertionPointVisible, blockInsertionPoint, blockOrder, - blockInsertionPointVisible, setInserterIsOpened, sectionRootClientId, selectedBlockClientId, @@ -39,6 +39,7 @@ function ZoomOutModeInserters() { blockInsertionPoint: getBlockInsertionPoint(), blockOrder: getBlockOrder( root ), blockInsertionPointVisible: isBlockInsertionPointVisible(), + blockInsertionPoint: getBlockInsertionPoint(), sectionRootClientId: root, setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened, @@ -46,9 +47,10 @@ function ZoomOutModeInserters() { hoveredBlockClientId: getHoveredBlockClientId(), }; }, [] ); - const blockEditorDispatch = useDispatch( blockEditorStore ); + const isMounted = useRef( false ); + // Defer the initial rendering to avoid the jumps due to the animation. useEffect( () => { const timeout = setTimeout( () => { @@ -80,7 +82,6 @@ function ZoomOutModeInserters() { hoveredBlockClientId === nextClientId; const { showInsertionPoint } = blockEditorDispatch; - return (