Revise classnames and structure, add styles

packages/block-editor/src/components/inspector-controls/bindings-panel.js → 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>
 					);
 				} ) }

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;
+		}
+	}
+
+}

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(

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

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";