Package blocks: Introduce a utility for getting the block image

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 ] );
 

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,

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,

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

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;
+}