Update breadcrumb to use selector version of getAccessibilityLabel

WordPress · Jan 17, 2020 · 2862a18 · 2862a18
1 parent 0465d5e
commit 2862a18
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -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
@@ -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>