MediaUploadCheck Inside Map Gutenberg Blocks

This helps make sure that you’re displaying the Alt text on the image

Component

<MediaUploadCheck>
	<MediaUpload
		onSelect={(media) =>
			updateColumn(index, 'img', { img: media.url, alt: media.alt })
		}
		type="image"
		allowedTypes={['image']}
		value={column.img}
		render={({ open }) => (
			<div>
				{column.img && (
				<p className={``} style={{fontSize:'80%',lineHeight:'1.2'}}>{__('Alt Text:')} {column.alt}</p>
			)}
				{column.img && (
					<Button
						isLink
						isDestructive
						onClick={() => updateColumn(index, 'img', '')}
					>
						{__('Remove Col Image')}
					</Button>
				)}
				<Button
					onClick={open}
					icon="upload"
					className="editor-media-placeholder__button is-button is-default is-large"
				>
					{__('Select Col Image')}
				</Button>
			</div>
		)}
	/>
</MediaUploadCheck>

This is the arrow function for updating the columns array

const updateColumn = (columnIndex, field, value) => {
		setAttributes({
			columns: columns.map((column, index) => {
				if (index === columnIndex) {
					// Check if the value is an object (in case of multiple updates)
					if (typeof value === 'object' && value !== null) {
						return {
							...column,
							...value, // Spread the object fields
						};
					}
					return {
						...column,
						[field]: value, // Single field update
					};
				}
				return column;
			}),
		});
	};

How to display conditionally in Edit.js

{ column.img && (
	<img
		src={ column.img }
		style={ {
			width: '400px',
			height: '225px',
			objectFit: 'cover',
		} }
	/>
)}

Here’s how to display it in Save.js

{ column.img && (
								<img
									src={ column.img }
									alt={ column.alt }
									className={column.img_class}
									style={column.img_style}
								/>
)}