Block bindings: allow the field types matching attribute types in bindings.

packages/e2e-tests/plugins/block-bindings.php

@@ -90,6 +90,7 @@ function gutenberg_test_block_bindings_registration() {
 		'post',
 		'text_custom_field',
 		array(
+			'label'        => 'Text custom field',
 			'default'      => 'Value of the text custom field',
 			'show_in_rest' => true,
 			'single'       => true,
@@ -106,6 +107,69 @@ function gutenberg_test_block_bindings_registration() {
 			'type'         => 'string',
 		)
 	);
+	register_meta(
+		'post',
+		'object_custom_field',
+		array(
+			'label'        => 'Object custom field',
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'object',
+			'default'      => json_decode( json_encode( array( 'foo' => 'bar' ) ), false ),
+		)
+	);
+	register_meta(
+		'post',
+		'array_custom_field',
+		array(
+			'label'        => 'Array custom field',
+			'show_in_rest' => array(
+				'schema' => array(
+					'type'  => 'array',
+					'items' => array(
+						'type' => 'string',
+					),
+				),
+			),
+			'single'       => true,
+			'type'         => 'array',
+			'default'      => array(),
+		)
+	);
+	register_meta(
+		'post',
+		'number',
+		array(
+			'label'        => 'Number custom field',
+			'type'         => 'number',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => 5.5,
+		)
+	);
+	register_meta(
+		'post',
+		'integer',
+		array(
+			'label'        => 'Integer custom field',
+			'type'         => 'integer',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => 5,
+		)
+	);
+	register_meta(
+		'post',
+		'boolean',
+		array(
+			'label'        => 'Boolean custom field',
+			'type'         => 'boolean',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => true,
+		)
+	);
+
 	// Register CPT custom fields.
 	register_meta(
 		'post',

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

@@ -51,8 +51,14 @@ function getPostMetaFields( select, context ) {
 	const registeredFields = getRegisteredPostMeta( context?.postType );
 	const metaFields = {};
 	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
-		// Don't include footnotes or private fields.
-		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+		if (
+			// Don't include footnotes.
+			key !== 'footnotes' &&
+			// Don't include private fields.
+			key.charAt( 0 ) !== '_' &&
+			// Only support string types.
+			typeof entityMetaValues?.[ key ] === 'string'
+		) {
 			metaFields[ key ] = {
 				label: props.title || key,
 				value:

test/e2e/specs/editor/various/block-bindings/post-meta.spec.js

@@ -81,7 +81,7 @@
 				const paragraphBlock = editor.canvas.getByRole( 'document', {
 					name: 'Block: Paragraph',
 				} );
 				await expect( paragraphBlock ).toHaveText(
 					'Movie field default value'
 				);
 			} );
@@ -107,7 +107,7 @@
 				const paragraphBlock = editor.canvas.getByRole( 'document', {
 					name: 'Block: Paragraph',
 				} );
 				await expect( paragraphBlock ).toHaveText(
 					'Field with only label'
 				);
 			} );
@@ -166,7 +166,7 @@
 				await page
 					.getByRole( 'menuitemradio' )
 					.filter( { hasText: 'Movie field label' } )
 					.click();
 				await expect( contentBinding ).toContainText(
 					'Movie field label'
 				);
@@ -197,7 +197,7 @@
 				await page
 					.getByRole( 'menuitemradio' )
 					.filter( { hasText: 'field_without_label_or_default' } )
 					.click();
 				await expect( contentBinding ).toContainText(
 					'field_without_label_or_default'
 				);
@@ -236,14 +236,14 @@
 			} ) => {
 				const globalField = page
 					.getByRole( 'menuitemradio' )
-					.filter( { hasText: 'text_custom_field' } );
+					.filter( { hasText: 'Text custom field' } );
 				await expect( globalField ).toBeVisible();
 			} );
 			test( 'should not include protected fields', async ( { page } ) => {
 				// Ensure the fields have loaded by checking the field is visible.
 				const globalField = page
 					.getByRole( 'menuitemradio' )
-					.filter( { hasText: 'text_custom_field' } );
+					.filter( { hasText: 'Text custom field' } );
 				await expect( globalField ).toBeVisible();
 				// Check the protected fields are not visible.
 				const protectedField = page
@@ -322,7 +322,7 @@
 			// Check the post meta fields are not visible.
 			const globalField = page
 				.getByRole( 'menuitemradio' )
-				.filter( { hasText: 'text_custom_field' } );
+				.filter( { hasText: 'Text custom field' } );
 			await expect( globalField ).toBeHidden();
 			const movieField = page
 				.getByRole( 'menuitemradio' )
@@ -547,5 +547,54 @@
 				.filter( { hasText: 'Movie field label' } );
 			await expect( movieField ).toBeVisible();
 		} );
+		test( 'should not be possible to connect non-supported fields through the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Text custom field',
+				} )
+			).toBeVisible();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Number custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Integer custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Boolean custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Object custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Array custom field',
+				} )
+			).toBeHidden();
+		} );
 	} );
 } );