From 7882523e64e506eec34073ea9f025a90729e2c38 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <hi@themesbycarolina.com>
Date: Tue, 28 Jan 2025 07:21:36 +0100
Subject: [PATCH] Package blocks: Introduce a utility for getting the block
 image

Add a utility function to the Blocks API that gets an image URL.

Blocks can register a __experimentalImage setting to pass any chosen image URL depending on context. A context may be for example the list-view.
---
 .../list-view/use-list-view-images.js         | 21 ++++++++++++++++++-
 packages/block-library/src/cover/index.js     |  9 ++++++++
 .../block-library/src/media-text/index.js     |  9 ++++++++
 packages/blocks/src/api/index.js              |  1 +
 packages/blocks/src/api/utils.js              | 19 +++++++++++++++++
 5 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/list-view/use-list-view-images.js b/packages/block-editor/src/components/list-view/use-list-view-images.js
index 97633349b6b028..50df888c52d57a 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-images.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-images.js
@@ -3,6 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __experimentalGetBlockImage as getBlockImage } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -74,8 +75,26 @@ export default function useListViewImages( { clientId, isExpanded } ) {
 		},
 		[ clientId ]
 	);
-
 	const images = useMemo( () => {
+		const blockImageURL = getBlockImage(
+			block.name,
+			block.attributes,
+			'list-view'
+		);
+		if ( blockImageURL ) {
+			return [
+				{
+					url: blockImageURL,
+					alt:
+						block.attributes?.alt ||
+						block.attributes?.mediaAlt ||
+						'',
+					clientId: block.clientId,
+				},
+			];
+		}
+
+		// Fallback to custom logic for core/image or core/gallery.
 		return getImagesFromBlock( block, isExpanded );
 	}, [ block, isExpanded ] );
 
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index b5de174f708085..a1e7233f7177d5 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -45,6 +45,15 @@ export const settings = {
 			},
 		],
 	},
+	__experimentalImage( attributes, { context } ) {
+		if (
+			attributes.backgroundType === 'image' &&
+			context === 'list-view' &&
+			attributes?.url
+		) {
+			return attributes?.url;
+		}
+	},
 	transforms,
 	save,
 	edit,
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 373050cb77fd56..bd0891faa5b247 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -44,6 +44,15 @@ export const settings = {
 			},
 		],
 	},
+	__experimentalImage( attributes, { context } ) {
+		if (
+			attributes.mediaType === 'image' &&
+			context === 'list-view' &&
+			attributes?.mediaUrl
+		) {
+			return attributes?.mediaUrl;
+		}
+	},
 	transforms,
 	edit,
 	save,
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index fbfe16384fa7e5..9e49d3c61bfdf9 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -156,6 +156,7 @@ export {
 	__experimentalSanitizeBlockAttributes,
 	getBlockAttributesNamesByRole,
 	__experimentalGetBlockAttributesNamesByRole,
+	getBlockImage as __experimentalGetBlockImage,
 } from './utils';
 
 // Templates are, in a general sense, a basic collection of block nodes with any
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index ad94d9d5c9e0c1..c6657bbc7ba8ab 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -418,3 +418,22 @@ export function omit( object, keys ) {
 		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
 	);
 }
+
+/**
+ * Return the block image URL.
+ *
+ * @param {string|Object} blockTypeOrName The block type or name.
+ * @param {Object}        attributes      The block's attributes.
+ * @param {string}        context         The context in which the block is being displayed.
+ *
+ * @return {string|null} The block image URL or null.
+ */
+export function getBlockImage( blockTypeOrName, attributes, context ) {
+	const blockType = normalizeBlockType( blockTypeOrName );
+	const { __experimentalImage: getImage } = blockType;
+	const url = getImage && getImage( attributes, { context } );
+	if ( url ) {
+		return url;
+	}
+	return null;
+}