Forms: update visual representation of "image select field" responses at inbox (#45585)

* Use Photon to load only a small image
* Add `lazy` to prevent loading images early when they're outside the viewport, especially on mobile
* Wrap images & responses next to each other, each on its own row, wrapped in a button
* Open a modal to preview a larger photo when clicked
* Simplify CSS to have fewer styles, use more components. 
* Especially an empty image is now a simpler implementation as more of an edge case; previously it was nicer, but I'm not sure it's worth the code.

Author: simison

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: update visual representation of "image select field" responses at inbox

projects/packages/forms/changelog/update-forms-image-select-img-perf

@@ -70,6 +70,7 @@
 		"js-sha256": "0.11.1",
 		"libphonenumber-js": "1.12.23",
 		"lodash": "4.17.21",
+		"photon": "4.1.1",
 		"react-redux": "7.2.8",
 		"react-router": "7.6.2",
 		"react-transition-group": "^4.4.5",

projects/packages/forms/package.json

@@ -19,8 +19,9 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { download } from '@wordpress/icons';
+import { download, image } from '@wordpress/icons';
 import clsx from 'clsx';
+import photon from 'photon';
 /**
  * Internal dependencies
  */
@@ -249,45 +250,46 @@ const ResponseViewBody = ( {
 				<div className="image-select-field">
 					{ ( value.choices?.length ?? 0 ) === 0 && '-' }
 					{ ( value.choices?.length ?? 0 ) > 0 && (
-						<>
-							<div className="image-select-field-choices">
-								{ value.choices
-									.map( choice => {
-										let transformedValue = choice.selected;
-
-										if ( choice.label != null && choice.label !== '' ) {
-											transformedValue += ' - ' + choice.label;
+						<VStack spacing="1">
+							{ value.choices.map( choice => {
+								const label = choice.label
+									? `${ choice.selected }: ${ choice.label }`
+									: choice.selected;
+								const hasImage = choice.image?.src;
+								return (
+									<Button
+										__next40pxDefaultSize
+										key={ choice.selected }
+										variant="tertiary"
+										onClick={
+											hasImage
+												? handleFilePreview( {
+														file_id: choice.image.id,
+														name: label,
+														url: choice.image.src,
+												  } )
+												: undefined
 										}
-
-										return transformedValue;
-									} )
-									.join( ', ' ) }
-							</div>
-							<div className="image-select-field-images">
-								{ value.choices.map( choice => {
-									const imageSrc =
-										choice.image?.src ||
-										'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-
-									return (
-										<figure
-											key={ choice.selected }
-											className={ clsx( 'image-select-field-image', {
-												'is-empty': ! choice.image?.src,
-											} ) }
-										>
-											<img
-												className={ clsx( 'image-select-field-image', {
-													'is-empty': ! choice.image?.src,
-												} ) }
-												src={ imageSrc }
-												alt={ choice.selected }
-											/>
-										</figure>
-									);
-								} ) }
-							</div>
-						</>
+										className="image-select-field-button"
+										icon={
+											hasImage ? (
+												<img
+													alt={ choice.selected }
+													className="image-select-field-image"
+													loading="lazy"
+													src={ photon( choice.image.src, { width: 120, height: 120 } ) }
+												/>
+											) : (
+												image
+											)
+										}
+										iconSize={ 60 }
+									>
+										{ label }
+									</Button>
+								);
+							} ) }
+						</VStack>
 					) }
 				</div>
 			);

projects/packages/forms/src/dashboard/components/response-view/body.tsx

@@ -274,36 +274,9 @@
 
 .jp-forms__inbox-response-data-value .image-select-field {
 
-	.image-select-field-images {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-	}
-
-	.image-select-field-image {
-		margin: 0;
-		width: 60px;
-		height: 60px;
-
-		&.is-empty {
-			position: relative;
-
-			&::before {
-
-				@extend %empty-image-option-background;
-			}
-
-			&::after {
-
-				@extend %empty-image-option-icon;
-				background-color: #000;
-			}
-		}
-
-		img {
-			aspect-ratio: 1/1;
-			object-fit: cover;
-		}
+	.image-select-field-button {
+		gap: variables.$grid-unit-10;
+		height: auto;
 	}
 }