Explore performance improvements

packages/block-editor/src/components/block-tools/index.js

@@ -26,7 +26,7 @@ import BlockToolbarPopover from './block-toolbar-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
-import { useShowBlockTools } from './use-show-block-tools';
+import { shouldShowBlockTools } from './should-show-block-tools';
 import { unlock } from '../../lock-unlock';
 import { cleanEmptyObject } from '../../hooks/utils';
 import usePasteStyles from '../use-paste-styles';
@@ -39,17 +39,47 @@ function selector( select ) {
 		isTyping,
 		isDragging,
 		isZoomOut,
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		isGroupable,
+		getBlockName,
+		getBlock,
+		getBlockMode,
+		isBlockInterfaceHidden,
 	} = unlock( select( blockEditorStore ) );
 
+	const { getGroupingBlockName } = select( blocksStore );
+
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+	const _isTyping = isTyping();
+	const _hasFixedToolbar = getSettings().hasFixedToolbar;
+
+	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
+		shouldShowBlockTools( {
+			block: getBlock( clientId ),
+			blockMode: clientId ? getBlockMode( clientId ) : null,
+			isBlockInterfaceHidden: isBlockInterfaceHidden(),
+			clientId,
+			isTyping: _isTyping,
+			hasFixedToolbar: _hasFixedToolbar,
+		} );
 
 	return {
 		clientId,
-		hasFixedToolbar: getSettings().hasFixedToolbar,
-		isTyping: isTyping(),
+		hasFixedToolbar: _hasFixedToolbar,
+		isTyping: _isTyping,
 		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
+		showEmptyBlockSideInserter,
+		showBlockToolbarPopover,
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		isGroupable,
+		getBlockName,
+		getGroupingBlockName,
 	};
 }
 
@@ -67,20 +97,23 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
-		useSelect( selector, [] );
-
-	const isMatch = useShortcutEventMatch();
 	const {
+		clientId,
+		hasFixedToolbar,
+		isTyping,
+		isZoomOutMode,
+		isDragging,
 		getBlocksByClientId,
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 		isGroupable,
 		getBlockName,
-	} = useSelect( blockEditorStore );
-	const { getGroupingBlockName } = useSelect( blocksStore );
-	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
-		useShowBlockTools();
+		getGroupingBlockName,
+		showEmptyBlockSideInserter,
+		showBlockToolbarPopover,
+	} = useSelect( selector, [] );
+
+	const isMatch = useShortcutEventMatch();
 	const pasteStyles = usePasteStyles();
 
 	const {

packages/block-editor/src/components/block-tools/insertion-point.js

@@ -45,6 +45,7 @@ function InbetweenInsertionPointPopover( {
 		isInserterShown,
 		isDistractionFree,
 		isZoomOutMode,
+		getBlockEditingMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -55,6 +56,7 @@ function InbetweenInsertionPointPopover( {
 			getNextBlockClientId,
 			getSettings,
 			isZoomOut,
+			getBlockEditingMode: _getBlockEditingMode,
 		} = unlock( select( blockEditorStore ) );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -86,9 +88,9 @@ function InbetweenInsertionPointPopover( {
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 			isZoomOutMode: isZoomOut(),
+			getBlockEditingMode: _getBlockEditingMode,
 		};
 	}, [] );
-	const { getBlockEditingMode } = useSelect( blockEditorStore );
 
 	const disableMotion = useReducedMotion();
 

packages/block-editor/src/components/block-tools/should-show-block-tools.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Determines which block tools should be showing based on the current editor state.
+ * This is a pure function that can be called from within a selector.
+ *
+ * @param {Object}  options                        Calculation options.
+ * @param {Object}  options.block                  The selected block object.
+ * @param {string}  options.blockMode              The block mode ('visual' or 'html').
+ * @param {boolean} options.isBlockInterfaceHidden Whether the block interface is hidden.
+ * @param {string}  options.clientId               The selected block client ID.
+ * @param {boolean} options.isTyping               Whether the user is currently typing.
+ * @param {boolean} options.hasFixedToolbar        Whether the toolbar is fixed.
+ *
+ * @return {Object} Object of which block tools will be shown.
+ */
+export function shouldShowBlockTools( {
+	block,
+	blockMode,
+	isBlockInterfaceHidden,
+	clientId,
+	isTyping,
+	hasFixedToolbar,
+} ) {
+	const hasSelectedBlock = !! clientId && !! block;
+	const isEmptyDefaultBlock =
+		hasSelectedBlock &&
+		isUnmodifiedDefaultBlock( block, 'content' ) &&
+		blockMode !== 'html';
+	const showEmptyBlockSideInserter =
+		clientId && ! isTyping && isEmptyDefaultBlock;
+	const showBlockToolbarPopover =
+		! isBlockInterfaceHidden &&
+		! hasFixedToolbar &&
+		! showEmptyBlockSideInserter &&
+		hasSelectedBlock &&
+		! isEmptyDefaultBlock;
+
+	return {
+		showEmptyBlockSideInserter,
+		showBlockToolbarPopover,
+	};
+}

packages/block-editor/src/components/block-tools/use-show-block-tools.js

@@ -1,53 +1,46 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-/**
- * Source of truth for which block tools are showing in the block editor.
+ * Calculates which block tools should be showing based on the current editor state.
+ * This is a pure function that can be called from within a selector.
+ *
+ * @param {Object}  options                        Calculation options.
+ * @param {Object}  options.block                  The selected block object.
+ * @param {string}  options.blockMode              The block mode ('visual' or 'html').
+ * @param {boolean} options.isBlockInterfaceHidden Whether the block interface is hidden.
+ * @param {string}  options.clientId               The selected block client ID.
+ * @param {boolean} options.isTyping               Whether the user is currently typing.
+ * @param {boolean} options.hasFixedToolbar        Whether the toolbar is fixed.
  *
  * @return {Object} Object of which block tools will be shown.
  */
-export function useShowBlockTools() {
-	return useSelect( ( select ) => {
-		const {
-			getSelectedBlockClientId,
-			getFirstMultiSelectedBlockClientId,
-			getBlock,
-			getBlockMode,
-			getSettings,
-			isTyping,
-			isBlockInterfaceHidden,
-		} = unlock( select( blockEditorStore ) );
-
-		const clientId =
-			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
-
-		const block = getBlock( clientId );
-		const hasSelectedBlock = !! clientId && !! block;
-		const isEmptyDefaultBlock =
-			hasSelectedBlock &&
-			isUnmodifiedDefaultBlock( block, 'content' ) &&
-			getBlockMode( clientId ) !== 'html';
-		const _showEmptyBlockSideInserter =
-			clientId && ! isTyping() && isEmptyDefaultBlock;
-		const _showBlockToolbarPopover =
-			! isBlockInterfaceHidden() &&
-			! getSettings().hasFixedToolbar &&
-			! _showEmptyBlockSideInserter &&
-			hasSelectedBlock &&
-			! isEmptyDefaultBlock;
+export function calculateShowBlockTools( {
+	block,
+	blockMode,
+	isBlockInterfaceHidden,
+	clientId,
+	isTyping,
+	hasFixedToolbar,
+} ) {
+	const hasSelectedBlock = !! clientId && !! block;
+	const isEmptyDefaultBlock =
+		hasSelectedBlock &&
+		isUnmodifiedDefaultBlock( block, 'content' ) &&
+		blockMode !== 'html';
+	const showEmptyBlockSideInserter =
+		clientId && ! isTyping && isEmptyDefaultBlock;
+	const showBlockToolbarPopover =
+		! isBlockInterfaceHidden &&
+		! hasFixedToolbar &&
+		! showEmptyBlockSideInserter &&
+		hasSelectedBlock &&
+		! isEmptyDefaultBlock;
 
-		return {
-			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-			showBlockToolbarPopover: _showBlockToolbarPopover,
-		};
-	}, [] );
+	return {
+		showEmptyBlockSideInserter,
+		showBlockToolbarPopover,
+	};
 }

packages/block-editor/src/hooks/border.js

@@ -142,12 +142,18 @@ function BordersInspectorControl( { label, children, resetAllFilter } ) {
 
 export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
-	function selector( select ) {
-		const { style, borderColor } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, borderColor };
-	}
-	const { style, borderColor } = useSelect( selector, [ clientId ] );
+	const { style, borderColor } = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const { style: _style, borderColor: _borderColor } =
+				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return { style: _style, borderColor: _borderColor };
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo( () => {
 		return attributesToStyle( { style, borderColor } );
 	}, [ style, borderColor ] );

packages/block-editor/src/hooks/color.js

@@ -262,14 +262,27 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 
 export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasColorPanel( settings );
-	function selector( select ) {
-		const { style, textColor, backgroundColor, gradient } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, textColor, backgroundColor, gradient };
-	}
+
 	const { style, textColor, backgroundColor, gradient } = useSelect(
-		selector,
-		[ clientId ]
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				textColor: _textColor,
+				backgroundColor: _backgroundColor,
+				gradient: _gradient,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				textColor: _textColor,
+				backgroundColor: _backgroundColor,
+				gradient: _gradient,
+			};
+		},
+		[ clientId, isEnabled ]
 	);
 	const value = useMemo( () => {
 		return attributesToStyle( {

packages/block-editor/src/hooks/dimensions.js

@@ -71,9 +71,15 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
-		[ clientId ]
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return undefined;
+			}
+			return select( blockEditorStore ).getBlockAttributes( clientId )
+				?.style;
+		},
+		[ clientId, isEnabled ]
 	);
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {

packages/block-editor/src/hooks/layout.js

@@ -74,13 +74,17 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 
 	const hasGlobalPadding = useSelect(
 		( select ) => {
-			return (
-				( usedLayout?.inherit ||
-					usedLayout?.contentSize ||
-					usedLayout?.type === 'constrained' ) &&
-				select( blockEditorStore ).getSettings().__experimentalFeatures
-					?.useRootPaddingAwareAlignments
-			);
+			// Early return to avoid subscription when layout doesn't use global padding
+			if (
+				! usedLayout?.inherit &&
+				! usedLayout?.contentSize &&
+				usedLayout?.type !== 'constrained'
+			) {
+				return false;
+			}
+
+			return select( blockEditorStore ).getSettings()
+				.__experimentalFeatures?.useRootPaddingAwareAlignments;
 		},
 		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
 	);

packages/block-editor/src/hooks/typography.js

@@ -115,15 +115,29 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 }
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
-	function selector( select ) {
-		const { style, fontFamily, fontSize, fitText } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize, fitText };
-	}
-	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
-		clientId,
-	] );
 	const isEnabled = useHasTypographyPanel( settings );
+
+	const { style, fontFamily, fontSize, fitText } = useSelect(
+		( select ) => {
+			// Early return INSIDE selector to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			};
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
 		[ style, fontSize, fontFamily ]