Media: enable AVIF support.

Add support for uploading, editing and saving AVIF images when supported by the server.

Add 'image/avif' to supported mime types. Correctly identify AVIF images and sizes even when PHP doesn't support AVIF. Resize uploaded AVIF files (when supported) and use for front end markup.

Props adamsilverstein, lukefiretoss, ayeshrajans, navjotjsingh, Tyrannous, jb510, gregbenz, nickpagz, JavierCasares, mukesh27, yguyon, swissspidy.
Fixes #51228.



git-svn-id: https://develop.svn.wordpress.org/trunk@57524 602fd350-edb4-49c9-b593-d223f7449a82

Author: adamsilverstein

phpcs.xml.dist

@@ -59,6 +59,7 @@
 	<exclude-pattern>/src/wp-includes/class-requests\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/class-simplepie\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/class-snoopy\.php</exclude-pattern>
+	<exclude-pattern>/src/wp-includes/class-avif-info\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/deprecated\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/ms-deprecated\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/pluggable-deprecated\.php</exclude-pattern>

src/js/_enqueues/vendor/plupload/handlers.js

@@ -608,6 +608,11 @@ jQuery( document ).ready( function( $ ) {
 					wpQueueError( pluploadL10n.noneditable_image );
 					up.removeFile( file );
 					return;
+				} else if ( file.type === 'image/avif' && up.settings.avif_upload_error ) {
+					// Disallow uploading of AVIF images if the server cannot edit them.
+					wpQueueError( pluploadL10n.noneditable_image );
+					up.removeFile( file );
+					return;
 				}
 
 				fileQueued( file );

src/js/_enqueues/vendor/plupload/wp-plupload.js

@@ -363,6 +363,11 @@ window.wp = window.wp || {};
 					error( pluploadL10n.noneditable_image, {}, file, 'no-retry' );
 					up.removeFile( file );
 					return;
+				} else if ( file.type === 'image/avif' && up.settings.avif_upload_error ) {
+					// Disallow uploading of AVIF images if the server cannot edit them.
+					error( pluploadL10n.noneditable_image, {}, file, 'no-retry' );
+					up.removeFile( file );
+					return;
 				}
 
 				// Generate attributes for a new `Attachment` model.

src/js/_enqueues/vendor/thickbox/thickbox.js

@@ -76,15 +76,16 @@ function tb_show(caption, url, imageGroup) {//function called when the user clic
 	   		baseURL = url;
 	   }
 
-	   var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$|\.webp$/;
+	   var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$|\.webp$|\.avif$/;
 	   var urlType = baseURL.toLowerCase().match(urlString);
 
 		if(urlType == '.jpg' ||
 			urlType == '.jpeg' ||
 			urlType == '.png' ||
 			urlType == '.gif' ||
 			urlType == '.bmp' ||
-			urlType == '.webp'
+			urlType == '.webp' ||
+			urlType == '.avif'
 		){//code to show images
 
 			TB_PrevCaption = "";

src/js/media/controllers/library.js

@@ -196,7 +196,7 @@ Library = wp.media.controller.State.extend(/** @lends wp.media.controller.Librar
 	isImageAttachment: function( attachment ) {
 		// If uploading, we know the filename but not the mime type.
 		if ( attachment.get('uploading') ) {
-			return /\.(jpe?g|png|gif|webp)$/i.test( attachment.get('filename') );
+			return /\.(jpe?g|png|gif|webp|avif)$/i.test( attachment.get('filename') );
 		}
 
 		return attachment.get('type') === 'image';

src/wp-admin/includes/image-edit.php

@@ -390,6 +390,12 @@ function wp_stream_image( $image, $mime_type, $attachment_id ) {
 					return imagewebp( $image, null, 90 );
 				}
 				return false;
+			case 'image/avif':
+				if ( function_exists( 'imageavif' ) ) {
+					header( 'Content-Type: image/avif' );
+					return imageavif( $image, null, 90 );
+				}
+				return false;
 			default:
 				return false;
 		}
@@ -494,6 +500,11 @@ function wp_save_image_file( $filename, $image, $mime_type, $post_id ) {
 					return imagewebp( $image, $filename );
 				}
 				return false;
+			case 'image/avif':
+				if ( function_exists( 'imageavif' ) ) {
+					return imageavif( $image, $filename );
+				}
+				return false;
 			default:
 				return false;
 		}

src/wp-admin/includes/image.php

@@ -1006,7 +1006,7 @@ function file_is_valid_image( $path ) {
  * @return bool True if suitable, false if not suitable.
  */
 function file_is_displayable_image( $path ) {
-	$displayable_image_types = array( IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_BMP, IMAGETYPE_ICO, IMAGETYPE_WEBP );
+	$displayable_image_types = array( IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_BMP, IMAGETYPE_ICO, IMAGETYPE_WEBP, IMAGETYPE_AVIF );
 
 	$info = wp_getimagesize( $path );
 	if ( empty( $info ) ) {

src/wp-admin/includes/media.php

@@ -2198,6 +2198,11 @@ function media_upload_form( $errors = null ) {
 		$plupload_init['webp_upload_error'] = true;
 	}
 
+	// Check if AVIF images can be edited.
+	if ( ! wp_image_editor_supports( array( 'mime_type' => 'image/avif' ) ) ) {
+		$plupload_init['avif_upload_error'] = true;
+	}
+
 	/**
 	 * Filters the default Plupload settings.
 	 *

src/wp-admin/includes/schema.php

@@ -1250,6 +1250,7 @@ function populate_network_meta( $network_id, array $meta = array() ) {
 		'png',
 		'gif',
 		'webp',
+		'avif',
 		// Video.
 		'mov',
 		'avi',