Forms: UX improvements for Image Select field (#45516)

* fix scroll on inner image block placeholder

* auto-adjust the image resolution when changing the supersize attribute

* add explicit default style values

* add helper text to settings

* remove default numbered labels

* change option label placeholder

* add option on enter and prevent newlines on option label

* changelog

Author: dhasilva

projects/packages/forms/changelog/update-forms-image-select-feedback

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: UX improvements for Image Select field

projects/packages/forms/src/blocks/field-image-select/edit.tsx

@@ -8,8 +8,9 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect, select as globalSelect } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 /**
@@ -25,25 +26,53 @@ import './editor.scss';
  * Types
  */
 import type { Block, BlockEditorStoreSelect } from '../../types';
+import type { Attachment } from '@wordpress/core-data';
 
 export default function ImageSelectFieldEdit( props ) {
 	const { attributes, clientId, setAttributes, name } = props;
 	const { id, required, width } = attributes;
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { blockStyle } = useJetpackFieldStyles( attributes );
 
-	const { optionsBlock } = useSelect(
+	const { optionsBlock, imagesData } = useSelect(
 		select => {
 			const { getBlock } = select( blockEditorStore ) as BlockEditorStoreSelect;
 
+			const block = getBlock( clientId )?.innerBlocks.find(
+				( innerBlock: Block ) => innerBlock.name === 'jetpack/fieldset-image-options'
+			);
+
+			const images =
+				block?.innerBlocks?.[ 0 ]?.innerBlocks
+					// Filter out inner blocks that don't have a media id, i.e. external images.
+					?.filter( innerBlock => innerBlock.attributes?.id !== undefined )
+					// Map the inner blocks to an array of objects with the media id and client id.
+					?.map( innerBlock => ( {
+						clientId: innerBlock.clientId,
+						mediaId: innerBlock.attributes.id as number,
+					} ) ) ?? [];
+
 			return {
-				optionsBlock: getBlock( clientId )?.innerBlocks.find(
-					( block: Block ) => block.name === 'jetpack/fieldset-image-options'
-				),
+				optionsBlock: block,
+				imagesData: images,
 			};
 		},
 		[ clientId ]
 	);
 
+	// Preload the image entity records reactively, as they are not available on first load.
+	// This is necessary to ensure the image URLs can be updated correctly when the supersized attribute is changed.
+	useSelect(
+		select => {
+			return imagesData.map( image =>
+				select( coreStore ).getEntityRecord( 'postType', 'attachment', image.mediaId, {
+					context: 'view',
+				} )
+			);
+		},
+		[ imagesData ]
+	);
+
 	// This wraps the field in a form block if it is added directly to the editor.
 	useFormWrapper( { attributes, clientId, name } );
 
@@ -83,6 +112,44 @@ export default function ImageSelectFieldEdit( props ) {
 		}
 	);
 
+	const updateSupersized = useCallback(
+		( value: boolean ) => {
+			setAttributes( { isSupersized: value } );
+
+			const inputImageOptions = optionsBlock?.innerBlocks;
+
+			if ( inputImageOptions && inputImageOptions.length > 0 ) {
+				const imageBlocks = inputImageOptions.map( ( block: Block ) => block.innerBlocks[ 0 ] );
+				const newSizeSlug = value ? 'full' : 'medium';
+
+				imageBlocks.forEach( imageBlock => {
+					updateBlockAttributes( imageBlock.clientId, {
+						sizeSlug: newSizeSlug,
+					} );
+
+					const record = globalSelect( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						imageBlock.attributes.id as number,
+						{
+							context: 'view',
+						}
+					);
+
+					const newUrl = ( record as Attachment )?.media_details?.sizes?.[ newSizeSlug ]
+						?.source_url;
+
+					if ( newUrl ) {
+						updateBlockAttributes( imageBlock.clientId, {
+							url: newUrl,
+						} );
+					}
+				} );
+			}
+		},
+		[ setAttributes, optionsBlock?.innerBlocks, updateBlockAttributes ]
+	);
+
 	return (
 		<div { ...blockProps }>
 			<div { ...innerBlocksProps } />
@@ -111,6 +178,10 @@ export default function ImageSelectFieldEdit( props ) {
 								label={ __( 'Show labels', 'jetpack-forms' ) }
 								checked={ attributes?.showLabels }
 								onChange={ ( value: boolean ) => setAttributes( { showLabels: value } ) }
+								help={ __(
+									'Displays the labels for the images in the published form. They are always visible for you in the editor and in the responses.',
+									'jetpack-forms'
+								) }
 							/>
 						),
 					},
@@ -122,7 +193,8 @@ export default function ImageSelectFieldEdit( props ) {
 								key="is-supersized"
 								label={ __( 'Supersized', 'jetpack-forms' ) }
 								checked={ attributes?.isSupersized }
-								onChange={ ( value: boolean ) => setAttributes( { isSupersized: value } ) }
+								onChange={ ( value: boolean ) => updateSupersized( value ) }
+								help={ __( 'Changes the size of the images.', 'jetpack-forms' ) }
 							/>
 						),
 					},
@@ -135,6 +207,7 @@ export default function ImageSelectFieldEdit( props ) {
 								label={ __( 'Multiple selection', 'jetpack-forms' ) }
 								checked={ attributes?.isMultiple }
 								onChange={ ( value: boolean ) => setAttributes( { isMultiple: value } ) }
+								help={ __( 'Allows visitors to select more than one image.', 'jetpack-forms' ) }
 							/>
 						),
 					},
@@ -147,6 +220,10 @@ export default function ImageSelectFieldEdit( props ) {
 								label={ __( 'Randomize', 'jetpack-forms' ) }
 								checked={ attributes?.randomizeOptions }
 								onChange={ ( value: boolean ) => setAttributes( { randomizeOptions: value } ) }
+								help={ __(
+									'Randomizes the order of the images in the published form to avoid order bias. This setting does not affect the order in the editor.',
+									'jetpack-forms'
+								) }
 							/>
 						),
 					},

projects/packages/forms/src/blocks/field-image-select/editor.scss

@@ -13,6 +13,10 @@
 	flex-grow: 0;
 }
 
+.jetpack-contact-form .jetpack-input-image-option .components-placeholder.has-illustration {
+	overflow: hidden;
+}
+
 // There is no outer block in the editor, so we apply
 // the styles directly to the input image option.
 .jetpack-input-image-option {

projects/packages/forms/src/blocks/field-image-select/index.tsx

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getImageOptionLabel } from '../input-image-option/label';
 import defaultSettings from '../shared/settings';
 import edit from './edit';
 import icon from './icon';
@@ -72,9 +71,6 @@ const settings = {
 				innerBlocks: [
 					{
 						name: 'jetpack/input-image-option',
-						attributes: {
-							label: getImageOptionLabel( 1 ),
-						},
 						innerBlocks: [
 							{
 								name: 'core/image',
@@ -88,9 +84,6 @@ const settings = {
 					},
 					{
 						name: 'jetpack/input-image-option',
-						attributes: {
-							label: getImageOptionLabel( 2 ),
-						},
 						innerBlocks: [
 							{
 								name: 'core/image',

projects/packages/forms/src/blocks/fieldset-image-options/edit.tsx

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import { getImageOptionLabel } from '../input-image-option/label';
 import useAddImageOption from '../shared/hooks/use-add-image-option';
 import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
 
@@ -26,9 +25,9 @@ export default function ImageOptionsFieldsetEdit( props ) {
 
 	// Starts with 3 empty options.
 	const template = [
-		[ 'jetpack/input-image-option', { label: getImageOptionLabel( 1 ) } ],
-		[ 'jetpack/input-image-option', { label: getImageOptionLabel( 2 ) } ],
-		[ 'jetpack/input-image-option', { label: getImageOptionLabel( 3 ) } ],
+		[ 'jetpack/input-image-option' ],
+		[ 'jetpack/input-image-option' ],
+		[ 'jetpack/input-image-option' ],
 	];
 
 	const defaultBlock = useMemo( () => newImageOption(), [ newImageOption ] );

projects/packages/forms/src/blocks/input-image-option/edit.tsx

@@ -8,12 +8,13 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 /**
  * Internal dependencies
  */
+import useAddImageOption from '../shared/hooks/use-add-image-option';
 import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
 import { useSyncedAttributes } from '../shared/hooks/use-synced-attributes';
 import { getImageOptionLetter } from './label';
@@ -40,7 +41,7 @@ export default function ImageOptionInputEdit( props ) {
 
 	const { 'jetpack/field-image-select-is-supersized': isSupersized } = context || {};
 
-	const { positionLetter, rowOptionsCount } = useSelect(
+	const { positionIndex, positionLetter, rowOptionsCount, parentId } = useSelect(
 		select => {
 			const blockEditor = select( blockEditorStore ) as BlockEditorStoreSelect;
 			const { getBlock } = blockEditor;
@@ -49,8 +50,8 @@ export default function ImageOptionInputEdit( props ) {
 				clientId,
 				'jetpack/fieldset-image-options'
 			);
-			const parentId = parentClientIds[ parentClientIds.length - 1 ];
-			const parentBlock = getBlock( parentId );
+			const parentBlockId = parentClientIds[ parentClientIds.length - 1 ];
+			const parentBlock = getBlock( parentBlockId );
 
 			// Find position within parent's inner blocks
 			const position =
@@ -63,13 +64,43 @@ export default function ImageOptionInputEdit( props ) {
 			const rowSiblingCount = Math.min( totalOptionsCount, maxImagesPerRow );
 
 			return {
+				positionIndex: position,
 				positionLetter: getImageOptionLetter( position ),
 				rowOptionsCount: rowSiblingCount,
+				parentId: parentBlockId,
 			};
 		},
 		[ clientId, isSupersized ]
 	);
 
+	const { addOption } = useAddImageOption( parentId );
+
+	// Handle key events to prevent newlines and add new option on Enter
+	const handleKeyDown = useCallback(
+		( event: KeyboardEvent ) => {
+			if ( event.key === 'Enter' ) {
+				event.preventDefault();
+				addOption( positionIndex );
+			}
+		},
+		[ addOption, positionIndex ]
+	);
+
+	// Filter pasted content to remove newlines
+	const handlePaste = useCallback(
+		( event: ClipboardEvent ) => {
+			event.preventDefault();
+
+			const pastedText = event.clipboardData?.getData( 'text/plain' ) || '';
+			const cleanText = pastedText.replace( /[\r\n]+/g, ' ' ).trim();
+
+			if ( cleanText ) {
+				setAttributes( { label: cleanText } );
+			}
+		},
+		[ setAttributes ]
+	);
+
 	// Use the block's own synced attributes for styling
 	const { blockStyle } = useJetpackFieldStyles( attributes );
 
@@ -90,10 +121,11 @@ export default function ImageOptionInputEdit( props ) {
 				{
 					scale: 'cover',
 					aspectRatio: '1', // Square aspect ratio for uniform grid
+					sizeSlug: isSupersized ? 'full' : 'medium',
 				},
 			],
 		];
-	}, [] );
+	}, [ isSupersized ] );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: 'jetpack-input-image-option__wrapper' },
@@ -113,9 +145,11 @@ export default function ImageOptionInputEdit( props ) {
 					tagName="span"
 					className="jetpack-input-image-option__label"
 					value={ label }
-					placeholder={ __( 'Add option…', 'jetpack-forms' ) }
+					placeholder={ __( 'Add label', 'jetpack-forms' ) }
 					__unstableDisableFormats
 					onChange={ ( newLabel: string ) => setAttributes( { label: newLabel } ) }
+					onKeyDown={ handleKeyDown }
+					onPaste={ handlePaste }
 				/>
 			</div>
 		</div>

projects/packages/forms/src/blocks/input-image-option/index.tsx

@@ -90,6 +90,23 @@ const settings = {
 			type: 'string',
 			default: '',
 		},
+		style: {
+			type: 'object',
+			default: {
+				border: {
+					radius: '4px',
+					width: '1px',
+				},
+				spacing: {
+					padding: {
+						top: '8px',
+						right: '8px',
+						bottom: '8px',
+						left: '8px',
+					},
+				},
+			},
+		},
 	},
 	save,
 };

projects/packages/forms/src/blocks/input-image-option/label.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
 /**
  * Generates a letter-based label for image option fields.
  * Converts position to letters: 1=A, 2=B, ..., 26=Z, 27=AA, 28=AB, etc.
@@ -23,17 +18,3 @@ export const getImageOptionLetter = ( position: number ): string => {
 
 	return result;
 };
-
-/**
- * Generates a translated label for image option fields.
- *
- * @param {number} index - The 1-based index of the image option.
- * @return {string} The translated label for the image option.
- */
-export const getImageOptionLabel = ( index: number ): string => {
-	return sprintf(
-		// translators: %d is the number of the choice, e.g. "Choice 1".
-		__( 'Choice %d', 'jetpack-forms' ),
-		index
-	);
-};