Block Bindings: Communicate supported block attributes from server side

backport-changelog/6.9/9992.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9992
+
+* https://github.com/WordPress/gutenberg/pull/71820

lib/compat/wordpress-6.9/block-bindings.php

@@ -24,6 +24,21 @@ function ( $attributes, $block_type ) {
 	2
 );
 
+// The following filter can be removed once the minimum required WordPress version is 6.9 or newer.
+add_filter(
+	'block_editor_settings_all',
+	function ( $editor_settings ) {
+		$editor_settings['__experimentalBlockBindingsSupportedAttributes'] = array();
+		foreach ( array_keys( WP_Block_Type_Registry::get_instance()->get_all_registered() ) as $block_type ) {
+			$supported_block_attributes = gutenberg_get_block_bindings_supported_attributes( $block_type );
+			if ( ! empty( $supported_block_attributes ) ) {
+				$editor_settings['__experimentalBlockBindingsSupportedAttributes'][ $block_type ] = $supported_block_attributes;
+			}
+		}
+		return $editor_settings;
+	}
+);
+
 /**
  * Callback function for the render_block filter.
  *
@@ -86,6 +101,59 @@ function gutenberg_block_bindings_render_block( $block_content, $block, $instanc
 }
 add_filter( 'render_block', 'gutenberg_block_bindings_render_block', 10, 3 );
 
+/**
+ * Retrieves the list of block attributes supported by block bindings.
+ *
+ * @since 6.9.0
+ *
+ * @param string $block_type The block type whose supported attributes are being retrieved.
+ * @return array The list of block attributes that are supported by block bindings.
+ */
+function gutenberg_get_block_bindings_supported_attributes( $block_type ) {
+	// List of block attributes supported by Block Bindings in WP 6.8.
+	$block_bindings_supported_attributes_6_8 = array(
+		'core/paragraph' => array( 'content' ),
+		'core/heading'   => array( 'content' ),
+		'core/image'     => array( 'id', 'url', 'title', 'alt' ),
+		'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
+	);
+
+	$supported_block_attributes =
+		$block_bindings_supported_attributes_6_8[ $block_type ] ??
+		array();
+
+	/**
+	 * Filters the supported block attributes for block bindings.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param string[] $supported_block_attributes The block's attributes that are supported by block bindings.
+	 * @param string   $block_type                 The block type whose attributes are being filtered.
+	 */
+	$supported_block_attributes = apply_filters(
+		'block_bindings_supported_attributes',
+		$supported_block_attributes,
+		$block_type
+	);
+
+	/**
+	 * Filters the supported block attributes for block bindings.
+	 *
+	 * The dynamic portion of the hook name, `$block_type`, refers to the block type
+	 * whose attributes are being filtered.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param string[] $supported_block_attributes The block's attributes that are supported by block bindings.
+	 */
+	$supported_block_attributes = apply_filters(
+		"block_bindings_supported_attributes_{$block_type}",
+		$supported_block_attributes
+	);
+
+	return $supported_block_attributes;
+}
+
 /**
  * Processes the block bindings and updates the block attributes with the values from the sources.
  *
@@ -138,38 +206,8 @@ function gutenberg_process_block_bindings( $instance ) {
 		'core/image'     => array( 'id', 'url', 'title', 'alt' ),
 		'core/button'    => array( 'url', 'text', 'linkTarget', 'rel' ),
 	);
-	$supported_block_attributes              =
-		$block_bindings_supported_attributes_6_8[ $block_type ] ??
-		array();
-
-	/**
-	 * Filters the supported block attributes for block bindings.
-	 *
-	 * @since 6.9.0
-	 *
-	 * @param string[] $supported_block_attributes The block's attributes that are supported by block bindings.
-	 * @param string   $block_type                 The block type whose attributes are being filtered.
-	 */
-	$supported_block_attributes = apply_filters(
-		'block_bindings_supported_attributes',
-		$supported_block_attributes,
-		$block_type
-	);
 
-	/**
-	 * Filters the supported block attributes for block bindings.
-	 *
-	 * The dynamic portion of the hook name, `$block_type`, refers to the block type
-	 * whose attributes are being filtered.
-	 *
-	 * @since 6.9.0
-	 *
-	 * @param string[] $supported_block_attributes The block's attributes that are supported by block bindings.
-	 */
-	$supported_block_attributes = apply_filters(
-		"block_bindings_supported_attributes_{$block_type}",
-		$supported_block_attributes
-	);
+	$supported_block_attributes = gutenberg_get_block_bindings_supported_attributes( $block_type );
 
 	/*
 	 * Remove attributes that we know are processed by WP 6.8 from the list,

packages/block-editor/src/components/block-edit/edit.js

@@ -22,10 +22,10 @@ import { useCallback, useContext, useMemo } from '@wordpress/element';
 import BlockContext from '../block-context';
 import isURLLike from '../link-control/is-url-like';
 import {
-	canBindAttribute,
 	hasPatternOverridesDefaultBinding,
 	replacePatternOverridesDefaultBinding,
 } from '../../utils/block-bindings';
+import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -56,6 +56,8 @@ const Edit = ( props ) => {
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
+const EMPTY_ARRAY = [];
+
 const EditWithGeneratedProps = ( props ) => {
 	const { name, clientId, attributes, setAttributes } = props;
 	const registry = useRegistry();
@@ -66,6 +68,17 @@ const EditWithGeneratedProps = ( props ) => {
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources(),
 		[]
 	);
+	const bindableAttributes = useSelect(
+		( select ) => {
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+			return (
+				__experimentalBlockBindingsSupportedAttributes?.[ name ] ||
+				EMPTY_ARRAY
+			);
+		},
+		[ name ]
+	);
 
 	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
 		// Assign context values using the block type's declared context needs.
@@ -90,8 +103,8 @@ const EditWithGeneratedProps = ( props ) => {
 		}
 		return {
 			blockBindings: replacePatternOverridesDefaultBinding(
-				name,
-				attributes?.metadata?.bindings
+				attributes?.metadata?.bindings,
+				bindableAttributes
 			),
 			context: computedContext,
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(
@@ -120,7 +133,10 @@ const EditWithGeneratedProps = ( props ) => {
 			) ) {
 				const { source: sourceName, args: sourceArgs } = binding;
 				const source = registeredSources[ sourceName ];
-				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
+				if (
+					! source ||
+					! bindableAttributes.includes( attributeName )
+				) {
 					continue;
 				}
 
@@ -172,6 +188,7 @@ const EditWithGeneratedProps = ( props ) => {
 		},
 		[
 			attributes,
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,
@@ -197,7 +214,7 @@ const EditWithGeneratedProps = ( props ) => {
 				) ) {
 					if (
 						! blockBindings[ attributeName ] ||
-						! canBindAttribute( name, attributeName )
+						! bindableAttributes.includes( attributeName )
 					) {
 						continue;
 					}
@@ -250,6 +267,7 @@ const EditWithGeneratedProps = ( props ) => {
 			} );
 		},
 		[
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -29,7 +29,6 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
-import { canBindBlock } from '../../../utils/block-bindings';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
@@ -128,14 +127,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	const blockEditContext = useBlockEditContext();
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
-	const bindingsStyle =
-		hasBlockBindings && canBindBlock( name )
-			? {
-					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
-					'--wp-admin-theme-color--rgb':
-						'var(--wp-block-synced-color--rgb)',
-			  }
-			: {};
+	const bindingsStyle = hasBlockBindings
+		? {
+				'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+				'--wp-admin-theme-color--rgb':
+					'var(--wp-block-synced-color--rgb)',
+		  }
+		: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {

packages/block-editor/src/components/rich-text/index.js

@@ -39,7 +39,6 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { canBindBlock } from '../../utils/block-bindings';
 import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
@@ -177,9 +176,14 @@ export function RichTextWrapper(
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+
 			if (
 				! blockBindings?.[ identifier ] ||
-				! canBindBlock( blockName )
+				! (
+					blockName in __experimentalBlockBindingsSupportedAttributes
+				)
 			) {
 				return {};
 			}

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

@@ -23,11 +23,7 @@ import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	canBindAttribute,
-	getBindableAttributes,
-	useBlockBindingsUtils,
-} from '../utils/block-bindings';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
@@ -205,52 +201,62 @@ function EditableBlockBindingsPanelItems( {
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
-	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// `useSelect` is used purposely here to ensure `getFieldsList`
 	// is updated whenever there are updates in block context.
 	// `source.getFieldsList` may also call a selector via `select`.
 	const _fieldsList = {};
-	const { fieldsList, canUpdateBlockBindings } = useSelect(
-		( select ) => {
-			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
-				return EMPTY_OBJECT;
-			}
-			const registeredSources = getBlockBindingsSources();
-			Object.entries( registeredSources ).forEach(
-				( [ sourceName, { getFieldsList, usesContext } ] ) => {
-					if ( getFieldsList ) {
-						// Populate context.
-						const context = {};
-						if ( usesContext?.length ) {
-							for ( const key of usesContext ) {
-								context[ key ] = blockContext[ key ];
+	const { bindableAttributes, fieldsList, canUpdateBlockBindings } =
+		useSelect(
+			( select ) => {
+				const { __experimentalBlockBindingsSupportedAttributes } =
+					select( blockEditorStore ).getSettings();
+				const _bindableAttributes =
+					__experimentalBlockBindingsSupportedAttributes?.[
+						blockName
+					];
+				if (
+					! _bindableAttributes ||
+					_bindableAttributes.length === 0
+				) {
+					return EMPTY_OBJECT;
+				}
+				const registeredSources = getBlockBindingsSources();
+				Object.entries( registeredSources ).forEach(
+					( [ sourceName, { getFieldsList, usesContext } ] ) => {
+						if ( getFieldsList ) {
+							// Populate context.
+							const context = {};
+							if ( usesContext?.length ) {
+								for ( const key of usesContext ) {
+									context[ key ] = blockContext[ key ];
+								}
+							}
+							const sourceList = getFieldsList( {
+								select,
+								context,
+							} );
+							// Only add source if the list is not empty.
+							if ( Object.keys( sourceList || {} ).length ) {
+								_fieldsList[ sourceName ] = { ...sourceList };
 							}
-						}
-						const sourceList = getFieldsList( {
-							select,
-							context,
-						} );
-						// Only add source if the list is not empty.
-						if ( Object.keys( sourceList || {} ).length ) {
-							_fieldsList[ sourceName ] = { ...sourceList };
 						}
 					}
-				}
-			);
-			return {
-				fieldsList:
-					Object.values( _fieldsList ).length > 0
-						? _fieldsList
-						: EMPTY_OBJECT,
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
-			};
-		},
-		[ blockContext, bindableAttributes ]
-	);
+				);
+				return {
+					bindableAttributes: _bindableAttributes,
+					fieldsList:
+						Object.values( _fieldsList ).length > 0
+							? _fieldsList
+							: EMPTY_OBJECT,
+					canUpdateBlockBindings:
+						select( blockEditorStore ).getSettings()
+							.canUpdateBlockBindings,
+				};
+			},
+			[ blockContext ]
+		);
 	// Return early if there are no bindable attributes.
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
@@ -260,7 +266,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( blockName, key ) ||
+			! bindableAttributes.includes( key ) &&
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];