Split block label and accessibility label

WordPress · Feb 7, 2020 · ea11eb9 · ea11eb9
1 parent 31e7219
commit ea11eb9
Show file tree

Hide file tree

Showing 27 changed files with 490 additions and 399 deletions.
diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -32,6 +32,20 @@ _Returns_
 
 -   `boolean`: Whether the last change was automatic.
 
+<a name="getAccessibleBlockLabel" href="#getAccessibleBlockLabel">#</a> **getAccessibleBlockLabel**
+
+Get a label for the block for use by screenreaders, this can include the block title, the
+position of the block, and the value of the `getAccessibilityLabel` function if it's specified.
+
+_Parameters_
+
+-   _state_ `Object`: Store state.
+-   _clientId_ `string`: ClientId for the block.
+
+_Returns_
+
+-   `string`: The accessibility label for the block.
+
 <a name="getAdjacentBlockClientId" href="#getAdjacentBlockClientId">#</a> **getAdjacentBlockClientId**
 
 Returns the client ID of the block adjacent one at the given reference
@@ -133,6 +147,20 @@ _Returns_
 
 -   `Object`: Insertion point object with `rootClientId`, `index`.
 
+<a name="getBlockLabel" href="#getBlockLabel">#</a> **getBlockLabel**
+
+Get the label for the block, usually this is either the block title,
+or the value of the attribute denoted by the block's `label` property.
+
+_Parameters_
+
+-   _state_ `Object`: Store state.
+-   _clientId_ `string`: ClientId for the block.
+
+_Returns_
+
+-   `string`: The block label.
+
 <a name="getBlockListSettings" href="#getBlockListSettings">#</a> **getBlockListSettings**
 
 Returns the Block List settings of a block, if any exist.

diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
@@ -206,8 +206,6 @@ function BlockPopover( {
 			{ shouldShowBreadcrumb && (
 				<BlockBreadcrumb
 					clientId={ clientId }
-					rootClientId={ rootClientId }
-					moverDirection={ moverDirection }
 					data-align={ align }
 				/>
 			) }

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -13,7 +13,6 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -194,25 +193,17 @@ class BlockListBlock extends Component {
 
 	render() {
 		const {
-			attributes,
-			blockType,
+			accessibilityLabel,
 			clientId,
 			icon,
 			isSelected,
 			isValid,
-			order,
 			title,
 			showFloatingToolbar,
 			parentId,
 			isTouchable,
 		} = this.props;
 
-		const accessibilityLabel = getAccessibleBlockLabel(
-			blockType,
-			attributes,
-			order + 1
-		);
-
 		return (
 			<>
 				{ showFloatingToolbar && (
@@ -263,6 +254,7 @@ class BlockListBlock extends Component {
 export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
+			getAccessibleBlockLabel,
 			getBlockIndex,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
@@ -281,7 +273,7 @@ export default compose( [
 		const isSelected = isBlockSelected( clientId );
 		const isLastBlock = order === getBlockCount( rootClientId ) - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-		const { name, attributes, isValid } = block || {};
+		const { name, isValid } = block || {};
 
 		const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
 		const blockType = getBlockType( name || 'core/missing' );
@@ -341,13 +333,13 @@ export default compose( [
 		const isRootListInnerBlockHolder =
 			! isSelectedBlockNested && isInnerBlockHolder;
 
+		const accessibilityLabel = getAccessibleBlockLabel( clientId );
+
 		return {
 			icon,
 			name: name || 'core/missing',
-			order,
+			accessibilityLabel,
 			title,
-			attributes,
-			blockType,
 			isLastBlock,
 			isSelected,
 			isValid,

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
@@ -25,27 +21,12 @@ import BlockTitle from '../block-title';
  *
  * @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 ]
+function BlockBreadcrumb( { clientId, ...props } ) {
+	const label = useSelect(
+		( select ) =>
+			select( 'core/block-editor' ).getAccessibleBlockLabel( clientId ),
+		[ clientId ]
 	);
-	const { index, name, attributes } = selected;
 	const { setNavigationMode, removeBlock } = useDispatch(
 		'core/block-editor'
 	);
@@ -65,14 +46,6 @@ function BlockBreadcrumb( {
 		}
 	}
 
-	const blockType = getBlockType( name );
-	const label = getAccessibleBlockLabel(
-		blockType,
-		attributes,
-		index + 1,
-		moverDirection
-	);
-
 	return (
 		<div className="block-editor-block-list__breadcrumb" { ...props }>
 			<Toolbar>

diff --git a/packages/block-editor/src/components/block-navigation/item.js b/packages/block-editor/src/components/block-navigation/item.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import {
+	getBlockType,
+} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import ButtonBlockAppender from '../button-block-appender';
+
+export default function BlockNavigationItem( { block, isSelected, onClick, children } ) {
+	const { clientId, name } = block;
+	const blockIcon = getBlockType( name ).icon;
+	const blockLabel = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlockLabel( clientId ),
+		[ clientId ]
+	);
+
+	return (
+		<li>
+			<div className="block-editor-block-navigation-item__block">
+				<Button
+					className={ classnames( 'block-editor-block-navigation-item__button', {
+						'is-selected': isSelected,
+					} ) }
+					onClick={ onClick }
+				>
+					<BlockIcon icon={ blockIcon } showColors />
+					{ blockLabel }
+					{ isSelected && <span className="screen-reader-text">{ __( '(selected block)' ) }</span> }
+				</Button>
+			</div>
+			{ children }
+		</li>
+	);
+}
+
+BlockNavigationItem.Appender = function( { parentBlockClientId } ) {
+	return (
+		<li>
+			<div className="block-editor-block-navigation-item__appender">
+				<ButtonBlockAppender
+					rootClientId={ parentBlockClientId }
+					__experimentalSelectBlockOnInsert={ false }
+				/>
+			</div>
+		</li>
+	);
+};
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
@@ -2,23 +2,11 @@
  * External dependencies
  */
 import { isNil, map, omitBy } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import {
-	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
-} from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import BlockIcon from '../block-icon';
-import ButtonBlockAppender from '../button-block-appender';
+import BlockNavigationItem from './item';
 
 export default function BlockNavigationList( {
 	blocks,
@@ -40,30 +28,13 @@ export default function BlockNavigationList( {
 		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<ul className="block-editor-block-navigation__list" role="list">
 			{ map( omitBy( blocks, isNil ), ( block ) => {
-				const blockType = getBlockType( block.name );
-				const isSelected = block.clientId === selectedBlockClientId;
-
 				return (
-					<li key={ block.clientId }>
-						<div className="block-editor-block-navigation__item">
-							<Button
-								className={ classnames(
-									'block-editor-block-navigation__item-button',
-									{
-										'is-selected': isSelected,
-									}
-								) }
-								onClick={ () => selectBlock( block.clientId ) }
-							>
-								<BlockIcon icon={ blockType.icon } showColors />
-								{ getBlockLabel( blockType, block.attributes ) }
-								{ isSelected && (
-									<span className="screen-reader-text">
-										{ __( '(selected block)' ) }
-									</span>
-								) }
-							</Button>
-						</div>
+					<BlockNavigationItem
+						key={ block.clientId }
+						block={ block }
+						onClick={ () => selectBlock( block.clientId ) }
+						isSelected={ block.clientId === selectedBlockClientId }
+					>
 						{ showNestedBlocks &&
 							!! block.innerBlocks &&
 							!! block.innerBlocks.length && (
@@ -78,18 +49,13 @@ export default function BlockNavigationList( {
 									showNestedBlocks
 								/>
 							) }
-					</li>
+					</BlockNavigationItem>
 				);
 			} ) }
 			{ shouldShowAppender && (
-				<li>
-					<div className="block-editor-block-navigation__item">
-						<ButtonBlockAppender
-							rootClientId={ parentBlockClientId }
-							__experimentalSelectBlockOnInsert={ false }
-						/>
-					</div>
-				</li>
+				<BlockNavigationItem.Appender
+					parentBlockClientId={ parentBlockClientId }
+				/>
 			) }
 		</ul>
 		/* eslint-enable jsx-a11y/no-redundant-roles */

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -43,7 +43,8 @@ $tree-item-height: 36px;
 		margin-left: 1.5em;
 	}
 
-	.block-editor-block-navigation__item {
+	.block-editor-block-navigation-item__block,
+	.block-editor-block-navigation-item__appender {
 		position: relative;
 
 		&::before {
@@ -57,7 +58,7 @@ $tree-item-height: 36px;
 		}
 	}
 
-	.block-editor-block-navigation__item-button {
+	.block-editor-block-navigation-item__button {
 		margin-left: 0.8em;
 		width: calc(100% - 0.8em);
 	}
@@ -76,7 +77,7 @@ $tree-item-height: 36px;
 	}
 }
 
-.block-editor-block-navigation__item-button {
+.block-editor-block-navigation-item__button {
 	display: flex;
 	align-items: center;
 	width: 100%;