From f3fdabb7d30b49e1c3540deec0c27e58d7e96de4 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com>
Date: Wed, 12 Jun 2024 11:56:35 +0200
Subject: [PATCH] Block bindings: Change bindings panel title, add description.
 (#62489)

* Change title, add description

* Update description

* Update description

Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../block-editor/src/hooks/block-bindings.js  | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index ab12d5d73f0b6d..c61f586575a530 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import {
+	BaseControl,
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalItemGroup as ItemGroup,
@@ -54,30 +55,35 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 	return (
 		<InspectorControls>
 			<PanelBody
-				title={ __( 'Bindings' ) }
+				title={ __( 'Attributes' ) }
 				className="components-panel__block-bindings-panel"
 			>
-				<ItemGroup isBordered isSeparated size="large">
-					{ Object.keys( filteredBindings ).map( ( key ) => {
-						return (
-							<Item key={ key }>
-								<HStack>
-									<span>{ key }</span>
-									<span className="components-item__block-bindings-source">
-										{ sources[
-											filteredBindings[ key ].source
-										]
-											? sources[
-													filteredBindings[ key ]
-														.source
-											  ].label
-											: filteredBindings[ key ].source }
-									</span>
-								</HStack>
-							</Item>
-						);
-					} ) }
-				</ItemGroup>
+				<BaseControl
+					help={ __( 'Attributes connected to various sources.' ) }
+				>
+					<ItemGroup isBordered isSeparated size="large">
+						{ Object.keys( filteredBindings ).map( ( key ) => {
+							return (
+								<Item key={ key }>
+									<HStack>
+										<span>{ key }</span>
+										<span className="components-item__block-bindings-source">
+											{ sources[
+												filteredBindings[ key ].source
+											]
+												? sources[
+														filteredBindings[ key ]
+															.source
+												  ].label
+												: filteredBindings[ key ]
+														.source }
+										</span>
+									</HStack>
+								</Item>
+							);
+						} ) }
+					</ItemGroup>
+				</BaseControl>
 			</PanelBody>
 		</InspectorControls>
 	);