Further consolidate optimization logic

.github/workflows/e2e-tests.yml

@@ -76,7 +76,7 @@ jobs:
 
             - name: Run tests
               run: |
-                npm run test:e2e -- --shard=${{ matrix.shard }}
+                  npm run test:e2e -- --shard=${{ matrix.shard }}
               env:
                   COLLECT_COVERAGE: ${{ matrix.wp == 'latest' }}
 

packages/editor/src/block-media-panel/cover-controls.tsx

@@ -13,15 +13,18 @@ import type { BlockEditProps } from '@wordpress/blocks';
  */
 import { DebugInfo } from './debug-info';
 import { MuteVideo } from './mute-video';
-import { OptimizeMedia } from './optimize-media';
 import { RecordingControls } from './recording-controls';
 import type { CoverBlock } from '../types';
 import { UploadIndicator } from './upload-indicator';
+import { BulkOptimization } from '../components/bulk-optimization';
+import { useBlockAttachments } from '../utils/hooks';
 
 type CoverControlsProps = CoverBlock &
 	Pick< BlockEditProps< CoverBlock[ 'attributes' ] >, 'setAttributes' >;
 
 export function CoverControls( props: CoverControlsProps ) {
+	const attachments = useBlockAttachments( props.clientId );
+
 	function onChange( media: Partial< Attachment > ) {
 		if ( ! media || ! media.url ) {
 			return;
@@ -53,11 +56,7 @@ export function CoverControls( props: CoverControlsProps ) {
 				onInsert={ onInsertRecording }
 				recordingTypes={ [ 'image', 'video' ] }
 			/>
-			<OptimizeMedia
-				id={ props.attributes.id }
-				url={ props.attributes.url }
-				onSuccess={ onChange }
-			/>
+			<BulkOptimization attachments={ attachments } />
 			{ 'video' === props.attributes.backgroundType ? (
 				<MuteVideo
 					id={ props.attributes.id }

packages/editor/src/block-media-panel/gallery-controls.tsx

@@ -1,101 +1,29 @@
 /**
  * External dependencies
  */
-import type { Attachment, RestAttachment } from '@mexp/media-utils';
+import type { Attachment } from '@mexp/media-utils';
 
 /**
  * WordPress dependencies
  */
-import type { BlockEditProps, BlockInstance } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
 import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { BulkOptimization } from '../components/bulk-optimization';
-import type { BulkOptimizationAttachmentData } from '../types';
-import type { GalleryBlock, ImageBlock } from '../types';
+import type { GalleryBlock } from '../types';
 import { UploadRequestControls } from './upload-requests/controls';
+import { useBlockAttachments } from '../utils/hooks';
 
 type GalleryControlsProps = GalleryBlock &
 	Pick< BlockEditProps< GalleryBlock[ 'attributes' ] >, 'setAttributes' >;
 
-const EMPTY_ARRAY: never[] = [];
-
-// TODO: Refactor to be less ugly and more performant.
-function useGalleryImageAttachments( clientId: BlockInstance[ 'clientId' ] ) {
-	const innerBlockImages = useSelect(
-		( select ) => {
-			return (
-				( select( blockEditorStore ).getBlock( clientId )
-					?.innerBlocks as ImageBlock[] ) ?? EMPTY_ARRAY
-			);
-		},
-		[ clientId ]
-	);
-
-	return useSelect(
-		( select ) =>
-			innerBlockImages
-				.filter( ( block ) => block.attributes.id )
-				// TODO: Also include external images that would simply be imported & then optimized.
-				.reduce( ( acc, block ) => {
-					if (
-						! acc.find(
-							( b ) => b.attributes.id === block.attributes.id
-						)
-					) {
-						acc.push( block );
-					}
-					return acc;
-				}, [] as Array< ImageBlock > )
-				.map( ( block ) => {
-					const attachment: BulkOptimizationAttachmentData = {
-						clientId: block.clientId,
-						id: block.attributes.id,
-						url: block.attributes.url,
-						posterUrl: block.attributes.url,
-						mexp_filesize: 0,
-						mexp_filename: '',
-						isOptimized: false,
-						isFetched: false,
-					};
-
-					// @ts-ignore -- TODO: Fix this without casting.
-					const media: RestAttachment | undefined = select(
-						coreStore
-					).getMedia( block.attributes.id, {
-						context: 'edit',
-					} );
-
-					if ( media ) {
-						attachment.isFetched = true;
-
-						attachment.isOptimized =
-							media.mexp_media_source.length > 0;
-
-						// TODO: Use fetchFile() as fallback.
-						if ( media.mexp_filesize ) {
-							attachment.mexp_filesize = media.mexp_filesize;
-						}
-
-						if ( media.mexp_filename ) {
-							attachment.mexp_filename = media.mexp_filename;
-						}
-					}
-
-					return attachment;
-				} )
-				.filter( ( data ) => data.isFetched && ! data.isOptimized ),
-		[ innerBlockImages ]
-	);
-}
-
 export function GalleryControls( props: GalleryControlsProps ) {
-	const attachments = useGalleryImageAttachments( props.clientId );
+	const attachments = useBlockAttachments( props.clientId );
 
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 

packages/editor/src/block-media-panel/generate-subtitles.tsx

@@ -47,6 +47,7 @@ export function GenerateSubtitles( {
 	const hasTracks = attributes.tracks.length > 0;
 
 	// Force-show subtitles in the video player so user immediately sees result.
+	// TODO: Also add to core/media-text and core/cover blocks.
 	useLayoutEffect( () => {
 		if ( ! hasTracks ) {
 			return;

packages/editor/src/block-media-panel/image-controls.tsx

@@ -15,17 +15,20 @@ import { isBlobURL } from '@wordpress/blob';
 import { UploadIndicator } from './upload-indicator';
 import { RecordingControls } from './recording-controls';
 import { ImportMedia } from './import-media';
-import { OptimizeMedia } from './optimize-media';
 import { DebugInfo } from './debug-info';
 import type { ImageBlock } from '../types';
 import { AnimatedGifConverter } from './animated-gif-converter';
 import { UploadRequestControls } from './upload-requests/controls';
 import { GenerateCaptions } from './generate-caption';
+import { BulkOptimization } from '../components/bulk-optimization';
+import { useBlockAttachments } from '../utils/hooks';
 
 type ImageControlsProps = ImageBlock &
 	Pick< BlockEditProps< ImageBlock[ 'attributes' ] >, 'setAttributes' >;
 
 export function ImageControls( props: ImageControlsProps ) {
+	const attachments = useBlockAttachments( props.clientId );
+
 	function onImportMedia( media: Partial< Attachment > ) {
 		// Ignore blob URLs as otherwise the block tries to upload it again.
 		if ( ! media || ! media.url || isBlobURL( media.url ) ) {
@@ -38,16 +41,6 @@ export function ImageControls( props: ImageControlsProps ) {
 		} );
 	}
 
-	function onOptimizeMedia( media: Partial< Attachment > ) {
-		if ( ! media || ! media.url ) {
-			return;
-		}
-		props.setAttributes( {
-			url: media.url,
-			id: media.id,
-		} );
-	}
-
 	function onInsertRecording( url?: string ) {
 		if ( url ) {
 			props.setAttributes( {
@@ -109,11 +102,7 @@ export function ImageControls( props: ImageControlsProps ) {
 					onChange={ onImportMedia }
 				/>
 			) : null }
-			<OptimizeMedia
-				id={ props.attributes.id }
-				url={ props.attributes.url }
-				onSuccess={ onOptimizeMedia }
-			/>
+			<BulkOptimization attachments={ attachments } />
 			<GenerateCaptions
 				url={ props.attributes.url }
 				onUpdateCaption={ onUpdateCaption }

packages/editor/src/block-media-panel/index.tsx

@@ -55,7 +55,7 @@ function PerBlockControls( props: PerBlockControlsProps ) {
 			return <CoverControls { ...props } />;
 
 		case 'core/post-featured-image':
-			return <PostFeaturedImageControls />;
+			return <PostFeaturedImageControls { ...props } />;
 
 		case 'core/site-logo':
 			return <SiteLogoControls { ...props } />;

packages/editor/src/block-media-panel/media-text-controls.tsx

@@ -13,15 +13,18 @@ import type { BlockEditProps } from '@wordpress/blocks';
  */
 import { DebugInfo } from './debug-info';
 import { MuteVideo } from './mute-video';
-import { OptimizeMedia } from './optimize-media';
 import { RecordingControls } from './recording-controls';
 import type { MediaTextBlock } from '../types';
 import { UploadIndicator } from './upload-indicator';
+import { BulkOptimization } from '../components/bulk-optimization';
+import { useBlockAttachments } from '../utils/hooks';
 
 type MediaTextControlsProps = MediaTextBlock &
 	Pick< BlockEditProps< MediaTextBlock[ 'attributes' ] >, 'setAttributes' >;
 
 export function MediaTextControls( props: MediaTextControlsProps ) {
+	const attachments = useBlockAttachments( props.clientId );
+
 	function onChange( media: Partial< Attachment > ) {
 		if ( ! media || ! media.url ) {
 			return;
@@ -53,11 +56,7 @@ export function MediaTextControls( props: MediaTextControlsProps ) {
 				onInsert={ onInsertRecording }
 				recordingTypes={ [ 'image', 'video' ] }
 			/>
-			<OptimizeMedia
-				id={ props.attributes.mediaId }
-				url={ props.attributes.mediaUrl }
-				onSuccess={ onChange }
-			/>
+			<BulkOptimization attachments={ attachments } />
 			{ 'video' === props.attributes.mediaType ? (
 				<MuteVideo
 					id={ props.attributes.mediaId }