From ebabad69cd486448ccf3a6521810e90c7857a65f Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:38:15 +0200
Subject: [PATCH] Rely on `Text` component instead of `Truncate` (#65007)

Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
---
 packages/block-editor/src/hooks/block-bindings.js | 15 ++++++---------
 .../block-editor/src/hooks/block-bindings.scss    |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index ea069c15a028f..c1422acaac0e5 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -9,7 +9,6 @@ import {
 	__experimentalText as Text,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalTruncate as Truncate,
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
@@ -98,19 +97,17 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
 	const isSourceInvalid = ! sourceProps;
 	return (
-		<VStack>
-			<Truncate>{ attribute }</Truncate>
+		<VStack className="block-editor-bindings__item">
+			<Text truncate>{ attribute }</Text>
 			{ !! binding && (
 				<Text
+					truncate
 					variant={ ! isSourceInvalid && 'muted' }
-					className="block-editor-bindings__item-explanation"
 					isDestructive={ isSourceInvalid }
 				>
-					<Truncate>
-						{ isSourceInvalid
-							? __( 'Invalid source' )
-							: args?.key || sourceProps?.label || sourceName }
-					</Truncate>
+					{ isSourceInvalid
+						? __( 'Invalid source' )
+						: args?.key || sourceProps?.label || sourceName }
 				</Text>
 			) }
 		</VStack>
diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss
index 69eaa18d57dae..e8f05895922f0 100644
--- a/packages/block-editor/src/hooks/block-bindings.scss
+++ b/packages/block-editor/src/hooks/block-bindings.scss
@@ -1,6 +1,6 @@
 div.block-editor-bindings__panel {
 	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
-	button:hover .block-editor-bindings__item-explanation {
+	button:hover .block-editor-bindings__item span {
 		color: inherit;
 	}
 }