Add Block Bindings Panel to Block Inspector (#61527)

* Add initial pass at bindings panel in Block Inspector

* Add bindings panel to inspector controls with tabs

* Revise classnames and structure, add styles

* Rename BindingsPanel to BlockBindingsPanel

* Include Bindings Panel with hooks instead

* Revert extraneous changes

* Revert deletion of space

* Remove unnecessary unlock

* Remove unused declaration

* Simplify check for bindings

* Rename file; update imports

* Merge useSelect calls

* Use block context to look up bindings

* Add handling for unknown sources

* Remove unnecessary use of index

* Simplify access of bindings

* Use existing HStack instead of CSS

* Remove error state; show source name if label is undefined

Co-authored-by: artemiomorales <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: cbravobernal <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: mirka <[email protected]>

packages/block-editor/src/hooks/block-bindings.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import InspectorControls from '../components/inspector-controls';
+
+export const BlockBindingsPanel = ( { metadata } ) => {
+	const { bindings } = metadata || {};
+	const { sources } = useSelect( ( select ) => {
+		const _sources = unlock(
+			select( blocksStore )
+		).getAllBlockBindingsSources();
+
+		return {
+			sources: _sources,
+		};
+	}, [] );
+
+	if ( ! bindings ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Bindings' ) }
+				className="components-panel__block-bindings-panel"
+			>
+				<ItemGroup isBordered isSeparated size="large">
+					{ Object.keys( bindings ).map( ( key ) => {
+						return (
+							<Item key={ key }>
+								<HStack>
+									<span>{ key }</span>
+									<span className="components-item__block-bindings-source">
+										{ sources[ bindings[ key ].source ]
+											? sources[ bindings[ key ].source ]
+													.label
+											: bindings[ key ].source }
+									</span>
+								</HStack>
+							</Item>
+						);
+					} ) }
+				</ItemGroup>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default {
+	edit: BlockBindingsPanel,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};

packages/block-editor/src/hooks/block-bindings.scss

@@ -0,0 +1,3 @@
+.components-panel__block-bindings-panel .components-item__block-bindings-source {
+	color: $gray-700;
+}

packages/block-editor/src/hooks/index.js

@@ -29,11 +29,13 @@ import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
+import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
+		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,

packages/block-editor/src/style.scss

@@ -46,6 +46,7 @@
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
+@import "./hooks/block-bindings.scss";
 @import "./hooks/block-hooks.scss";
 @import "./hooks/border.scss";
 @import "./hooks/color.scss";