From d0278149491344d5b2150d89f502f73fe30cc6bb Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Thu, 9 May 2024 18:28:42 +0200
Subject: [PATCH] Revise classnames and structure, add styles

---
 .../index.js}                                        | 11 +++++++----
 .../src/components/block-bindings-panel/style.scss   | 12 ++++++++++++
 .../src/components/block-inspector/index.js          |  2 +-
 .../inspector-controls-tabs/settings-tab.js          |  2 +-
 packages/block-editor/src/style.scss                 |  1 +
 5 files changed, 22 insertions(+), 6 deletions(-)
 rename packages/block-editor/src/components/{inspector-controls/bindings-panel.js => block-bindings-panel/index.js} (80%)
 create mode 100644 packages/block-editor/src/components/block-bindings-panel/style.scss

diff --git a/packages/block-editor/src/components/inspector-controls/bindings-panel.js b/packages/block-editor/src/components/block-bindings-panel/index.js
similarity index 80%
rename from packages/block-editor/src/components/inspector-controls/bindings-panel.js
rename to packages/block-editor/src/components/block-bindings-panel/index.js
index 789307939c4ea..d9e446153d00a 100644
--- a/packages/block-editor/src/components/inspector-controls/bindings-panel.js
+++ b/packages/block-editor/src/components/block-bindings-panel/index.js
@@ -23,15 +23,18 @@ export const BindingsPanel = ( { block } ) => {
 	);
 
 	return (
-		<PanelBody title={ __( 'Bindings' ) }>
+		<PanelBody
+			title={ __( 'Bindings' ) }
+			className="components-panel__block-bindings-panel"
+		>
 			<ItemGroup isBordered isSeparated size="large">
 				{ Object.keys( bindings ).map( ( key, index ) => {
 					return (
 						<Item key={ index }>
-							<div>
-								{ key } :{ ' ' }
+							<span>{ key }</span>
+							<span className="components-item__block-bindings-source">
 								{ sources[ bindings[ key ].source ].label }
-							</div>
+							</span>
 						</Item>
 					);
 				} ) }
diff --git a/packages/block-editor/src/components/block-bindings-panel/style.scss b/packages/block-editor/src/components/block-bindings-panel/style.scss
new file mode 100644
index 0000000000000..0adaf2c20f9ab
--- /dev/null
+++ b/packages/block-editor/src/components/block-bindings-panel/style.scss
@@ -0,0 +1,12 @@
+.components-panel__block-bindings-panel {
+
+	.components-item {
+		display: flex;
+		justify-content: space-between;
+
+		.components-item__block-bindings-source {
+			color: $gray-700;
+		}
+	}
+
+}
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 073fccc4496e7..c843b58737d1e 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -31,7 +31,7 @@ import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
-import { BindingsPanel } from '../inspector-controls/bindings-panel';
+import { BindingsPanel } from '../block-bindings-panel';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
index 9fb56ecbebc4b..1303edfb6bb13 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -5,7 +5,7 @@ import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 import SettingsTabHint from './settings-tab-hint';
-import { BindingsPanel } from '../inspector-controls/bindings-panel';
+import { BindingsPanel } from '../block-bindings-panel';
 
 function SettingsTab( { showAdvancedControls = false, block } ) {
 	const hasBindings = block?.attributes?.metadata?.bindings
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 5080aa05718bb..b372bde64dea2 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,5 +1,6 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-bindings-panel/style.scss";
 @import "./components/block-bindings-toolbar-indicator/style.scss";
 @import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";