Block: move new props to hook (#22212)

* Block: move new props to hook

* Fix typo

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;