diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index e9923bc4273b31..240f6220a234f6 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -39,7 +39,6 @@ function BlockListBlock( { isLocked, clientId, rootClientId, - isHighlighted, isSelected, isMultiSelected, isPartOfMultiSelection, @@ -66,9 +65,13 @@ function BlockListBlock( { // In addition to withSelect, we should favor using useSelect in this // component going forward to avoid leaking new props to the public API // (editor.BlockListBlock filter) - const { isDraggingBlocks } = useSelect( ( select ) => { + const { isDragging, isHighlighted } = useSelect( ( select ) => { + const { isDraggingBlocks, isBlockHighlighted } = select( + 'core/block-editor' + ); return { - isDraggingBlocks: select( 'core/block-editor' ).isDraggingBlocks(), + isDragging: isDraggingBlocks(), + isHighlighted: isBlockHighlighted( clientId ), }; }, [] ); @@ -83,8 +86,6 @@ function BlockListBlock( { false ); const isUnregisteredBlock = name === getUnregisteredTypeHandlerName(); - const isDragging = - isDraggingBlocks && ( isSelected || isPartOfMultiSelection ); // Determine whether the block has props to apply to the wrapper. if ( blockType.getEditWrapperProps ) { @@ -113,7 +114,8 @@ function BlockListBlock( { 'is-highlighted': isHighlighted, 'is-multi-selected': isMultiSelected, 'is-reusable': isReusableBlock( blockType ), - 'is-dragging': isDragging, + 'is-dragging': + isDragging && ( isSelected || isPartOfMultiSelection ), 'is-typing': isTypingWithinBlock, 'is-focused': isFocusMode && ( isSelected || isAncestorOfSelectedBlock ), @@ -219,7 +221,6 @@ const applyWithSelect = withSelect( getTemplateLock, __unstableGetBlockWithoutInnerBlocks, isNavigationMode, - isBlockHighlighted, } = select( 'core/block-editor' ); const block = __unstableGetBlockWithoutInnerBlocks( clientId ); const isSelected = isBlockSelected( clientId ); @@ -239,8 +240,9 @@ const applyWithSelect = withSelect( // is not correct. const { name, attributes, isValid } = block || {}; + // Do not add new properties here, use `useSelect` instead to avoid + // leaking new props to the public API (editor.BlockListBlock filter). return { - isHighlighted: isBlockHighlighted( clientId ), isMultiSelected: isBlockMultiSelected( clientId ), isPartOfMultiSelection: isBlockMultiSelected( clientId ) || @@ -287,6 +289,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { __unstableMarkLastChangeAsPersistent, } = dispatch( 'core/block-editor' ); + // Do not add new properties here, use `useDispatch` instead to avoid + // leaking new props to the public API (editor.BlockListBlock filter). return { setAttributes( newAttributes ) { const { clientId } = ownProps;