From 664a5afc31106f63c01cbaca5914a5ff22b029a9 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 14 Jun 2023 09:18:05 +0400
Subject: [PATCH] Block Editor: Improve data selector for
 BlockQuickNavigationItem (#51429)

* Block Editor: Improve data selector for BlockQuickNavigationItem

* Remove unnecessary 'key' prop
---
 .../block-quick-navigation/index.js           | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 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
index 35f24255b9ba67..de33c8a427f257 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -8,7 +8,10 @@ import {
 	__experimentalHStack as HStack,
 	FlexItem,
 } from '@wordpress/components';
-import { getBlockType, __experimentalGetBlockLabel } from '@wordpress/blocks';
+import {
+	__experimentalGetBlockLabel,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -33,7 +36,7 @@ export default function BlockQuickNavigation( { clientIds } ) {
 }
 
 function BlockQuickNavigationItem( { clientId } ) {
-	const { name, attributes, isSelected } = useSelect(
+	const { name, icon, isSelected } = useSelect(
 		( select ) => {
 			const {
 				getBlockName,
@@ -41,9 +44,20 @@ function BlockQuickNavigationItem( { clientId } ) {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+
+			const blockType = getBlockType( getBlockName( clientId ) );
+			const attributes = getBlockAttributes( clientId );
+
 			return {
-				name: getBlockName( clientId ),
-				attributes: getBlockAttributes( clientId ),
+				name:
+					blockType &&
+					__experimentalGetBlockLabel(
+						blockType,
+						attributes,
+						'list-view'
+					),
+				icon: blockType?.icon,
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
@@ -52,22 +66,15 @@ function BlockQuickNavigationItem( { clientId } ) {
 		[ clientId ]
 	);
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const blockType = getBlockType( name );
+
 	return (
 		<Button
-			key={ clientId }
 			isPressed={ isSelected }
 			onClick={ () => selectBlock( clientId ) }
 		>
 			<HStack justify="flex-start">
-				<BlockIcon icon={ blockType.icon } />
-				<FlexItem>
-					{ __experimentalGetBlockLabel(
-						blockType,
-						attributes,
-						'list-view'
-					) }
-				</FlexItem>
+				<BlockIcon icon={ icon } />
+				<FlexItem>{ name }</FlexItem>
 			</HStack>
 		</Button>
 	);