WordPress · felixarntz · Aug 9, 2022 · Jul 20, 2022 · Jul 20, 2022 · Jul 21, 2022
diff --git a/modules/images/webp-uploads/fallback.js b/modules/images/webp-uploads/fallback.js
@@ -4,21 +4,62 @@ window.wpPerfLab = window.wpPerfLab || {};
 	window.wpPerfLab.webpUploadsFallbackWebpImages = function( media ) {
 		for ( var i = 0; i < media.length; i++ ) {
 			try {
-				if ( ! media[i].media_details.sources || ! media[i].media_details.sources['image/jpeg'] ) {
-					continue;
-				}
+				var image         = media[ i ],
+					media_details = image.media_details,
+					media_sources = media_details.sources,
+					sizes         = media_details.sizes,
+					sizes_keys    = Object.keys( sizes );
 
-				var ext = media[i].media_details.sources['image/jpeg'].file.match( /\.\w+$/i );
-				if ( ! ext || ! ext[0] ) {
+				// If the full image has no JPEG version available, no sub-size will have JPEG available either.
+				if ( sizes.full && ! sizes.full.sources['image/jpeg'] ) {
 					continue;
 				}
 
-				var images = document.querySelectorAll( 'img.wp-image-' + media[i].id );
+				var images = document.querySelectorAll( 'img.wp-image-' + image.id );
+
 				for ( var j = 0; j < images.length; j++ ) {
-					images[j].src = images[j].src.replace( /\.webp$/i, ext[0] );
-					var srcset = images[j].getAttribute( 'srcset' );
+
+					var src = images[ j ].src;
+
+					// If there are sources but no sizes, then attempt to replace src through sources. In that case, there is nothing more to replace.
+					if ( media_sources && ! sizes_keys.length ) {
+						// Only modify src if available and the relevant sources are set.
+						if ( src && media_sources['image/webp'] && media_sources['image/jpeg'] ) {
+							src = src.replace( media_sources['image/webp'].file, media_sources['image/jpeg'].file );
+							images[ j ].setAttribute( 'src', src );
+						}
+						continue;
+					}
+
+					var srcset = images[ j ].getAttribute( 'srcset' );
+
+					for ( var k = 0; k < sizes_keys.length; k++ ) {
+						var media_sizes_sources = sizes[ sizes_keys[ k ] ].sources;
+						if ( ! media_sizes_sources || ! media_sizes_sources['image/webp'] || ! media_sizes_sources['image/jpeg'] ) {
+							continue;
+						}
+
+						// Check to see if the image src has any size set, then update it.
+						if ( media_sizes_sources['image/webp'].source_url === src ) {
+							src = media_sizes_sources['image/jpeg'].source_url;
+
+							// If there is no srcset and the src has been replaced, there is nothing more to replace.
+							if ( ! srcset ) {
+								break;
+							}
+						}
+
+						if ( srcset ) {
+							srcset = srcset.replace( media_sizes_sources['image/webp'].source_url, media_sizes_sources['image/jpeg'].source_url );
+						}
+					}
+
 					if ( srcset ) {
-						images[j].setAttribute( 'srcset', srcset.replace( /\.webp(\s)/ig, ext[0] + '$1' ) );
+						images[ j ].setAttribute( 'srcset', srcset );
+					}
+
+					if ( src ) {
+						images[ j ].setAttribute( 'src', src );
 					}
 				}
 			} catch ( e ) {
@@ -31,7 +72,7 @@ window.wpPerfLab = window.wpPerfLab || {};
 	var loadMediaDetails = function( nodes ) {
 		var ids = [];
 		for ( var i = 0; i < nodes.length; i++ ) {
-			var node = nodes[i];
+			var node = nodes[ i ];
 			var srcset = node.getAttribute( 'srcset' ) || '';
 
 			if (
@@ -66,7 +107,7 @@ window.wpPerfLab = window.wpPerfLab || {};
 		// Start the mutation observer to update images added dynamically.
 		var observer = new MutationObserver( function( mutationList ) {
 			for ( var i = 0; i < mutationList.length; i++ ) {
-				loadMediaDetails( mutationList[i].addedNodes );
+				loadMediaDetails( mutationList[ i ].addedNodes );
 			}
 		} );
 

diff --git a/modules/images/webp-uploads/rest-api.php b/modules/images/webp-uploads/rest-api.php
@@ -22,21 +22,27 @@ function webp_uploads_update_rest_attachment( WP_REST_Response $response, WP_Pos
 		return $response;
 	}
 
-	$metadata = wp_get_attachment_metadata( $post->ID );
-	foreach ( $data['media_details']['sizes'] as $size => $details ) {
-		if ( empty( $metadata['sizes'][ $size ]['sources'] ) || ! is_array( $metadata['sizes'][ $size ]['sources'] ) ) {
+	foreach ( $data['media_details']['sizes'] as $size => &$details ) {
+
+		if ( empty( $details['sources'] ) || ! is_array( $details['sources'] ) ) {
 			continue;
 		}
 
-		$sources   = array();
-		$directory = dirname( $data['media_details']['sizes'][ $size ]['source_url'] );
-		foreach ( $metadata['sizes'][ $size ]['sources'] as $mime => $mime_details ) {
-			$source_url                 = "{$directory}/{$mime_details['file']}";
-			$mime_details['source_url'] = $source_url;
-			$sources[ $mime ]           = $mime_details;
+		$image_url_basename = wp_basename( $details['source_url'] );
+		foreach ( $details['sources'] as $mime => &$mime_details ) {
+			$mime_details['source_url'] = str_replace( $image_url_basename, $mime_details['file'], $details['source_url'] );
+		}
+	}
+
+	$full_src = wp_get_attachment_image_src( $post->ID, 'full' );
+	if ( ! empty( $full_src ) && ! empty( $data['media_details']['sources'] ) && ! empty( $data['media_details']['sizes']['full'] ) ) {
+		$full_url_basename = wp_basename( $full_src[0] );
+		foreach ( $data['media_details']['sources'] as $mime => &$mime_details ) {
+			$mime_details['source_url'] = str_replace( $full_url_basename, $mime_details['file'], $full_src[0] );
 		}
 
-		$data['media_details']['sizes'][ $size ]['sources'] = $sources;
+		$data['media_details']['sizes']['full']['sources'] = $data['media_details']['sources'];
+		unset( $data['media_details']['sources'] );
 	}
 
 	return rest_ensure_response( $data );

diff --git a/tests/modules/images/webp-uploads/rest-api-tests.php b/tests/modules/images/webp-uploads/rest-api-tests.php
@@ -30,13 +30,14 @@ public function it_should_add_sources_to_rest_response() {
 		$controller = new WP_REST_Attachments_Controller( 'attachment' );
 		$response   = $controller->get_item( $request );
 
-		$this->assertInstanceOf( 'WP_REST_Response', $response );
+		$this->assertNotWPError( $response );
 
 		$data       = $response->get_data();
-		$mime_types = array(
-			'image/jpeg',
-			'image/webp',
-		);
+		$mime_types = array( 'image/jpeg' );
+
+		if ( wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
+			array_push( $mime_types, 'image/webp' );
+		}
 
 		foreach ( $data['media_details']['sizes'] as $size_name => $properties ) {
 			if ( ! isset( $metadata['sizes'][ $size_name ]['sources'] ) ) {
@@ -56,5 +57,6 @@ public function it_should_add_sources_to_rest_response() {
 				$this->assertNotFalse( filter_var( $properties['sources'][ $mime_type ]['source_url'], FILTER_VALIDATE_URL ) );
 			}
 		}
+		$this->assertArrayNotHasKey( 'sources', $data['media_details'] );
 	}
 }