Reduce amount of rerendering

WordPress · Jun 8, 2023 · 6006434 · 6006434
1 parent 06f29ee
commit 6006434
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 46 deletions.
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -15,53 +15,60 @@ import { getBlockType, __experimentalGetBlockLabel } from '@wordpress/blocks';
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
-import { unlock } from '../../lock-unlock';
 
 export default function BlockQuickNavigation( { clientIds } ) {
-	const blocks = useSelect(
+	if ( ! clientIds.length ) {
+		return null;
+	}
+	return (
+		<VStack spacing={ 1 }>
+			{ clientIds.map( ( clientId ) => (
+				<BlockQuickNavigationItem
+					key={ clientId }
+					clientId={ clientId }
+				/>
+			) ) }
+		</VStack>
+	);
+}
+
+function BlockQuickNavigationItem( { clientId } ) {
+	const { name, attributes, isSelected } = useSelect(
 		( select ) => {
-			const { getBlock, isBlockSelected, hasSelectedInnerBlock } = unlock(
-				select( blockEditorStore )
-			);
-			return clientIds.map( ( clientId ) => ( {
-				block: getBlock( clientId ),
+			const {
+				getBlockName,
+				getBlockAttributes,
+				isBlockSelected,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
+			return {
+				name: getBlockName( clientId ),
+				attributes: getBlockAttributes( clientId ),
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
-			} ) );
+			};
 		},
-		[ clientIds ]
+		[ clientId ]
 	);
-
 	const { selectBlock } = useDispatch( blockEditorStore );
-
-	if ( ! blocks.length ) {
-		return null;
-	}
-
+	const blockType = getBlockType( name );
 	return (
-		<VStack spacing={ 1 }>
-			{ blocks.map( ( { block, isSelected } ) => {
-				const blockType = getBlockType( block.name );
-				return (
-					<Button
-						key={ block.clientId }
-						isPressed={ isSelected }
-						onClick={ () => selectBlock( block.clientId ) }
-					>
-						<HStack justify="flex-start">
-							<BlockIcon icon={ blockType.icon } />
-							<FlexItem>
-								{ __experimentalGetBlockLabel(
-									blockType,
-									block.attributes,
-									'list-view'
-								) }
-							</FlexItem>
-						</HStack>
-					</Button>
-				);
-			} ) }
-		</VStack>
+		<Button
+			key={ clientId }
+			isPressed={ isSelected }
+			onClick={ () => selectBlock( clientId ) }
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ blockType.icon } />
+				<FlexItem>
+					{ __experimentalGetBlockLabel(
+						blockType,
+						attributes,
+						'list-view'
+					) }
+				</FlexItem>
+			</HStack>
+		</Button>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
@@ -16,12 +16,12 @@ import { unlock } from '../../../private-apis';
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
 export default function PageContent() {
-	const pageContentClientIds = useSelect( ( select ) => {
-		const { getClientIdsWithDescendants, getBlockName } =
-			select( blockEditorStore );
-		return getClientIdsWithDescendants().filter( ( clientId ) =>
-			PAGE_CONTENT_BLOCK_TYPES.includes( getBlockName( clientId ) )
-		);
-	}, [] );
-	return <BlockQuickNavigation clientIds={ pageContentClientIds } />;
+	const clientIds = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+				PAGE_CONTENT_BLOCK_TYPES
+			),
+		[]
+	);
+	return <BlockQuickNavigation clientIds={ clientIds } />;
 }