Improve getBlockEditingMode() and useAppender() performance (#51675)

* Don't memoize getBlockEditingMode() * useAppender(): Check block selection before other checks * Don't return JSX from useSelect()
WordPress · Jun 21, 2023 · a8ce505 · a8ce505
1 parent 7f4d64b
commit a8ce505
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 57 deletions.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
@@ -41,7 +41,7 @@ function DefaultAppender( { rootClientId } ) {
 }
 
 function useAppender( rootClientId, CustomAppender ) {
-	const { hideInserter, isParentSelected } = useSelect(
+	const isVisible = useSelect(
 		( select ) => {
 			const {
 				getTemplateLock,
@@ -50,35 +50,42 @@ function useAppender( rootClientId, CustomAppender ) {
 				getBlockEditingMode,
 			} = unlock( select( blockEditorStore ) );
 
-			const selectedBlockClientId = getSelectedBlockClientId();
+			if ( CustomAppender === false ) {
+				return false;
+			}
 
-			return {
-				hideInserter:
-					!! getTemplateLock( rootClientId ) ||
-					getBlockEditingMode( rootClientId ) === 'disabled' ||
-					__unstableGetEditorMode() === 'zoom-out',
-				isParentSelected:
+			if ( ! CustomAppender ) {
+				const selectedBlockClientId = getSelectedBlockClientId();
+				const isParentSelected =
 					rootClientId === selectedBlockClientId ||
-					( ! rootClientId && ! selectedBlockClientId ),
-			};
+					( ! rootClientId && ! selectedBlockClientId );
+				if ( ! isParentSelected ) {
+					return false;
+				}
+			}
+
+			if (
+				getTemplateLock( rootClientId ) ||
+				getBlockEditingMode( rootClientId ) === 'disabled' ||
+				__unstableGetEditorMode() === 'zoom-out'
+			) {
+				return false;
+			}
+
+			return true;
 		},
-		[ rootClientId ]
+		[ rootClientId, CustomAppender ]
 	);
 
-	if ( hideInserter || CustomAppender === false ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 
-	if ( CustomAppender ) {
-		// Prefer custom render prop if provided.
-		return <CustomAppender />;
-	}
-
-	if ( ! isParentSelected ) {
-		return null;
-	}
-
-	return <DefaultAppender rootClientId={ rootClientId } />;
+	return CustomAppender ? (
+		<CustomAppender />
+	) : (
+		<DefaultAppender rootClientId={ rootClientId } />
+	);
 }
 
 function BlockListAppender( {

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -73,41 +73,31 @@ export function getLastInsertedBlocksClientIds( state ) {
  * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
  *                            `'contentOnly'`, or `'default'`.
  */
-export const getBlockEditingMode = createSelector(
-	( state, clientId = '' ) => {
-		if ( state.blockEditingModes.has( clientId ) ) {
-			return state.blockEditingModes.get( clientId );
-		}
-		if ( ! clientId ) {
-			return 'default';
-		}
-		const rootClientId = getBlockRootClientId( state, clientId );
-		const templateLock = getTemplateLock( state, rootClientId );
-		if ( templateLock === 'contentOnly' ) {
-			const name = getBlockName( state, clientId );
-			// TODO: Terrible hack! We're calling the global select() function
-			// here instead of using createRegistrySelector(). The problem with
-			// using createRegistrySelector() is that then the public
-			// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
-			// call this private block-editor selector due to a bug in
-			// @wordpress/data. See
-			// https://github.com/WordPress/gutenberg/pull/50985.
-			const isContent =
-				select( blocksStore ).__experimentalHasContentRoleAttribute(
-					name
-				);
-			return isContent ? 'contentOnly' : 'disabled';
-		}
-		const parentMode = getBlockEditingMode( state, rootClientId );
-		return parentMode === 'contentOnly' ? 'default' : parentMode;
-	},
-	( state ) => [
-		state.blockEditingModes,
-		state.blocks.parents,
-		state.settings.templateLock,
-		state.blockListSettings,
-	]
-);
+export function getBlockEditingMode( state, clientId = '' ) {
+	if ( state.blockEditingModes.has( clientId ) ) {
+		return state.blockEditingModes.get( clientId );
+	}
+	if ( ! clientId ) {
+		return 'default';
+	}
+	const rootClientId = getBlockRootClientId( state, clientId );
+	const templateLock = getTemplateLock( state, rootClientId );
+	if ( templateLock === 'contentOnly' ) {
+		const name = getBlockName( state, clientId );
+		// TODO: Terrible hack! We're calling the global select() function
+		// here instead of using createRegistrySelector(). The problem with
+		// using createRegistrySelector() is that then the public
+		// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
+		// call this private block-editor selector due to a bug in
+		// @wordpress/data. See
+		// https://github.com/WordPress/gutenberg/pull/50985.
+		const isContent =
+			select( blocksStore ).__experimentalHasContentRoleAttribute( name );
+		return isContent ? 'contentOnly' : 'disabled';
+	}
+	const parentMode = getBlockEditingMode( state, rootClientId );
+	return parentMode === 'contentOnly' ? 'default' : parentMode;
+}
 
 /**
  * Returns true if the block with the given client ID and all of its descendants