Add initial pass at bindings panel in Block Inspector

packages/block-editor/src/components/block-inspector/index.js

@@ -31,6 +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';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -73,13 +74,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId,
 		blockType,
 		topLevelLockedBlock,
+		block,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
 			getContentLockingParent,
 			getTemplateLock,
+			getBlock,
 		} = unlock( select( blockEditorStore ) );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -98,6 +101,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
 					? _selectedBlockClientId
 					: undefined ),
+			block: getBlock( _selectedBlockClientId ),
 		};
 	}, [] );
 
@@ -198,6 +202,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<BlockInspectorSingleBlock
 				clientId={ selectedBlockClientId }
 				blockName={ blockType.name }
+				block={ block }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -239,10 +244,12 @@ const AnimatedContainer = ( {
 	);
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( { clientId, blockName, block } ) => {
 	const availableTabs = useInspectorControlsTabs( blockName );
 	const showTabs = availableTabs?.length > 1;
-
+	const hasBindings = block?.attributes?.metadata?.bindings
+		? Object.keys( block.attributes.metadata.bindings ).length > 0
+		: false;
 	const hasBlockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -268,6 +275,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					clientId={ clientId }
 					blockName={ blockName }
 					tabs={ availableTabs }
+					block={ block }
 				/>
 			) }
 			{ ! showTabs && (
@@ -281,6 +289,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot group="list" />
+					{ hasBindings && <BindingsPanel block={ block } /> }
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

packages/block-editor/src/components/inspector-controls/bindings-panel.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	PanelBody,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+export const BindingsPanel = ( { block } ) => {
+	const bindings = block?.attributes?.metadata?.bindings;
+
+	const sources = useSelect( ( select ) =>
+		unlock( select( blocksStore ) ).getAllBlockBindingsSources()
+	);
+
+	return (
+		<PanelBody title={ __( 'Bindings' ) }>
+			<ItemGroup isBordered isSeparated size="large">
+				{ Object.keys( bindings ).map( ( key, index ) => {
+					return (
+						<Item key={ index }>
+							<div>
+								{ key } :{ ' ' }
+								{ sources[ bindings[ key ].source ].label }
+							</div>
+						</Item>
+					);
+				} ) }
+			</ItemGroup>
+		</PanelBody>
+	);
+};