useBlockProps: combine store subscriptions

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -11,6 +11,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
+	isReusableBlock,
+	getBlockDefaultClassName,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
@@ -25,17 +27,12 @@ import { BlockListBlockContext } from '../block-list-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';
-import { useBlockClassNames } from './use-block-class-names';
-import { useBlockDefaultClassName } from './use-block-default-class-name';
-import { useBlockCustomClassName } from './use-block-custom-class-name';
-import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
-import useBlockOverlayActive from '../../block-content-overlay';
 import { unlock } from '../../../lock-unlock';
 
 /**
@@ -99,10 +96,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
+		isSelected,
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
 		isSubtreeDisabled,
+		isOutlineEnabled,
+		hasOverlay,
+		classNames,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -117,37 +118,81 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
 				isBlockSubtreeDisabled,
+				getSettings,
+				isBlockHighlighted,
+				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
+				isBlockBeingDragged,
+				hasSelectedInnerBlock,
+				hasBlockMovingClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+				__unstableHasActiveBlockOverlayActive,
 			} = unlock( select( blockEditorStore ) );
 			const { getActiveBlockVariation } = select( blocksStore );
-			const isSelected = isBlockSelected( clientId );
+			const _isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
 				isBlockMultiSelected( clientId ) ||
 				isAncestorMultiSelected( clientId );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const { outlineMode } = getSettings();
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const checkDeep = true;
+			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+				clientId,
+				checkDeep
+			);
+			const typing = isTyping();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const movingClientId = hasBlockMovingClientId();
 
 			return {
 				index: getBlockIndex( clientId ),
 				mode: getBlockMode( clientId ),
 				name: blockName,
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				isPartOfSelection: isSelected || isPartOfMultiSelection,
+				isSelected: _isSelected,
+				isPartOfSelection: _isSelected || isPartOfMultiSelection,
 				adjustScrolling:
-					isSelected || isFirstMultiSelectedBlock( clientId ),
+					_isSelected || isFirstMultiSelectedBlock( clientId ),
 				enableAnimation:
-					! isTyping() &&
+					! typing &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
 				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
+				isOutlineEnabled: outlineMode,
+				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
+				classNames: classnames( {
+					'is-selected': _isSelected,
+					'is-highlighted': isBlockHighlighted( clientId ),
+					'is-multi-selected': isMultiSelected,
+					'is-partially-selected':
+						isMultiSelected &&
+						! __unstableIsFullySelected() &&
+						! __unstableSelectionHasUnmergeableBlock(),
+					'is-reusable': isReusableBlock( blockType ),
+					'is-dragging': isBlockBeingDragged( clientId ),
+					'has-child-selected': isAncestorOfSelectedBlock,
+					'remove-outline': _isSelected && outlineMode && typing,
+					'is-block-moving-mode': !! movingClientId,
+					'can-insert-moving-block':
+						movingClientId &&
+						canInsertBlockType(
+							getBlockName( movingClientId ),
+							getBlockRootClientId( clientId )
+						),
+					[ attributes.className ]: hasLightBlockWrapper,
+					[ getBlockDefaultClassName( blockName ) ]:
+						hasLightBlockWrapper,
+				} ),
 			};
 		},
 		[ clientId ]
 	);
 
-	const hasOverlay = useBlockOverlayActive( clientId );
-
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
@@ -156,9 +201,9 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusFirstElement( clientId ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useEventHandlers( clientId ),
+		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered(),
+		useIsHovered( { isEnabled: isOutlineEnabled } ),
 		useIntersectionObserver(),
 		useMovingAnimation( {
 			isSelected: isPartOfSelection,
@@ -190,18 +235,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
-			// The wp-block className is important for editor styles.
-			classnames( 'block-editor-block-list__block', {
+			'block-editor-block-list__block',
+			{
+				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
-			} ),
+			},
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			classNames
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
 function listener( event ) {
 	if ( event.defaultPrevented ) {
 		return;
@@ -20,16 +14,11 @@ function listener( event ) {
 	event.currentTarget.classList[ action ]( 'is-hovered' );
 }
 
-/**
+/*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered() {
-	const isEnabled = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().outlineMode;
-	}, [] );
-
+export function useIsHovered( { isEnabled } ) {
 	return useRefEffect(
 		( node ) => {
 			if ( isEnabled ) {

packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -19,11 +19,7 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string} clientId Block client ID.
  */
-export function useEventHandlers( clientId ) {
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
+export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );

packages/block-library/src/navigation/edit/index.js

@@ -24,7 +24,6 @@ import {
 	getColorClassName,
 	Warning,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
@@ -290,7 +289,13 @@ function Navigation( {
 
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
-	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const hasBlockOverlay = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableHasActiveBlockOverlayActive(
+				clientId
+			),
+		[ clientId ]
+	);
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,