Block editor: reduce getBlockEditingMode calls

packages/block-editor/src/components/block-content-overlay/index.js

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
+// Note: this selector no longer seems to be used anywhere. Deprecate?
 export default function useBlockOverlayActive( clientId ) {
 	return useSelect(
 		( select ) => {

packages/block-editor/src/components/block-list/block.js

@@ -15,8 +15,6 @@ import {
 	switchToBlockType,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
-	isReusableBlock,
-	getBlockDefaultClassName,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
@@ -34,6 +32,7 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
+import { canRemoveBlockCheck, canMoveBlockCheck } from '../../store/utils';
 import { useLayout } from './layout';
 import { PrivateBlockContext } from './private-block-context';
 
@@ -498,8 +497,6 @@ function BlockListBlockProvider( props ) {
 				isSelectionEnabled,
 				getTemplateLock,
 				__unstableGetBlockWithoutInnerBlocks,
-				canRemoveBlock,
-				canMoveBlock,
 
 				getSettings,
 				__unstableGetTemporarilyEditingAsBlocks,
@@ -519,7 +516,6 @@ function BlockListBlockProvider( props ) {
 				isBlockBeingDragged,
 				hasBlockMovingClientId,
 				canInsertBlockType,
-				getBlockRootClientId,
 				__unstableHasActiveBlockOverlayActive,
 				__unstableGetEditorMode,
 				getSelectedBlocksInitialCaretPosition,
@@ -540,9 +536,18 @@ function BlockListBlockProvider( props ) {
 			} = select( blocksStore );
 			const _isSelected = isBlockSelected( clientId );
 			const templateLock = getTemplateLock( rootClientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
+			const blockEditingMode = getBlockEditingMode( clientId );
 			const { name: blockName, attributes, isValid } = block;
+			const canRemove = canRemoveBlockCheck(
+				attributes,
+				blockEditingMode,
+				templateLock
+			);
+			const canMove = canMoveBlockCheck(
+				attributes,
+				blockEditingMode,
+				templateLock
+			);
 			const blockType = getBlockType( blockName );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const { outlineMode, supportsLayout } = getSettings();
@@ -574,7 +579,7 @@ function BlockListBlockProvider( props ) {
 				themeSupportsLayout: supportsLayout,
 				isTemporarilyEditingAsBlocks:
 					__unstableGetTemporarilyEditingAsBlocks() === clientId,
-				blockEditingMode: getBlockEditingMode( clientId ),
+				blockEditingMode,
 				mayDisplayControls:
 					_isSelected ||
 					( isFirstMultiSelectedBlock( clientId ) &&
@@ -590,9 +595,14 @@ function BlockListBlockProvider( props ) {
 				index: getBlockIndex( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
+				isSubtreeDisabled:
+					blockEditingMode === 'disabled' &&
+					isBlockSubtreeDisabled( clientId ),
 				isOutlineEnabled: outlineMode,
-				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
+				hasOverlay: __unstableHasActiveBlockOverlayActive(
+					clientId,
+					blockEditingMode
+				),
 				initialPosition:
 					_isSelected && __unstableGetEditorMode() === 'edit'
 						? getSelectedBlocksInitialCaretPosition()
@@ -603,7 +613,6 @@ function BlockListBlockProvider( props ) {
 					isMultiSelected &&
 					! __unstableIsFullySelected() &&
 					! __unstableSelectionHasUnmergeableBlock(),
-				isReusable: isReusableBlock( blockType ),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
 				removeOutline: _isSelected && outlineMode && typing,
@@ -612,16 +621,13 @@ function BlockListBlockProvider( props ) {
 					movingClientId &&
 					canInsertBlockType(
 						getBlockName( movingClientId ),
-						getBlockRootClientId( clientId )
+						rootClientId
 					),
-				isEditingDisabled:
-					getBlockEditingMode( clientId ) === 'disabled',
+				isEditingDisabled: blockEditingMode === 'disabled',
 				className: hasLightBlockWrapper
 					? attributes.className
 					: undefined,
-				defaultClassName: hasLightBlockWrapper
-					? getBlockDefaultClassName( blockName )
-					: undefined,
+				hasLightBlockWrapper,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -653,15 +659,14 @@ function BlockListBlockProvider( props ) {
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,
-		isReusable,
 		isDragging,
 		hasChildSelected,
 		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
 		className,
-		defaultClassName,
+		hasLightBlockWrapper,
 	} = selectedProps;
 
 	// Block is sometimes not mounted at the right time, causing it be
@@ -688,18 +693,17 @@ function BlockListBlockProvider( props ) {
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,
-		isReusable,
 		isDragging,
 		hasChildSelected,
 		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
 		isTemporarilyEditingAsBlocks,
-		defaultClassName,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		themeSupportsLayout,
+		hasLightBlockWrapper,
 	};
 
 	// Here we separate between the props passed to BlockListBlock and any other

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

@@ -8,7 +8,11 @@ import classnames from 'classnames';
  */
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
+import {
+	__unstableGetBlockProps as getBlockProps,
+	getBlockDefaultClassName,
+	isReusableBlock,
+} from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
 import warning from '@wordpress/warning';
 
@@ -88,15 +92,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,
-		isReusable,
 		isDragging,
 		hasChildSelected,
 		removeOutline,
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
 		isTemporarilyEditingAsBlocks,
-		defaultClassName,
+		hasLightBlockWrapper,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -145,7 +148,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-highlighted': isHighlighted,
 				'is-multi-selected': isMultiSelected,
 				'is-partially-selected': isPartiallySelected,
-				'is-reusable': isReusable,
+				'is-reusable': isReusableBlock( name ),
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
 				'remove-outline': removeOutline,
@@ -158,7 +161,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			className,
 			props.className,
 			wrapperProps.className,
-			defaultClassName
+			hasLightBlockWrapper ? getBlockDefaultClassName( name ) : undefined
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

packages/block-editor/src/components/block-list/use-in-between-inserter.js

@@ -74,9 +74,11 @@ export function useInBetweenInserter() {
 					rootClientId = blockElement.getAttribute( 'data-block' );
 				}
 
+				const blockEditingMode = getBlockEditingMode( rootClientId );
+
 				if (
 					getTemplateLock( rootClientId ) ||
-					getBlockEditingMode( rootClientId ) === 'disabled' ||
+					blockEditingMode === 'disabled' ||
 					getBlockName( rootClientId ) === 'core/block'
 				) {
 					return;
@@ -124,7 +126,7 @@ export function useInBetweenInserter() {
 				const clientId = element.id.slice( 'block-'.length );
 				if (
 					! clientId ||
-					__unstableIsWithinBlockOverlay( clientId )
+					__unstableIsWithinBlockOverlay( clientId, blockEditingMode )
 				) {
 					return;
 				}

packages/block-editor/src/components/inner-blocks/index.js

@@ -25,7 +25,10 @@ import useInnerBlockTemplateSync from './use-inner-block-template-sync';
 import useBlockContext from './use-block-context';
 import { BlockListItems } from '../block-list';
 import { BlockContextProvider } from '../block-context';
-import { useBlockEditContext } from '../block-edit/context';
+import {
+	useBlockEditContext,
+	blockEditingModeKey,
+} from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
@@ -183,11 +186,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		__unstableDisableDropZone,
 		dropZoneElement,
 	} = options;
+	const context = useBlockEditContext();
 	const {
 		clientId,
 		layout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
-	} = useBlockEditContext();
+	} = context;
+	const blockEditingMode = context[ blockEditingModeKey ];
 	const {
 		__experimentalCaptureToolbars,
 		hasOverlay,
@@ -213,13 +218,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockRootClientId,
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
-				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const enableClickThrough =
 				__unstableGetEditorMode() === 'navigation';
-			const blockEditingMode = getBlockEditingMode( clientId );
 			const _parentClientId = getBlockRootClientId( clientId );
 			return {
 				__experimentalCaptureToolbars: hasBlockSupport(
@@ -239,11 +242,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				parentClientId: _parentClientId,
 				isDropZoneDisabled:
 					blockEditingMode !== 'default' ||
-					__unstableHasActiveBlockOverlayActive( clientId ) ||
-					__unstableIsWithinBlockOverlay( clientId ),
+					__unstableHasActiveBlockOverlayActive(
+						clientId,
+						blockEditingMode
+					) ||
+					__unstableIsWithinBlockOverlay(
+						clientId,
+						blockEditingMode
+					),
 			};
 		},
-		[ clientId ]
+		[ clientId, blockEditingMode ]
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {

packages/block-editor/src/store/selectors.js

@@ -30,6 +30,8 @@ import {
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
+	canRemoveBlockCheck,
+	canMoveBlockCheck,
 } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
@@ -1681,18 +1683,11 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
  * @return {boolean} Whether the given block is allowed to be removed.
  */
 export function canRemoveBlock( state, clientId, rootClientId = null ) {
-	const attributes = getBlockAttributes( state, clientId );
-	if ( attributes === null ) {
-		return true;
-	}
-	if ( attributes.lock?.remove !== undefined ) {
-		return ! attributes.lock.remove;
-	}
-	if ( getTemplateLock( state, rootClientId ) ) {
-		return false;
-	}
-
-	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
+	return canRemoveBlockCheck(
+		getBlockAttributes( state, clientId ),
+		getBlockEditingMode( state, rootClientId ),
+		getTemplateLock( state, rootClientId )
+	);
 }
 
 /**
@@ -1720,18 +1715,11 @@ export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
  * @return {boolean | undefined} Whether the given block is allowed to be moved.
  */
 export function canMoveBlock( state, clientId, rootClientId = null ) {
-	const attributes = getBlockAttributes( state, clientId );
-	if ( attributes === null ) {
-		return true;
-	}
-	if ( attributes.lock?.move !== undefined ) {
-		return ! attributes.lock.move;
-	}
-	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
-		return false;
-	}
-
-	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
+	return canMoveBlockCheck(
+		getBlockAttributes( state, clientId ),
+		getBlockEditingMode( state, rootClientId ),
+		getTemplateLock( state, rootClientId )
+	);
 }
 
 /**
@@ -2775,12 +2763,16 @@ export function __unstableGetTemporarilyEditingFocusModeToRevert( state ) {
 	return state.temporarilyEditingFocusModeRevert;
 }
 
-export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+export function __unstableHasActiveBlockOverlayActive(
+	state,
+	clientId,
+	blockEditingMode = getBlockEditingMode( state, clientId )
+) {
 	// Prevent overlay on blocks with a non-default editing mode. If the mdoe is
 	// 'disabled' then the overlay is redundant since the block can't be
 	// selected. If the mode is 'contentOnly' then the overlay is redundant
 	// since there will be no controls to interact with once selected.
-	if ( getBlockEditingMode( state, clientId ) !== 'default' ) {
+	if ( blockEditingMode !== 'default' ) {
 		return false;
 	}
 
@@ -2823,10 +2815,20 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 	);
 }
 
-export function __unstableIsWithinBlockOverlay( state, clientId ) {
+export function __unstableIsWithinBlockOverlay(
+	state,
+	clientId,
+	blockEditingMode
+) {
 	let parent = state.blocks.parents.get( clientId );
 	while ( !! parent ) {
-		if ( __unstableHasActiveBlockOverlayActive( state, parent ) ) {
+		if (
+			__unstableHasActiveBlockOverlayActive(
+				state,
+				parent,
+				blockEditingMode
+			)
+		) {
 			return true;
 		}
 		parent = state.blocks.parents.get( parent );