Try setting a block display name for the Block Navigator. (#17519)

* Really simple first attempt at showing a display name in the navigator

* Strip any RichText formatting

* Add display name for navigation menu item block

* Refactor to use displayNameAttribute property

* Change name of displayName options

Author: talldan

packages/block-editor/src/components/block-navigation/list.js

@@ -10,12 +10,35 @@ import classnames from 'classnames';
 import { Button } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { create, getTextContent } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 
+/**
+ * Get the block display name, if it has one, or the block title if it doesn't.
+ *
+ * @param {Object} blockType  The block type.
+ * @param {Object} attributes The values of the block's attributes
+ *
+ * @return {string} The display name value.
+ */
+function getBlockDisplayName( blockType, attributes ) {
+	const displayNameAttribute = blockType.__experimentalDisplayName;
+
+	if ( ! displayNameAttribute || ! attributes[ displayNameAttribute ] ) {
+		return blockType.title;
+	}
+
+	// Strip any formatting.
+	const richTextValue = create( { html: attributes[ displayNameAttribute ] } );
+	const formatlessDisplayName = getTextContent( richTextValue );
+
+	return formatlessDisplayName;
+}
+
 export default function BlockNavigationList( {
 	blocks,
 	selectedBlockClientId,
@@ -43,7 +66,7 @@ export default function BlockNavigationList( {
 								onClick={ () => selectBlock( block.clientId ) }
 							>
 								<BlockIcon icon={ blockType.icon } showColors />
-								{ blockType.title }
+								{ getBlockDisplayName( blockType, block.attributes ) }
 								{ isSelected && <span className="screen-reader-text">{ __( '(selected block)' ) }</span> }
 							</Button>
 						</div>

packages/block-library/src/navigation-menu-item/index.js

@@ -22,6 +22,8 @@ export const settings = {
 
 	description: __( 'Add a page, link, or other item to your Navigation Menu.' ),
 
+	__experimentalDisplayName: 'label',
+
 	edit,
 	save,
 };