From f94dadb5b562308795a85398db2681f42bda6c6b Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 17 Oct 2019 07:38:45 +0800
Subject: [PATCH] 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
---
 .../src/components/block-navigation/list.js   | 25 ++++++++++++++++++-
 .../src/navigation-menu-item/index.js         |  2 ++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 0a34d24ff4e4b6..a0910caf5b41cc 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/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>
diff --git a/packages/block-library/src/navigation-menu-item/index.js b/packages/block-library/src/navigation-menu-item/index.js
index 496ef92070428e..b61f3699e12b5c 100644
--- a/packages/block-library/src/navigation-menu-item/index.js
+++ b/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,
 };