From 2862a18213ab5363df3a14ba2e291f7c00c1024f Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 17 Jan 2020 11:26:01 +0800
Subject: [PATCH] Update breadcrumb to use selector version of
 getAccessibilityLabel

---
 .../components/block-list/block-popover.js    |  1 -
 .../src/components/block-list/breadcrumb.js   | 25 ++++++-------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
index 453b56b69f17dc..30943c67d5039b 100644
--- a/packages/block-editor/src/components/block-list/block-popover.js
+++ b/packages/block-editor/src/components/block-list/block-popover.js
@@ -160,7 +160,6 @@ function BlockPopover( {
 			{ shouldShowBreadcrumb && (
 				<BlockBreadcrumb
 					clientId={ clientId }
-					rootClientId={ rootClientId }
 					moverDirection={ moverDirection }
 					data-align={ align }
 				/>
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 2f0c4f28bd9180..db5f8a9d8177e1 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -5,10 +5,6 @@ import { Toolbar, Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import {
-	getBlockType,
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,20 +18,16 @@ import BlockTitle from '../block-title';
  *
  * @param {string} props          Component props.
  * @param {string} props.clientId Client ID of block.
+ * @param {"horizonal"|"vertical"} props.moverDirection A string representing the direction of
+ *                                                      movers, can be 'horizontal' or 'vertical'.
  *
  * @return {WPComponent} The component to be rendered.
  */
-function BlockBreadcrumb( { clientId, rootClientId, moverDirection, ...props } ) {
-	const selected = useSelect( ( select ) => {
-		const {
-			__unstableGetBlockWithoutInnerBlocks,
-			getBlockIndex,
-		} = select( 'core/block-editor' );
-		const index = getBlockIndex( clientId, rootClientId );
-		const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId );
-		return { index, name, attributes };
-	}, [ clientId, rootClientId ] );
-	const { index, name, attributes } = selected;
+function BlockBreadcrumb( { clientId, moverDirection, ...props } ) {
+	const label = useSelect(
+		( select ) => select( 'core/block-editor' ).getAccessibleBlockLabel( clientId, moverDirection ),
+		[ clientId, moverDirection ]
+	);
 	const {
 		setNavigationMode,
 		removeBlock,
@@ -56,9 +48,6 @@ function BlockBreadcrumb( { clientId, rootClientId, moverDirection, ...props } )
 		}
 	}
 
-	const blockType = getBlockType( name );
-	const label = getAccessibleBlockLabel( blockType, attributes, index + 1, moverDirection );
-
 	return (
 		<div className="block-editor-block-list__breadcrumb" { ...props }>
 			<Toolbar>