use smaller images for previews

WordPress · Dec 23, 2022 · 7971513 · 7971513 · github-actions · Dec 23, 2022
1 parent d90e553
commit 7971513
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -23,12 +23,13 @@ import { store as blockEditorStore } from '../../../store';
  * WordPress media blocks(image, video, audio).
  *
  * @typedef {Object} InserterMediaItem
- * @property {string}        title      The title of the media item.
- * @property {string}        src        The source url of the media item.
- * @property {number}        [id]       The WordPress id of the media item.
- * @property {number|string} [sourceId] The id of the media item from external source.
- * @property {string}        [alt]      The alt text of the media item.
- * @property {string}        [caption]  The caption of the media item.
+ * @property {string}        title        The title of the media item.
+ * @property {string}        url          The source url of the media item.
+ * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
+ * @property {number}        [id]         The WordPress id of the media item.
+ * @property {number|string} [sourceId]   The id of the media item from external source.
+ * @property {string}        [alt]        The alt text of the media item.
+ * @property {string}        [caption]    The caption of the media item.
  *
  */
 

diff --git a/packages/block-editor/src/components/inserter/media-tab/utils.js b/packages/block-editor/src/components/inserter/media-tab/utils.js
@@ -31,7 +31,7 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) {
 	const PreviewTag = mediaTypeTag[ mediaType ];
 	const preview = (
 		<PreviewTag
-			src={ mediaSrc }
+			src={ media.previewUrl || mediaSrc }
 			alt={ alt }
 			controls={ mediaType === 'audio' ? true : undefined }
 			inert="true"

diff --git a/packages/edit-site/src/components/block-editor/inserter-media-categories.js b/packages/edit-site/src/components/block-editor/inserter-media-categories.js
@@ -79,6 +79,7 @@ const coreMediaFetch = async ( query = {} ) => {
 		...mediaItem,
 		alt: mediaItem.alt_text,
 		url: mediaItem.source_url,
+		previewUrl: mediaItem.media_details?.sizes?.medium?.source_url,
 		caption: mediaItem.caption?.raw,
 	} ) );
 };
@@ -140,6 +141,7 @@ const inserterMediaCategories = [
 				sourceId: result.id,
 				id: undefined,
 				caption: getOpenverseCaption( result ),
+				previewUrl: result.thumbnail,
 			} ) );
 		},
 		hasAvailableMedia: true,

diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js
@@ -79,6 +79,7 @@ const coreMediaFetch = async ( query = {} ) => {
 		...mediaItem,
 		alt: mediaItem.alt_text,
 		url: mediaItem.source_url,
+		previewUrl: mediaItem.media_details?.sizes?.medium?.source_url,
 		caption: mediaItem.caption?.raw,
 	} ) );
 };
@@ -140,6 +141,7 @@ const inserterMediaCategories = [
 				sourceId: result.id,
 				id: undefined,
 				caption: getOpenverseCaption( result ),
+				previewUrl: result.thumbnail,
 			} ) );
 		},
 		hasAvailableMedia: true,