Block Bindings: rely on broader context instead of requiring direct block context

Author: ellatrix

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

@@ -4,13 +4,14 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useContext } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
 /** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
@@ -58,11 +59,12 @@ export function canBindAttribute( blockName, attributeName ) {
 export const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const registry = useRegistry();
+		const blockContext = useContext( BlockContext );
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
 		const bindings = props.attributes.metadata?.bindings;
-		const { name, clientId, context } = props;
+		const { name, clientId } = props;
 		const boundAttributes = useSelect( () => {
 			if ( ! bindings ) {
 				return;
@@ -81,6 +83,14 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					continue;
 				}
 
+				const context = {};
+
+				if ( source.usesContext?.length ) {
+					for ( const key of source.usesContext ) {
+						context[ key ] = blockContext[ key ];
+					}
+				}
+
 				const args = {
 					registry,
 					context,
@@ -102,7 +112,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			}
 
 			return attributes;
-		}, [ bindings, name, clientId, context, registry, sources ] );
+		}, [ bindings, name, clientId, registry, sources, blockContext ] );
 
 		const { setAttributes } = props;
 
@@ -127,6 +137,14 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							continue;
 						}
 
+						const context = {};
+
+						if ( source.usesContext?.length ) {
+							for ( const key of source.usesContext ) {
+								context[ key ] = blockContext[ key ];
+							}
+						}
+
 						source.setValue( {
 							registry,
 							context,
@@ -148,7 +166,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				bindings,
 				name,
 				clientId,
-				context,
+				blockContext,
 				setAttributes,
 				sources,
 			]

packages/blocks/src/store/private-actions.js

@@ -51,6 +51,7 @@ export function registerBlockBindingsSource( source ) {
 		type: 'REGISTER_BLOCK_BINDINGS_SOURCE',
 		sourceName: source.name,
 		sourceLabel: source.label,
+		usesContext: source.usesContext,
 		getValue: source.getValue,
 		setValue: source.setValue,
 		getPlaceholder: source.getPlaceholder,

packages/blocks/src/store/reducer.js

@@ -389,6 +389,7 @@ export function blockBindingsSources( state = {}, action ) {
 			...state,
 			[ action.sourceName ]: {
 				label: action.sourceLabel,
+				usesContext: action.usesContext,
 				getValue: action.getValue,
 				setValue: action.setValue,
 				getPlaceholder: action.getPlaceholder,

packages/editor/src/bindings/post-meta.js

@@ -12,6 +12,7 @@ import { store as editorStore } from '../store';
 export default {
 	name: 'core/post-meta',
 	label: _x( 'Post Meta', 'block bindings source' ),
+	usesContext: [ 'postId', 'postType' ],
 	getPlaceholder( { args } ) {
 		return args.key;
 	},