Perf: Try pure function version of useBlockDisplayInformation and useBlockDisplayTitle

packages/block-editor/README.md

@@ -390,6 +390,23 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md>
 
+### getBlockDisplayInformation
+
+Hook used to try to find a matching block variation and return the appropriate information for display reasons. In order to to try to find a match we need to things: 1. Block's client id to extract it's current attributes. 2. A block variation should have set `isActive` prop to a proper function.
+
+If for any reason a block variation match cannot be found, the returned information come from the Block Type. If no blockType is found with the provided clientId, returns null.
+
+_Parameters_
+
+-   _select_ `Object`: The select function from the WordPress data store.
+-   _options_ `Object`: Options object.
+-   _options.clientId_ `string`: Block's client id.
+-   _options.context_ `string`: Context in which the block is being displayed.
+
+_Returns_
+
+-   `?WPBlockDisplayInformation`: Block's display information, or `null` when the block or its type not found.
+
 ### getColorClassName
 
 Returns a class based on the context a color is being used and its slug.
@@ -939,17 +956,7 @@ Undocumented declaration.
 
 ### useBlockDisplayInformation
 
-Hook used to try to find a matching block variation and return the appropriate information for display reasons. In order to to try to find a match we need to things: 1. Block's client id to extract it's current attributes. 2. A block variation should have set `isActive` prop to a proper function.
-
-If for any reason a block variation match cannot be found, the returned information come from the Block Type. If no blockType is found with the provided clientId, returns null.
-
-_Parameters_
-
--   _clientId_ `string`: Block's client id.
-
-_Returns_
-
--   `?WPBlockDisplayInformation`: Block's display information, or `null` when the block or its type not found.
+Undocumented declaration.
 
 ### useBlockEditContext
 

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

@@ -18,7 +18,7 @@ import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
 import MultiSelectionInspector from '../multi-selection-inspector';
 import BlockVariationTransforms from '../block-variation-transforms';
-import useBlockDisplayInformation from '../use-block-display-information';
+import { getBlockDisplayInformation } from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockStyles from '../block-styles';
 import { default as InspectorControls } from '../inspector-controls';
@@ -326,24 +326,60 @@ const BlockInspectorSingleBlock = ( {
 		window?.__experimentalContentOnlyPatternInsertion &&
 		editedContentOnlySection &&
 		editedContentOnlySection !== clientId;
-	const parentBlockInformation = useBlockDisplayInformation(
-		editedContentOnlySection
+	const {
+		parentTitle,
+		parentIcon,
+		parentDescription,
+		parentName,
+		parentIsSynced,
+		blockTitle,
+		blockIcon,
+		blockDescription,
+		blockCustomName,
+		isBlockSynced,
+	} = useSelect(
+		( select ) => {
+			const parentBlockInformation = getBlockDisplayInformation( select, {
+				clientId: editedContentOnlySection,
+			} );
+			const blockInformation = getBlockDisplayInformation( select, {
+				clientId,
+			} );
+
+			return {
+				parentTitle: parentBlockInformation?.title,
+				parentIcon: parentBlockInformation?.icon,
+				parentDescription: parentBlockInformation?.description,
+				parentName: parentBlockInformation?.name,
+				parentIsSynced: parentBlockInformation?.isSynced,
+				blockTitle: blockInformation?.title,
+				blockIcon: blockInformation?.icon,
+				blockDescription: blockInformation?.description,
+				blockCustomName: blockInformation?.name,
+				isBlockSynced: blockInformation?.isSynced,
+			};
+		},
+		[ editedContentOnlySection, clientId ]
 	);
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const isBlockSynced = blockInformation.isSynced;
 	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
 
 	return (
 		<div className="block-editor-block-inspector">
 			{ hasParentChildBlockCards && (
 				<BlockCard
-					{ ...parentBlockInformation }
-					className={ parentBlockInformation.isSynced && 'is-synced' }
+					title={ parentTitle }
+					icon={ parentIcon }
+					description={ parentDescription }
+					name={ parentName }
+					className={ parentIsSynced && 'is-synced' }
 					parentClientId={ editedContentOnlySection }
 				/>
 			) }
 			<BlockCard
-				{ ...blockInformation }
+				title={ blockTitle }
+				icon={ blockIcon }
+				description={ blockDescription }
+				name={ blockCustomName }
 				allowParentNavigation
 				className={ isBlockSynced && 'is-synced' }
 				isChild={ hasParentChildBlockCards }

packages/block-editor/src/components/block-lock/modal.js

@@ -20,7 +20,7 @@ import { getBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import useBlockLock from './use-block-lock';
-import useBlockDisplayInformation from '../use-block-display-information';
+import { getBlockDisplayInformation } from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
@@ -43,26 +43,30 @@ function getTemplateLockValue( lock ) {
 export default function BlockLockModal( { clientId, onClose } ) {
 	const [ lock, setLock ] = useState( { move: false, remove: false } );
 	const { canEdit, canMove, canRemove } = useBlockLock( clientId );
-	const { allowsEditLocking, templateLock, hasTemplateLock } = useSelect(
-		( select ) => {
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
-			const blockName = getBlockName( clientId );
-			const blockType = getBlockType( blockName );
+	const { allowsEditLocking, templateLock, hasTemplateLock, title } =
+		useSelect(
+			( select ) => {
+				const { getBlockName, getBlockAttributes } =
+					select( blockEditorStore );
+				const blockName = getBlockName( clientId );
+				const blockType = getBlockType( blockName );
 
-			return {
-				allowsEditLocking: ALLOWS_EDIT_LOCKING.includes( blockName ),
-				templateLock: getBlockAttributes( clientId )?.templateLock,
-				hasTemplateLock: !! blockType?.attributes?.templateLock,
-			};
-		},
-		[ clientId ]
-	);
+				return {
+					allowsEditLocking:
+						ALLOWS_EDIT_LOCKING.includes( blockName ),
+					templateLock: getBlockAttributes( clientId )?.templateLock,
+					hasTemplateLock: !! blockType?.attributes?.templateLock,
+					title: getBlockDisplayInformation( select, {
+						clientId,
+					} )?.title,
+				};
+			},
+			[ clientId ]
+		);
 	const [ applyTemplateLock, setApplyTemplateLock ] = useState(
 		!! templateLock
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const blockInformation = useBlockDisplayInformation( clientId );
 
 	useEffect( () => {
 		setLock( {
@@ -80,7 +84,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			title={ sprintf(
 				/* translators: %s: Name of the block. */
 				__( 'Lock %s' ),
-				blockInformation.title
+				title
 			) }
 			overlayClassName="block-editor-block-lock-modal"
 			onRequestClose={ onClose }

packages/block-editor/src/components/block-parent-selector/index.js

@@ -9,7 +9,7 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useBlockDisplayInformation from '../use-block-display-information';
+import { getBlockDisplayInformation } from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
@@ -23,7 +23,7 @@ import { unlock } from '../../lock-unlock';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { parentClientId } = useSelect( ( select ) => {
+	const { parentClientId, title, icon } = useSelect( ( select ) => {
 		const {
 			getBlockParents,
 			getSelectedBlockClientId,
@@ -33,11 +33,15 @@ export default function BlockParentSelector() {
 		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
 		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const blockInformation = getBlockDisplayInformation( select, {
+			clientId: _parentClientId,
+		} );
 		return {
 			parentClientId: _parentClientId,
+			title: blockInformation?.title,
+			icon: blockInformation?.icon,
 		};
 	}, [] );
-	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -60,10 +64,10 @@ export default function BlockParentSelector() {
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select parent block: %s' ),
-					blockInformation?.title
+					title
 				) }
 				showTooltip
-				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
+				icon={ <BlockIcon icon={ icon } /> }
 			/>
 		</div>
 	);

packages/block-editor/src/components/block-quick-navigation/index.js

@@ -16,8 +16,8 @@ import {
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
-import useBlockDisplayInformation from '../use-block-display-information';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { getBlockDisplayInformation } from '../use-block-display-information';
+import { getBlockDisplayTitle } from '../block-title/use-block-display-title';
 
 export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 	if ( ! clientIds.length ) {
@@ -37,20 +37,25 @@ export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 }
 
 function BlockQuickNavigationItem( { clientId, onSelect } ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle = useBlockDisplayTitle( {
-		clientId,
-		context: 'list-view',
-	} );
-	const { isSelected } = useSelect(
+	const { isSelected, icon, blockTitle } = useSelect(
 		( select ) => {
 			const { isBlockSelected, hasSelectedInnerBlock } =
 				select( blockEditorStore );
 
+			const blockInformation = getBlockDisplayInformation( select, {
+				clientId,
+				context: 'list-view',
+			} );
+
 			return {
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
+				icon: blockInformation?.icon,
+				blockTitle: getBlockDisplayTitle( select, {
+					clientId,
+					context: 'list-view',
+				} ),
 			};
 		},
 		[ clientId ]
@@ -71,7 +76,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 		>
 			<Flex>
 				<FlexItem>
-					<BlockIcon icon={ blockInformation?.icon } />
+					<BlockIcon icon={ icon } />
 				</FlexItem>
 				<FlexBlock style={ { textAlign: 'left' } }>
 					<Truncate>{ blockTitle }</Truncate>

packages/block-editor/src/components/block-rename/modal.js

@@ -17,19 +17,21 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useBlockDisplayInformation } from '..';
+import { getBlockDisplayInformation } from '../use-block-display-information';
 import isEmptyString from './is-empty-string';
 import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockRenameModal( { clientId, onClose } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState();
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const { metadata } = useSelect(
+	const { originalBlockName, metadata } = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = select( blockEditorStore );
 
 			return {
+				originalBlockName: getBlockDisplayInformation( select, {
+					clientId,
+				} )?.title,
 				metadata: getBlockAttributes( clientId )?.metadata,
 			};
 		},
@@ -38,7 +40,6 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const blockName = metadata?.name || '';
-	const originalBlockName = blockInformation?.title;
 	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
 	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
 	const hasOverridesWarning =