Block Bindings: Refactor block bindings editor implementation

packages/block-editor/README.md

@@ -812,6 +812,18 @@ _Properties_
 
 Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.
 
+### updateBlockBindingsAttribute
+
+Helper to update the bindings attribute used by the Block Bindings API.
+
+_Parameters_
+
+-   _blockAttributes_ `Object`: - The original block attributes.
+-   _setAttributes_ `Function`: - setAttributes function to modify the bindings property.
+-   _attributeName_ `string`: - The attribute in the bindings object to update.
+-   _sourceName_ `string`: - The source name added to the bindings property.
+-   _sourceAttributes_ `string`: - The source attributes added to the bindings property.
+
 ### URLInput
 
 _Related_

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

@@ -0,0 +1,147 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { plugins as pluginsIcon } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { BlockControls } from '../components';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'url', 'title' ],
+	'core/button': [ 'url', 'text' ],
+};
+
+function BlockBindingsUI( props ) {
+	const { name: blockName, clientId } = props;
+	const { attributes, sources } = useSelect(
+		( select ) => {
+			return {
+				attributes:
+					select( blockEditorStore ).getBlockAttributes( clientId ),
+				sources: unlock(
+					select( blockEditorStore )
+				).getAllBlockBindingsSources(),
+			};
+		},
+		[ clientId ]
+	);
+	const blockContext = useContext( BlockContext );
+	if ( ! ( blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+		return null;
+	}
+
+	return (
+		<>
+			<BlockControls group="other">
+				<DropdownMenu
+					onOpenChange={ function noRefCheck() {} }
+					trigger={
+						<Button __next40pxDefaultSize icon={ pluginsIcon } />
+					}
+				>
+					{ /* Iterate over block attributes */ }
+					{ BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].map(
+						( attribute ) => {
+							return (
+								<DropdownMenu
+									trigger={
+										<DropdownMenuItem>
+											<DropdownMenuItemLabel>
+												{ attribute }
+											</DropdownMenuItemLabel>
+										</DropdownMenuItem>
+									}
+									key={ attribute }
+								>
+									{ /* Iterate over sources */ }
+									{ Object.entries( sources ).map(
+										( [ sourceName, source ] ) => {
+											return (
+												<DropdownMenu
+													trigger={
+														<DropdownMenuItem>
+															<DropdownMenuItemLabel
+																className={
+																	attributes
+																		.metadata
+																		?.bindings?.[
+																		attribute
+																	]?.source
+																		?.name ===
+																		sourceName &&
+																	'is-source-bound'
+																}
+															>
+																{ source.label }
+															</DropdownMenuItemLabel>
+														</DropdownMenuItem>
+													}
+													key={ sourceName }
+												>
+													{ source.component(
+														props,
+														blockContext,
+														attribute
+													) }
+												</DropdownMenu>
+											);
+										}
+									) }
+								</DropdownMenu>
+							);
+						}
+					) }
+				</DropdownMenu>
+			</BlockControls>
+		</>
+	);
+}
+
+export default {
+	edit: BlockBindingsUI,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};
+
+if ( window.__experimentalBlockBindings ) {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/block-bindings-ui',
+		( settings, name ) => {
+			if ( ! ( name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+				return settings;
+			}
+			const contextItems = [ 'postId', 'postType', 'queryId' ];
+			const usesContextArray = settings.usesContext;
+			const oldUsesContextArray = new Set( usesContextArray );
+			contextItems.forEach( ( item ) => {
+				if ( ! oldUsesContextArray.has( item ) ) {
+					usesContextArray.push( item );
+				}
+			} );
+			settings.usesContext = usesContextArray;
+			return settings;
+		}
+	);
+}

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

@@ -11,6 +11,7 @@ import align from './align';
 import './lock';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
+import bindings from './bindings';
 import customClassName from './custom-class-name';
 import './generated-class-name';
 import style from './style';
@@ -27,11 +28,13 @@ import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
 import blockRenaming from './block-renaming';
+import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
 		align,
 		anchor,
+		bindings,
 		customClassName,
 		style,
 		duotone,

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

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit/context';
+import { unlock } from '../lock-unlock';
+
+/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+/**
+ * Given a binding of block attributes, returns a higher order component that
+ * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ *
+ * @return {WPHigherOrderComponent} Higher-order component.
+ */
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'url', 'title' ],
+	'core/button': [ 'url', 'text' ],
+};
+
+const createEditFunctionWithBindingsAttribute = () =>
+	createHigherOrderComponent(
+		( BlockEdit ) => ( props ) => {
+			const { clientId } = useBlockEditContext();
+
+			const {
+				getBlockBindingsSource,
+				getBlockAttributes,
+				updateBlockAttributes,
+			} = useSelect( ( select ) => {
+				return {
+					getBlockBindingsSource: unlock( select( blockEditorStore ) )
+						.getBlockBindingsSource,
+					getBlockAttributes:
+						select( blockEditorStore ).getBlockAttributes,
+					updateBlockAttributes:
+						select( blockEditorStore ).updateBlockAttributes,
+				};
+			}, [] );
+
+			const updatedAttributes = getBlockAttributes( clientId );
+			if ( updatedAttributes?.metadata?.bindings ) {
+				Object.entries( updatedAttributes.metadata.bindings ).forEach(
+					( [ attributeName, settings ] ) => {
+						const source = getBlockBindingsSource(
+							settings.source.name
+						);
+
+						if ( source ) {
+							// Second argument (`updateMetaValue`) will be used to update the value in the future.
+							const {
+								placeholder,
+								useValue: [ metaValue = null ] = [],
+							} = source.useSource(
+								props,
+								settings.source.attributes
+							);
+
+							if ( placeholder ) {
+								updatedAttributes.placeholder = placeholder;
+								updatedAttributes[ attributeName ] = null;
+							}
+
+							if ( metaValue ) {
+								updatedAttributes[ attributeName ] = metaValue;
+							}
+						}
+					}
+				);
+			}
+
+			const registry = useRegistry();
+
+			return (
+				<>
+					<BlockEdit
+						key="edit"
+						attributes={ updatedAttributes }
+						setAttributes={ ( newAttributes, blockId ) =>
+							registry.batch( () =>
+								updateBlockAttributes( blockId, newAttributes )
+							)
+						}
+						{ ...props }
+					/>
+				</>
+			);
+		},
+		'useBoundAttributes'
+	);
+
+/**
+ * Filters a registered block's settings to enhance a block's `edit` component
+ * to upgrade bound attributes.
+ *
+ * @param {WPBlockSettings} settings Registered block settings.
+ *
+ * @return {WPBlockSettings} Filtered block settings.
+ */
+function shimAttributeSource( settings ) {
+	if ( ! ( settings.name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+		return settings;
+	}
+	settings.edit = createEditFunctionWithBindingsAttribute()( settings.edit );
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
+	shimAttributeSource
+);

packages/block-editor/src/store/private-actions.js

@@ -240,6 +240,16 @@ export function clearBlockRemovalPrompt() {
 	};
 }
 
+export function registerBlockBindingsSource( source ) {
+	return {
+		type: 'REGISTER_BLOCK_BINDINGS_SOURCE',
+		sourceName: source.name,
+		sourceLabel: source.label,
+		sourceComponent: source.component,
+		useSource: source.useSource,
+	};
+}
+
 /**
  * Returns an action object used to set up any rules that a block editor may
  * provide in order to prevent a user from accidentally removing certain

packages/block-editor/src/store/private-selectors.js

@@ -170,6 +170,14 @@ export function getStyleOverrides( state ) {
 	return state.styleOverrides;
 }
 
+export function getAllBlockBindingsSources( state ) {
+	return state.blockBindingsSources;
+}
+
+export function getBlockBindingsSource( state, sourceName ) {
+	return state?.blockBindingsSources?.[ sourceName ];
+}
+
 /** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
 /**
  * Returns the registered inserter media categories through the public API.

packages/block-editor/src/store/reducer.js

@@ -1513,6 +1513,21 @@ function removalPromptData( state = false, action ) {
 	return state;
 }
 
+function blockBindingsSources( state = {}, action ) {
+	if ( action.type === 'REGISTER_BLOCK_BINDINGS_SOURCE' ) {
+		return {
+			...state,
+			[ action.sourceName ]: {
+				label: action.sourceLabel,
+				component: action.sourceComponent,
+				useSource: action.useSource,
+			},
+		};
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning any rules that a block editor may provide in order to
  * prevent a user from accidentally removing certain blocks. These rules are
@@ -2044,6 +2059,7 @@ const combinedReducers = combineReducers( {
 	blockEditingModes,
 	styleOverrides,
 	removalPromptData,
+	blockBindingsSources,
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,

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

@@ -1,3 +1,4 @@
 export { default as transformStyles } from './transform-styles';
 export * from './block-variation-transforms';
 export { default as getPxFromCssUnit } from './get-px-from-css-unit';
+export * from './update-bindings-attribute';