Fix image block binding (#163)

--------- Co-authored-by: Chris Zarate <[email protected]>
Automattic · Oct 17, 2024 · 33b7efe · 33b7efe
1 parent ad7eeed
commit 33b7efe
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/inc/Editor/BlockManagement/BlockRegistration.php b/inc/Editor/BlockManagement/BlockRegistration.php
@@ -45,7 +45,7 @@ public static function register_blocks(): void {
 			// Set available bindings from the display query output mappings.
 			$available_bindings = [];
 			foreach ( $config['queries']['__DISPLAY__']->output_schema['mappings'] ?? [] as $key => $mapping ) {
-				$available_bindings[ $key ] = [
+				$available_bindings[ ucfirst( $key ) ] = [
 					'name' => $mapping['name'],
 					'type' => $mapping['type'],
 				];

diff --git a/inc/Integrations/Airtable/AirtableDataSource.php b/inc/Integrations/Airtable/AirtableDataSource.php
@@ -45,6 +45,10 @@ class AirtableDataSource extends HttpDataSource {
 								'type'       => 'object',
 								'properties' => [
 									'name' => [ 'type' => 'string' ],
+									'type' => [
+										'type'     => 'string',
+										'required' => false,
+									],
 								],
 							],
 						],
@@ -117,7 +121,7 @@ public function ___temp_get_query(): AirtableGetItemQuery|\WP_Error {
 		];
 
 		foreach ( $this->config['tables'][0]['output_query_mappings'] as $mapping ) {
-			$output_schema['mappings'][ strtolower( $mapping['name'] ) ] = [
+			$output_schema['mappings'][ ucfirst( $mapping['name'] ) ] = [
 				'name' => $mapping['name'],
 				'path' => '$.fields.' . ucfirst( $mapping['name'] ),
 				'type' => $mapping['type'] ?? 'string',
@@ -145,7 +149,7 @@ public function ___temp_get_list_query(): AirtableListItemsQuery|\WP_Error {
 		];
 
 		foreach ( $this->config['tables'][0]['output_query_mappings'] as $mapping ) {
-			$output_schema['mappings'][ strtolower( $mapping['name'] ) ] = [
+			$output_schema['mappings'][ ucfirst( $mapping['name'] ) ] = [
 				'name' => $mapping['name'],
 				'path' => '$.fields.' . ucfirst( $mapping['name'] ),
 				'type' => $mapping['type'] ?? 'string',

diff --git a/src/blocks/remote-data-container/components/block-binding-controls.tsx b/src/blocks/remote-data-container/components/block-binding-controls.tsx
@@ -13,6 +13,7 @@ interface BlockBindingFieldControlProps {
 
 export function BlockBindingFieldControl( props: BlockBindingFieldControlProps ) {
 	const { availableBindings, fieldTypes, label, target, updateFieldBinding, value } = props;
+
 	const options = Object.entries( availableBindings )
 		.filter( ( [ _key, mapping ] ) => fieldTypes.includes( mapping.type ) )
 		.map( ( [ key, mapping ] ) => {
@@ -42,8 +43,8 @@ export function BlockBindingControls( props: BlockBindingControlsProps ) {
 	const { attributes, availableBindings, blockName, removeBinding, updateBinding } = props;
 	const contentArgs = attributes.metadata?.bindings?.content?.args;
 	const contentField = contentArgs?.field ?? '';
-	const imageAltField = attributes.metadata?.bindings?.image_alt?.args?.field ?? '';
-	const imageUrlField = attributes.metadata?.bindings?.image_url?.args?.field ?? '';
+	const imageAltField = attributes.metadata?.bindings?.alt?.args?.field ?? '';
+	const imageUrlField = attributes.metadata?.bindings?.url?.args?.field ?? '';
 
 	function updateFieldBinding( target: string, field: string ): void {
 		if ( ! field ) {
@@ -97,15 +98,15 @@ export function BlockBindingControls( props: BlockBindingControlsProps ) {
 						availableBindings={ availableBindings }
 						fieldTypes={ [ 'image_url' ] }
 						label="Image URL"
-						target="image_url"
+						target="url"
 						updateFieldBinding={ updateFieldBinding }
 						value={ imageUrlField }
 					/>
 					<BlockBindingFieldControl
 						availableBindings={ availableBindings }
-						fieldTypes={ [ 'image_alt' ] }
+						fieldTypes={ [ 'image_alt', 'string' ] }
 						label="Image alt text"
-						target="image_alt"
+						target="alt"
 						updateFieldBinding={ updateFieldBinding }
 						value={ imageAltField }
 					/>