Block Bindings: Prepare the ground to define fieldsList on the server.

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

@@ -17,6 +17,7 @@
 				'name'        => $source->name,
 				'label'       => $source->label,
 				'usesContext' => $source->uses_context,
+				'args'   => $source->args,
 			);
 		}
 		$script = sprintf( 'for ( const source of %s ) { ! wp.blocks.getBlockBindingsSource( source.name ) && wp.blocks.registerBlockBindingsSource( source ); }', wp_json_encode( $filtered_sources ) );

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

@@ -203,7 +203,7 @@ export function RichTextWrapper(
 
 			const { getBlockAttributes } = select( blockEditorStore );
 			const blockAttributes = getBlockAttributes( clientId );
-			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+			const fieldsList = blockBindingsSource?.args?.( {
 				select,
 				context: blockBindingsContext,
 			} );

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

@@ -209,9 +209,9 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// `useSelect` is used purposely here to ensure `getFieldsList`
+	// `useSelect` is used purposely here to ensure `args`
 	// is updated whenever there are updates in block context.
-	// `source.getFieldsList` may also call a selector via `select`.
+	// `source.args` may also call a selector via `select`.
 	const _fieldsList = {};
 	const { fieldsList, canUpdateBlockBindings } = useSelect(
 		( select ) => {
@@ -220,19 +220,24 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 			}
 			const registeredSources = getBlockBindingsSources();
 			Object.entries( registeredSources ).forEach(
-				( [ sourceName, { getFieldsList, usesContext } ] ) => {
-					if ( getFieldsList ) {
+				( [ sourceName, { args, usesContext } ] ) => {
+					if ( args ) {
 						// Populate context.
 						const context = {};
 						if ( usesContext?.length ) {
 							for ( const key of usesContext ) {
 								context[ key ] = blockContext[ key ];
 							}
 						}
-						const sourceList = getFieldsList( {
-							select,
-							context,
-						} );
+						let sourceList;
+						if ( typeof args === 'function' ) {
+							sourceList = args( {
+								select,
+								context,
+							} );
+						} else {
+							sourceList = { ...args };
+						}
 						// Only add source if the list is not empty.
 						if ( Object.keys( sourceList || {} ).length ) {
 							_fieldsList[ sourceName ] = { ...sourceList };

packages/blocks/src/api/registration.js

@@ -800,7 +800,7 @@ export const registerBlockBindingsSource = ( source ) => {
 		getValues,
 		setValues,
 		canUserEditValue,
-		getFieldsList,
+		args,
 	} = source;
 
 	const existingSource = unlock(
@@ -811,6 +811,7 @@ export const registerBlockBindingsSource = ( source ) => {
 	 * Check if the source has been already registered on the client.
 	 * If any property expected to be "client-only" is defined, return a warning.
 	 */
+	// TODO: Check if server prop fields has to be included in serverProps.
 	const serverProps = [ 'label', 'usesContext' ];
 	for ( const prop in existingSource ) {
 		if ( ! serverProps.includes( prop ) && existingSource[ prop ] ) {
@@ -892,12 +893,9 @@ export const registerBlockBindingsSource = ( source ) => {
 		warning( 'Block bindings source canUserEditValue must be a function.' );
 		return;
 	}
-
-	// Check the `getFieldsList` property is correct.
-	if ( getFieldsList && typeof getFieldsList !== 'function' ) {
-		// eslint-disable-next-line no-console
-		warning( 'Block bindings source getFieldsList must be a function.' );
-		return;
+	// Check the `fields` property is correct.
+	if ( args && typeof args !== 'object' ) {
+		warning( 'Block bindings source args must be an object.' );
 	}
 
 	return unlock( dispatch( blocksStore ) ).addBlockBindingsSource( source );

packages/blocks/src/api/test/registration.js

@@ -29,7 +29,7 @@
 	getBlockType,
 	getBlockTypes,
 	getBlockSupport,
 	getBlockVariations,
 	getBlockBindingsSource,
 	hasBlockSupport,
 	isReusableBlock,
@@ -1697,15 +1697,15 @@
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
 
-		// Check the `getFieldsList` callback is correct.
-		it( 'should reject invalid getFieldsList callback', () => {
+		// Check the `args` callback is correct.
+		it( 'should reject invalid args callback', () => {
 			registerBlockBindingsSource( {
 				name: 'core/testing',
 				label: 'testing',
-				getFieldsList: 'should be a function',
+				args: 'should be a function',
 			} );
 			expect( console ).toHaveWarnedWith(
-				'Block bindings source getFieldsList must be a function.'
+				'Block bindings source args must be a function.'
 			);
 			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
 		} );
@@ -1718,7 +1718,7 @@
 				getValues: () => 'value',
 				setValues: () => 'new values',
 				canUserEditValue: () => true,
-				getFieldsList: () => {
+				args: () => {
 					return { field: 'value' };
 				},
 			};
@@ -1742,7 +1742,7 @@
 			expect( source.getValues ).toBeUndefined();
 			expect( source.setValues ).toBeUndefined();
 			expect( source.canUserEditValue ).toBeUndefined();
-			expect( source.getFieldsList ).toBeUndefined();
+			expect( source.args ).toBeUndefined();
 			unregisterBlockBindingsSource( 'core/valid-source' );
 		} );
 

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

@@ -55,7 +55,7 @@ export function addBlockBindingsSource( source ) {
 		getValues: source.getValues,
 		setValues: source.setValues,
 		canUserEditValue: source.canUserEditValue,
-		getFieldsList: source.getFieldsList,
+		args: source.args,
 	};
 }
 

packages/blocks/src/store/reducer.js

@@ -394,11 +394,11 @@ export function blockBindingsSources( state = {}, action ) {
 	switch ( action.type ) {
 		case 'ADD_BLOCK_BINDINGS_SOURCE':
 			// Only open this API in Gutenberg and for `core/post-meta` for the moment.
-			let getFieldsList;
+			let args;
 			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-				getFieldsList = action.getFieldsList;
+				args = action.args;
 			} else if ( action.name === 'core/post-meta' ) {
-				getFieldsList = action.getFieldsList;
+				args = action.args;
 			}
 			return {
 				...state,
@@ -413,7 +413,7 @@ export function blockBindingsSources( state = {}, action ) {
 					// Only set `canUserEditValue` if `setValues` is also defined.
 					canUserEditValue:
 						action.setValues && action.canUserEditValue,
-					getFieldsList,
+					args,
 				},
 			};
 		case 'REMOVE_BLOCK_BINDINGS_SOURCE':

packages/e2e-tests/plugins/block-bindings/index.js

@@ -22,7 +22,7 @@ registerBlockBindingsSource( {
 	getValues,
 	setValues,
 	canUserEditValue: () => true,
-	getFieldsList: () => fieldsList,
+	fields: () => fieldsList,
 } );
 
 registerBlockBindingsSource( {

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

@@ -138,7 +138,5 @@ export default {
 
 		return true;
 	},
-	getFieldsList( { select, context } ) {
-		return getPostMetaFields( select, context );
-	},
+	args: ( { select, context } ) => getPostMetaFields( select, context ),
 };

test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js

@@ -763,7 +763,7 @@
 		} );
 	} );
 
-	test.describe( 'getFieldsList', () => {
+	test.describe( 'fields', () => {
 		test( 'should be possible to update attribute value through bindings UI', async ( {
 			editor,
 			page,
@@ -781,7 +781,7 @@
 			await page
 				.getByRole( 'menuitemradio' )
 				.filter( { hasText: 'Text Field Label' } )
 				.click();
 			const paragraphBlock = editor.canvas.getByRole( 'document', {
 				name: 'Block: Paragraph',
 			} );
@@ -917,7 +917,7 @@
 			const textField = page
 				.getByRole( 'menuitemradio' )
 				.filter( { hasText: 'Text Field Label' } );
 			await expect( textField ).toBeVisible();
 			await expect( textField ).toBeChecked();
 			const urlField = page
 				.getByRole( 'menuitemradio' )
@@ -946,7 +946,7 @@
 			const contentButton = page.getByRole( 'button', {
 				name: 'content',
 			} );
 			await expect( contentButton ).toContainText( 'Text Field Label' );
 		} );
 	} );
 
@@ -1097,12 +1097,12 @@
 			await expect( paragraphBlock ).toBeEmpty();
 
 			const placeholder = paragraphBlock.locator( 'span' );
 			await expect( placeholder ).toHaveAttribute(
 				'data-rich-text-placeholder',
 				'Add Empty Field Label'
 			);
 		} );
-		test( 'should show source label when value is empty, cannot edit, and `getFieldsList` is undefined', async ( {
+		test( 'should show source label when value is empty, cannot edit, and `fields` is undefined', async ( {
 			editor,
 		} ) => {
 			await editor.insertBlock( {