diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js new file mode 100644 index 0000000000000..72ac01a099e6d --- /dev/null +++ b/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 ( + + + + { Object.keys( bindings ).map( ( key ) => { + return ( + + + { key } + + { sources[ bindings[ key ].source ] + ? sources[ bindings[ key ].source ] + .label + : bindings[ key ].source } + + + + ); + } ) } + + + + ); +}; + +export default { + edit: BlockBindingsPanel, + attributeKeys: [ 'metadata' ], + hasSupport() { + return true; + }, +}; diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss new file mode 100644 index 0000000000000..fd46674ad1142 --- /dev/null +++ b/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; +} diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index ec5cf29b49c5a..4a59c2faa0073 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/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, diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 5080aa05718bb..484d79e8db9fa 100644 --- a/packages/block-editor/src/style.scss +++ b/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";