Restrict field types to match context (image fields, text fields) (#20)

Automattic · Aug 29, 2024 · 3727eee · 3727eee
1 parent 4b92941
commit 3727eee
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/blocks/remote-data-container/components/context-controls.tsx b/src/blocks/remote-data-container/components/context-controls.tsx
@@ -1,5 +1,10 @@
 import { SelectControl } from '@wordpress/components';
 
+import {
+	IMAGE_FIELD_TYPES,
+	TEXT_FIELD_TYPES,
+} from '@/blocks/remote-data-container/config/constants';
+
 interface ContextControlsProps {
 	attributes: ContextInnerBlockAttributes;
 	availableBindings: AvailableBindings;
@@ -10,9 +15,17 @@ interface ContextControlsProps {
 export function ContextControls( props: ContextControlsProps ) {
 	const { attributes, availableBindings, blockName, updateBinding } = props;
 
-	const contextOptions = Object.entries( availableBindings ).map( ( [ key, mapping ] ) => {
-		return { label: mapping.name, value: key };
-	} );
+	const imageContextOptions = Object.entries( availableBindings )
+		.filter( ( [ _key, mapping ] ) => IMAGE_FIELD_TYPES.includes( mapping.type ) )
+		.map( ( [ key, mapping ] ) => {
+			return { label: mapping.name, value: key };
+		} );
+
+	const textContextOptions = Object.entries( availableBindings )
+		.filter( ( [ _key, mapping ] ) => TEXT_FIELD_TYPES.includes( mapping.type ) )
+		.map( ( [ key, mapping ] ) => {
+			return { label: mapping.name, value: key };
+		} );
 
 	switch ( blockName ) {
 		case 'core/heading':
@@ -21,7 +34,7 @@ export function ContextControls( props: ContextControlsProps ) {
 				<SelectControl
 					label="Content"
 					name="content"
-					options={ [ { label: 'Select a field', value: '' }, ...contextOptions ] }
+					options={ [ { label: 'Select a field', value: '' }, ...textContextOptions ] }
 					onChange={ updateBinding.bind( null, 'content' ) }
 					value={ attributes.metadata?.bindings?.content?.args?.field }
 				/>
@@ -33,14 +46,14 @@ export function ContextControls( props: ContextControlsProps ) {
 					<SelectControl
 						label="Image URL"
 						name="image_url"
-						options={ [ { label: 'Select a field', value: '' }, ...contextOptions ] }
+						options={ [ { label: 'Select a field', value: '' }, ...imageContextOptions ] }
 						onChange={ updateBinding.bind( null, 'url' ) }
 						value={ attributes.metadata?.bindings?.url?.args?.field }
 					/>
 					<SelectControl
 						label="Image alt text"
 						name="image_alt"
-						options={ [ { label: 'Select a field', value: '' }, ...contextOptions ] }
+						options={ [ { label: 'Select a field', value: '' }, ...imageContextOptions ] }
 						onChange={ updateBinding.bind( null, 'alt' ) }
 						value={ attributes.metadata?.bindings?.alt?.args?.field }
 					/>

diff --git a/src/blocks/remote-data-container/components/field-shortcode/select-field.tsx b/src/blocks/remote-data-container/components/field-shortcode/select-field.tsx
@@ -2,7 +2,10 @@ import { Spinner } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import { check } from '@wordpress/icons';
 
-import { DISPLAY_QUERY_KEY } from '@/blocks/remote-data-container/config/constants';
+import {
+	DISPLAY_QUERY_KEY,
+	TEXT_FIELD_TYPES,
+} from '@/blocks/remote-data-container/config/constants';
 import { useRemoteData } from '@/blocks/remote-data-container/hooks/use-remote-data';
 import { getBlockAvailableBindings } from '@/utils/localized-block-data';
 
@@ -56,13 +59,12 @@ export function FieldSelection( props: FieldSelectionProps ) {
 type FieldSelectionWithFieldsProps = Omit< FieldSelectionProps, 'fields' | 'fieldType' >;
 
 export function FieldSelectionFromAvailableBindings( props: FieldSelectionWithFieldsProps ) {
-	const supportedBindingTypes = [ 'id', 'number', 'string' ];
 	const availableBindings = getBlockAvailableBindings( props.remoteData.blockName );
 
 	const fields = Object.entries( availableBindings ).reduce< FieldSelectionProps[ 'fields' ] >(
 		( acc, [ fieldName, binding ] ) => {
 			const fieldValue = props.remoteData.results[ 0 ]?.[ fieldName ] ?? '';
-			if ( ! fieldValue || ! supportedBindingTypes.includes( binding.type ) ) {
+			if ( ! fieldValue || ! TEXT_FIELD_TYPES.includes( binding.type ) ) {
 				return acc;
 			}
 

diff --git a/src/blocks/remote-data-container/config/constants.ts b/src/blocks/remote-data-container/config/constants.ts
@@ -3,3 +3,6 @@ import { getRestUrl } from '@/utils/localized-block-data';
 export const DISPLAY_QUERY_KEY = '__DISPLAY__';
 export const REMOTE_DATA_CONTEXT_KEY = 'remote-data-blocks/remoteData';
 export const REMOTE_DATA_REST_API_URL = getRestUrl();
+
+export const IMAGE_FIELD_TYPES = [ 'image_alt', 'image_url' ];
+export const TEXT_FIELD_TYPES = [ 'number', 'price', 'string' ];