From b50ec2a6d9b0933da7aa418bd819a6ac4cf1ede9 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 22 Jun 2022 17:20:58 +1000
Subject: [PATCH 01/14] List View: Use heading content for button label text if
 available

---
 .../list-view/block-select-button.js          | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index f6eb82be503784..8161c52a6d61c3 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -19,6 +24,11 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
+import { store as blockEditorStore } from '../../store';
+
+// For this list of hard-coded blocks, the block content will be used as the button label.
+// If no content exists, then the block's title will be used as a fallback.
+const CONTENT_LABEL_BLOCKS = [ 'core/heading', 'core/paragraph' ];
 
 function ListViewBlockSelectButton(
 	{
@@ -35,6 +45,24 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+
+	// Attempt to get block content as the label for the button.
+	const contentLabel = useSelect(
+		( select ) => {
+			let content;
+			const block = select( blockEditorStore ).getBlock( clientId );
+			if (
+				CONTENT_LABEL_BLOCKS.some(
+					( blockName ) => blockName === block?.name
+				)
+			) {
+				content = stripHTML( block?.attributes?.content );
+			}
+			return content;
+		},
+		[ clientId ]
+	);
+
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -73,7 +101,16 @@ function ListViewBlockSelectButton(
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<span className="block-editor-list-view-block-select-button__title">
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+					{ contentLabel ? (
+						<Truncate limit={ 35 } ellipsizeMode="tail">
+							{ contentLabel }
+						</Truncate>
+					) : (
+						<BlockTitle
+							clientId={ clientId }
+							maximumLength={ 35 }
+						/>
+					) }
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor">

From ff204f6cc91a139a992a9efeb2a3e9de0e1931db Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 23 Jun 2022 12:20:21 +1000
Subject: [PATCH 02/14] Use __experimentalLabel and a custom list-view context
 for the label logic

---
 packages/block-editor/README.md               |  1 +
 .../src/components/block-title/index.js       |  5 ++-
 .../block-title/use-block-display-title.js    |  9 +++-
 .../list-view/block-select-button.js          | 44 +++----------------
 packages/block-library/src/heading/index.js   | 10 ++++-
 5 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 6f7b087c6faacc..305c32f9d5d7df 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -246,6 +246,7 @@ _Parameters_
 -   _props_ `Object`:
 -   _props.clientId_ `string`: Client ID of block.
 -   _props.maximumLength_ `number|undefined`: The maximum length that the block title string may be before truncated.
+-   _props.context_ `string|undefined`: The context to pass to `getBlockLabel`.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js
index 2849c82f332bdc..30339224641df9 100644
--- a/packages/block-editor/src/components/block-title/index.js
+++ b/packages/block-editor/src/components/block-title/index.js
@@ -17,9 +17,10 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength } ) {
-	return useBlockDisplayTitle( clientId, maximumLength );
+export default function BlockTitle( { clientId, maximumLength, context } ) {
+	return useBlockDisplayTitle( clientId, maximumLength, context );
 }
diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js
index ab5aed4dbb84e8..777c4a4f69a533 100644
--- a/packages/block-editor/src/components/block-title/use-block-display-title.js
+++ b/packages/block-editor/src/components/block-title/use-block-display-title.js
@@ -26,9 +26,14 @@ import { store as blockEditorStore } from '../../store';
  *
  * @param {string}           clientId      Client ID of block.
  * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle( clientId, maximumLength ) {
+export default function useBlockDisplayTitle(
+	clientId,
+	maximumLength,
+	context
+) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -63,7 +68,7 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
+		? getBlockLabel( blockType, attributes, context )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 8161c52a6d61c3..fac98281470b70 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -6,12 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { Button } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -24,11 +19,6 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
-import { store as blockEditorStore } from '../../store';
-
-// For this list of hard-coded blocks, the block content will be used as the button label.
-// If no content exists, then the block's title will be used as a fallback.
-const CONTENT_LABEL_BLOCKS = [ 'core/heading', 'core/paragraph' ];
 
 function ListViewBlockSelectButton(
 	{
@@ -46,23 +36,6 @@ function ListViewBlockSelectButton(
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
 
-	// Attempt to get block content as the label for the button.
-	const contentLabel = useSelect(
-		( select ) => {
-			let content;
-			const block = select( blockEditorStore ).getBlock( clientId );
-			if (
-				CONTENT_LABEL_BLOCKS.some(
-					( blockName ) => blockName === block?.name
-				)
-			) {
-				content = stripHTML( block?.attributes?.content );
-			}
-			return content;
-		},
-		[ clientId ]
-	);
-
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -101,16 +74,11 @@ function ListViewBlockSelectButton(
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<span className="block-editor-list-view-block-select-button__title">
-					{ contentLabel ? (
-						<Truncate limit={ 35 } ellipsizeMode="tail">
-							{ contentLabel }
-						</Truncate>
-					) : (
-						<BlockTitle
-							clientId={ clientId }
-							maximumLength={ 35 }
-						/>
-					) }
+					<BlockTitle
+						clientId={ clientId }
+						maximumLength={ 35 }
+						context="list-view"
+					/>
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor">
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index 989812cd46c89b..e829a7ae15108e 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -31,9 +31,15 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		if ( context === 'accessibility' ) {
-			const { content, level } = attributes;
+		const { content, level } = attributes;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && content ) {
+			return content;
+		}
 
+		if ( context === 'accessibility' ) {
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

From f243ea4a408eaf39d8bf0546f4cdc98c97166ff5 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 23 Jun 2022 12:21:42 +1000
Subject: [PATCH 03/14] Remove whitespace change

---
 .../block-editor/src/components/list-view/block-select-button.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index fac98281470b70..13224c06ab240d 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -35,7 +35,6 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.

From 3905d86f9d54b059fc33df578f8c679499fe4efb Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 28 Jun 2022 16:36:39 +1000
Subject: [PATCH 04/14] Roll back to earlier approach, tweak layout to work out
 what to do about anchor id text

---
 packages/block-editor/README.md               |  1 -
 .../src/components/block-title/index.js       |  5 +-
 .../block-title/use-block-display-title.js    |  9 +--
 .../list-view/block-select-button.js          | 69 +++++++++++++++----
 .../src/components/list-view/style.scss       |  4 ++
 packages/block-library/src/heading/index.js   |  9 +--
 6 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 305c32f9d5d7df..6f7b087c6faacc 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -246,7 +246,6 @@ _Parameters_
 -   _props_ `Object`:
 -   _props.clientId_ `string`: Client ID of block.
 -   _props.maximumLength_ `number|undefined`: The maximum length that the block title string may be before truncated.
--   _props.context_ `string|undefined`: The context to pass to `getBlockLabel`.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js
index 30339224641df9..2849c82f332bdc 100644
--- a/packages/block-editor/src/components/block-title/index.js
+++ b/packages/block-editor/src/components/block-title/index.js
@@ -17,10 +17,9 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
- * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength, context } ) {
-	return useBlockDisplayTitle( clientId, maximumLength, context );
+export default function BlockTitle( { clientId, maximumLength } ) {
+	return useBlockDisplayTitle( clientId, maximumLength );
 }
diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js
index 777c4a4f69a533..ab5aed4dbb84e8 100644
--- a/packages/block-editor/src/components/block-title/use-block-display-title.js
+++ b/packages/block-editor/src/components/block-title/use-block-display-title.js
@@ -26,14 +26,9 @@ import { store as blockEditorStore } from '../../store';
  *
  * @param {string}           clientId      Client ID of block.
  * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
- * @param {string|undefined} context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle(
-	clientId,
-	maximumLength,
-	context
-) {
+export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -68,7 +63,7 @@ export default function useBlockDisplayTitle(
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes, context )
+		? getBlockLabel( blockType, attributes )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 13224c06ab240d..eb1f355169a1ad 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -6,7 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -19,6 +25,11 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
+import { store as blockEditorStore } from '../../store';
+
+// For this list of hard-coded blocks, the block content will be used as the button label.
+// If no content exists, then the block's title will be used as a fallback.
+const CONTENT_LABEL_BLOCKS = [ 'core/heading' ];
 
 function ListViewBlockSelectButton(
 	{
@@ -35,6 +46,24 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+
+	// Attempt to get block content as the label for the button.
+	const contentLabel = useSelect(
+		( select ) => {
+			let content;
+			const block = select( blockEditorStore ).getBlock( clientId );
+			if (
+				CONTENT_LABEL_BLOCKS.some(
+					( blockName ) => blockName === block?.name
+				)
+			) {
+				content = stripHTML( block?.attributes?.content );
+			}
+			return content;
+		},
+		[ clientId ]
+	);
+
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -72,18 +101,32 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<span className="block-editor-list-view-block-select-button__title">
-					<BlockTitle
-						clientId={ clientId }
-						maximumLength={ 35 }
-						context="list-view"
-					/>
-				</span>
-				{ blockInformation?.anchor && (
-					<span className="block-editor-list-view-block-select-button__anchor">
-						{ blockInformation.anchor }
-					</span>
-				) }
+				<HStack
+					alignment="center"
+					justify="flex-start"
+					className="block-editor-list-view-block-select-button__label-wrapper"
+				>
+					{ contentLabel ? (
+						<Truncate
+							className="block-editor-list-view-block-select-button__title"
+							ellipsizeMode="auto"
+						>
+							{ contentLabel }
+						</Truncate>
+					) : (
+						<span className="block-editor-list-view-block-select-button__title">
+							<BlockTitle
+								clientId={ clientId }
+								maximumLength={ 35 }
+							/>
+						</span>
+					) }
+					{ blockInformation?.anchor && (
+						<span className="block-editor-list-view-block-select-button__anchor">
+							{ blockInformation.anchor }
+						</span>
+					) }
+				</HStack>
 				{ isLocked && (
 					<span className="block-editor-list-view-block-select-button__lock">
 						<Icon icon={ lock } />
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index a4efefeafbd992..50ca99541c4c84 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -297,6 +297,10 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__label-wrapper {
+		max-width: 225px;
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index e829a7ae15108e..45c3f44a2e9792 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -31,15 +31,8 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		const { content, level } = attributes;
-
-		// In the list view, use the block's content as the label.
-		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && content ) {
-			return content;
-		}
-
 		if ( context === 'accessibility' ) {
+			const { content, level } = attributes;
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

From 4ffc7d8571178bd2b1b2607e363df626c9b1bb12 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 28 Jun 2022 16:37:39 +1000
Subject: [PATCH 05/14] Revert whitespace change

---
 packages/block-library/src/heading/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index 45c3f44a2e9792..989812cd46c89b 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -33,6 +33,7 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		if ( context === 'accessibility' ) {
 			const { content, level } = attributes;
+
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

From 319400e176c59444a16df6647c6242a4a7a02b9c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 29 Jun 2022 13:01:17 +1000
Subject: [PATCH 06/14] Try switching back to using 'list-view' context

---
 packages/block-editor/README.md               |  1 +
 .../src/components/block-title/index.js       |  5 +-
 .../block-title/use-block-display-title.js    |  9 +++-
 .../list-view/block-select-button.js          | 49 +++----------------
 packages/block-library/src/heading/index.js   | 10 +++-
 5 files changed, 27 insertions(+), 47 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 6f7b087c6faacc..305c32f9d5d7df 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -246,6 +246,7 @@ _Parameters_
 -   _props_ `Object`:
 -   _props.clientId_ `string`: Client ID of block.
 -   _props.maximumLength_ `number|undefined`: The maximum length that the block title string may be before truncated.
+-   _props.context_ `string|undefined`: The context to pass to `getBlockLabel`.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js
index 2849c82f332bdc..30339224641df9 100644
--- a/packages/block-editor/src/components/block-title/index.js
+++ b/packages/block-editor/src/components/block-title/index.js
@@ -17,9 +17,10 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength } ) {
-	return useBlockDisplayTitle( clientId, maximumLength );
+export default function BlockTitle( { clientId, maximumLength, context } ) {
+	return useBlockDisplayTitle( clientId, maximumLength, context );
 }
diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js
index ab5aed4dbb84e8..777c4a4f69a533 100644
--- a/packages/block-editor/src/components/block-title/use-block-display-title.js
+++ b/packages/block-editor/src/components/block-title/use-block-display-title.js
@@ -26,9 +26,14 @@ import { store as blockEditorStore } from '../../store';
  *
  * @param {string}           clientId      Client ID of block.
  * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle( clientId, maximumLength ) {
+export default function useBlockDisplayTitle(
+	clientId,
+	maximumLength,
+	context
+) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -63,7 +68,7 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
+		? getBlockLabel( blockType, attributes, context )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index eb1f355169a1ad..4bac906e2ff5a4 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -11,8 +11,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -22,14 +20,9 @@ import { SPACE, ENTER } from '@wordpress/keycodes';
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import BlockTitle from '../block-title';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
-import { store as blockEditorStore } from '../../store';
-
-// For this list of hard-coded blocks, the block content will be used as the button label.
-// If no content exists, then the block's title will be used as a fallback.
-const CONTENT_LABEL_BLOCKS = [ 'core/heading' ];
 
 function ListViewBlockSelectButton(
 	{
@@ -46,24 +39,7 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-
-	// Attempt to get block content as the label for the button.
-	const contentLabel = useSelect(
-		( select ) => {
-			let content;
-			const block = select( blockEditorStore ).getBlock( clientId );
-			if (
-				CONTENT_LABEL_BLOCKS.some(
-					( blockName ) => blockName === block?.name
-				)
-			) {
-				content = stripHTML( block?.attributes?.content );
-			}
-			return content;
-		},
-		[ clientId ]
-	);
-
+	const blockTitle = useBlockDisplayTitle( clientId, undefined, 'list-view' );
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -106,21 +82,12 @@ function ListViewBlockSelectButton(
 					justify="flex-start"
 					className="block-editor-list-view-block-select-button__label-wrapper"
 				>
-					{ contentLabel ? (
-						<Truncate
-							className="block-editor-list-view-block-select-button__title"
-							ellipsizeMode="auto"
-						>
-							{ contentLabel }
-						</Truncate>
-					) : (
-						<span className="block-editor-list-view-block-select-button__title">
-							<BlockTitle
-								clientId={ clientId }
-								maximumLength={ 35 }
-							/>
-						</span>
-					) }
+					<Truncate
+						className="block-editor-list-view-block-select-button__title"
+						ellipsizeMode="auto"
+					>
+						{ blockTitle }
+					</Truncate>
 					{ blockInformation?.anchor && (
 						<span className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index 989812cd46c89b..e829a7ae15108e 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -31,9 +31,15 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
-		if ( context === 'accessibility' ) {
-			const { content, level } = attributes;
+		const { content, level } = attributes;
+
+		// In the list view, use the block's content as the label.
+		// If the content is empty, fall back to the default label.
+		if ( context === 'list-view' && content ) {
+			return content;
+		}
 
+		if ( context === 'accessibility' ) {
 			return isEmpty( content )
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */

From ddf9e6441a6dc16e4e37b221f0e33e4a27cf3060 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 30 Jun 2022 16:29:45 +1000
Subject: [PATCH 07/14] Update XPath for getListViewBlocks so that the span can
 be any nested descendent of the anchor tag instead of an immediate child

---
 packages/e2e-test-utils/src/get-list-view-blocks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-test-utils/src/get-list-view-blocks.js b/packages/e2e-test-utils/src/get-list-view-blocks.js
index af1d46ad5273f7..28976e36ac519d 100644
--- a/packages/e2e-test-utils/src/get-list-view-blocks.js
+++ b/packages/e2e-test-utils/src/get-list-view-blocks.js
@@ -6,6 +6,6 @@
  */
 export async function getListViewBlocks( blockLabel ) {
 	return page.$x(
-		`//table[contains(@aria-label,'Block navigation structure')]//a[span[text()='${ blockLabel }']]`
+		`//table[contains(@aria-label,'Block navigation structure')]//a//span[text()='${ blockLabel }']`
 	);
 }

From f5b3cb8e3a227a81bbbbda1caba06dc49c0f9b59 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 30 Jun 2022 21:55:16 +1000
Subject: [PATCH 08/14] Try to fix gallery and navigation tests to be less
 strict about where the block title sits in the DOM hierarchy

---
 packages/e2e-tests/specs/editor/blocks/gallery.test.js    | 2 +-
 packages/e2e-tests/specs/editor/blocks/navigation.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
index 0ca66f2b977584..52004a1b3afb95 100644
--- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
@@ -103,7 +103,7 @@ describe( 'Gallery', () => {
 		// This xpath selects the anchor node for the block which has a child span which contains the text
 		// label of the block and then selects the expander span for that node.
 		const galleryExpander = await page.waitForXPath(
-			`//a[span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]`
+			`//a[contains(., 'Gallery')]/span[contains(@class, 'block-editor-list-view__expander')]`
 		);
 
 		await galleryExpander.click();
diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
index ee75374afdf53d..9a8e896e9f5d1b 100644
--- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -1047,7 +1047,7 @@ Expected mock function not to be called but it was called with: ["POST", "http:/
 			await openListView();
 
 			const navExpander = await page.waitForXPath(
-				`//a[span[text()='Navigation']]/span[contains(@class, 'block-editor-list-view__expander')]`
+				`//a[contains(., 'Navigation')]/span[contains(@class, 'block-editor-list-view__expander')]`
 			);
 
 			await navExpander.click();

From a9407382e11fc8ff0a247f879b4308a44a452f37 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 30 Jun 2022 22:37:57 +1000
Subject: [PATCH 09/14] Slightly improve specificity of XPath queries, and
 ensure getListViewBlocks still returns the anchor elements, and not the child
 span nodes

---
 packages/e2e-test-utils/src/get-list-view-blocks.js       | 2 +-
 packages/e2e-tests/specs/editor/blocks/gallery.test.js    | 2 +-
 packages/e2e-tests/specs/editor/blocks/navigation.test.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/e2e-test-utils/src/get-list-view-blocks.js b/packages/e2e-test-utils/src/get-list-view-blocks.js
index 28976e36ac519d..8b52953b58290f 100644
--- a/packages/e2e-test-utils/src/get-list-view-blocks.js
+++ b/packages/e2e-test-utils/src/get-list-view-blocks.js
@@ -6,6 +6,6 @@
  */
 export async function getListViewBlocks( blockLabel ) {
 	return page.$x(
-		`//table[contains(@aria-label,'Block navigation structure')]//a//span[text()='${ blockLabel }']`
+		`//table[contains(@aria-label,'Block navigation structure')]//a[.//span[text()='${ blockLabel }']]`
 	);
 }
diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
index 52004a1b3afb95..8ffe087f2668a9 100644
--- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
@@ -103,7 +103,7 @@ describe( 'Gallery', () => {
 		// This xpath selects the anchor node for the block which has a child span which contains the text
 		// label of the block and then selects the expander span for that node.
 		const galleryExpander = await page.waitForXPath(
-			`//a[contains(., 'Gallery')]/span[contains(@class, 'block-editor-list-view__expander')]`
+			`//a[.//span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]`
 		);
 
 		await galleryExpander.click();
diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
index 9a8e896e9f5d1b..0f69d83ed3cc34 100644
--- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -1047,7 +1047,7 @@ Expected mock function not to be called but it was called with: ["POST", "http:/
 			await openListView();
 
 			const navExpander = await page.waitForXPath(
-				`//a[contains(., 'Navigation')]/span[contains(@class, 'block-editor-list-view__expander')]`
+				`//a[.//span[text()='Navigation']]/span[contains(@class, 'block-editor-list-view__expander')]`
 			);
 
 			await navExpander.click();

From b514956bd50f8ec7996e0e9723ec26719ce2ee23 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 1 Jul 2022 11:55:41 +1000
Subject: [PATCH 10/14] Tidy up useBlockDisplayTitle function signature and
 wrapper margins

---
 .../block-settings-dropdown.js                    |  5 ++++-
 .../src/components/block-title/index.js           |  2 +-
 .../block-title/use-block-display-title.js        | 15 ++++++++-------
 .../components/list-view/block-select-button.js   |  5 ++++-
 .../src/components/list-view/style.scss           |  3 ++-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index cc80dc863c7986..2d0571397a8eaa 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -125,7 +125,10 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: firstBlockClientId,
+		maximumLength: 25,
+	} );
 
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock
diff --git a/packages/block-editor/src/components/block-title/index.js b/packages/block-editor/src/components/block-title/index.js
index 30339224641df9..4075171c87e476 100644
--- a/packages/block-editor/src/components/block-title/index.js
+++ b/packages/block-editor/src/components/block-title/index.js
@@ -22,5 +22,5 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @return {JSX.Element} Block title.
  */
 export default function BlockTitle( { clientId, maximumLength, context } ) {
-	return useBlockDisplayTitle( clientId, maximumLength, context );
+	return useBlockDisplayTitle( { clientId, maximumLength, context } );
 }
diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js
index 777c4a4f69a533..be1e26319d671c 100644
--- a/packages/block-editor/src/components/block-title/use-block-display-title.js
+++ b/packages/block-editor/src/components/block-title/use-block-display-title.js
@@ -21,19 +21,20 @@ import { store as blockEditorStore } from '../../store';
  * @example
  *
  * ```js
- * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
+ * useBlockDisplayTitle( { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', maximumLength: 17 } );
  * ```
  *
- * @param {string}           clientId      Client ID of block.
- * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
- * @param {string|undefined} context       The context to pass to `getBlockLabel`.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
+ * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle(
+export default function useBlockDisplayTitle( {
 	clientId,
 	maximumLength,
-	context
-) {
+	context,
+} ) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 4bac906e2ff5a4..46b087701016f2 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -39,7 +39,10 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle = useBlockDisplayTitle( clientId, undefined, 'list-view' );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 50ca99541c4c84..a7dad2d6143cb2 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -299,6 +299,7 @@
 
 	.block-editor-list-view-block-select-button__label-wrapper {
 		max-width: 225px;
+		margin-right: $grid-unit-10;
 	}
 
 	.block-editor-list-view-block-select-button__anchor {
@@ -306,7 +307,7 @@
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		margin: 0 $grid-unit-10;
+		margin: 0 0 0 $grid-unit-10;
 		max-width: 120px;
 		overflow: hidden;
 		text-overflow: ellipsis;

From 73ae70acd8c02c56938088f4859a127d84db1d67 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 6 Jul 2022 10:33:47 +1000
Subject: [PATCH 11/14] Increase max-width of wrapper, include lock icon within
 wrapper space

---
 .../src/components/list-view/block-select-button.js | 13 +++++++------
 .../src/components/list-view/style.scss             |  6 ++----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 46b087701016f2..62a81346b2359c 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -82,8 +82,9 @@ function ListViewBlockSelectButton(
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<HStack
 					alignment="center"
-					justify="flex-start"
 					className="block-editor-list-view-block-select-button__label-wrapper"
+					justify="flex-start"
+					spacing={ 1 }
 				>
 					<Truncate
 						className="block-editor-list-view-block-select-button__title"
@@ -96,12 +97,12 @@ function ListViewBlockSelectButton(
 							{ blockInformation.anchor }
 						</span>
 					) }
+					{ isLocked && (
+						<span className="block-editor-list-view-block-select-button__lock">
+							<Icon icon={ lock } />
+						</span>
+					) }
 				</HStack>
-				{ isLocked && (
-					<span className="block-editor-list-view-block-select-button__lock">
-						<Icon icon={ lock } />
-					</span>
-				) }
 			</Button>
 		</>
 	);
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index a7dad2d6143cb2..04a7d6844c1d23 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -207,7 +207,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: 5px;
+		padding-right: 4px;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -298,8 +298,7 @@
 	}
 
 	.block-editor-list-view-block-select-button__label-wrapper {
-		max-width: 225px;
-		margin-right: $grid-unit-10;
+		max-width: 240px;
 	}
 
 	.block-editor-list-view-block-select-button__anchor {
@@ -307,7 +306,6 @@
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		margin: 0 0 0 $grid-unit-10;
 		max-width: 120px;
 		overflow: hidden;
 		text-overflow: ellipsis;

From 04ab515263017ccdff5fb5ae5b08e6fe5ec4a556 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 7 Jul 2022 16:38:49 +1000
Subject: [PATCH 12/14] Tweak heading sizing to ensure it uses available space
 without unexpectedly extending the panel

---
 .../components/list-view/block-select-button.js  |  9 +++------
 .../src/components/list-view/style.scss          | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 62a81346b2359c..661bbec4dbfc46 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -86,12 +86,9 @@ function ListViewBlockSelectButton(
 					justify="flex-start"
 					spacing={ 1 }
 				>
-					<Truncate
-						className="block-editor-list-view-block-select-button__title"
-						ellipsizeMode="auto"
-					>
-						{ blockTitle }
-					</Truncate>
+					<span className="block-editor-list-view-block-select-button__title">
+						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+					</span>
 					{ blockInformation?.anchor && (
 						<span className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 04a7d6844c1d23..03a8ba4e32b5b5 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -207,7 +207,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: 4px;
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -297,8 +297,16 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		max-width: 240px;
+	.block-editor-list-view-block-select-button__title {
+		min-width: 120px;
+		width: 100%;
+		position: relative;
+
+		.components-truncate {
+			position: absolute;
+			width: 100%;
+			transform: translateY(-50%);
+		}
 	}
 
 	.block-editor-list-view-block-select-button__anchor {
@@ -306,7 +314,7 @@
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		max-width: 120px;
+		max-width: 100px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

From 71cbd7c55bb01a1a6812b3a8b4e9e32dfe41729c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 8 Jul 2022 15:02:58 +1000
Subject: [PATCH 13/14] Move min-width up to the parent wrapper, reduce right
 padding on the block contents wrapper

---
 packages/block-editor/src/components/list-view/style.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 03a8ba4e32b5b5..0f9a95e37312dd 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -97,7 +97,7 @@
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
 		border-radius: $radius-block-ui;
@@ -297,8 +297,11 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__title {
+	.block-editor-list-view-block-select-button__label-wrapper {
 		min-width: 120px;
+	}
+
+	.block-editor-list-view-block-select-button__title {
 		width: 100%;
 		position: relative;
 

From 26d7799b86bbd5eb603d05ce48edaa2f17b2fd09 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Jul 2022 11:29:26 +1000
Subject: [PATCH 14/14] Use flex 1 instead of width percentage, use a min
 function on the anchor to ensure it never steals more than half of the row
 width

---
 packages/block-editor/src/components/list-view/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 0f9a95e37312dd..4fce1136bdbd5a 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -302,7 +302,7 @@
 	}
 
 	.block-editor-list-view-block-select-button__title {
-		width: 100%;
+		flex: 1;
 		position: relative;
 
 		.components-truncate {
@@ -317,7 +317,7 @@
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		max-width: 100px;
+		max-width: min(100px, 40%);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}