Helpful error on upload of image type not supported by server

lib/compat/wordpress-6.8/block-editor-settings.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Block Editor Settings compatibility for WordPress 6.8
+ *
+ * Note: This will probably be a part of the get_default_block_editor_settings function during backport.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Extends the block editor settings with image format support checks.
+ *
+ * @param array $settings The current block editor settings.
+ * @return array Modified settings.
+ */
+function gutenberg_extend_block_editor_settings_with_image_support( $settings ) {
+	$settings['wpUnsupportedMimeTypes'] = array();
+
+	$all_types = wp_get_mime_types();
+	foreach ( $all_types as $type ) {
+		// Check if image type can be edited, image types start with 'image/'.
+		if ( str_starts_with( $type, 'image/' ) && ! wp_image_editor_supports( array( 'mime_type' => $type ) ) ) {
+			$settings['wpUnsupportedMimeTypes'][] = $type;
+		}
+	}
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_extend_block_editor_settings_with_image_support' );

lib/load.php

@@ -44,6 +44,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	// WordPress 6.8 compat.
 	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-hierarchical-sort.php';
 	require __DIR__ . '/compat/wordpress-6.8/rest-api.php';
+	require __DIR__ . '/compat/wordpress-6.8/block-editor-settings.php';
 
 	// Plugin specific code.
 	require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php';

packages/block-editor/src/store/defaults.js

@@ -154,6 +154,9 @@ export const SETTINGS_DEFAULTS = {
 	// List of allowed mime types and file extensions.
 	allowedMimeTypes: null,
 
+	// List of image types not supported by the server.
+	wpUnsupportedMimeTypes: [],
+
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -48,6 +48,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'blockInspectorTabs',
 	'maxUploadFileSize',
 	'allowedMimeTypes',
+	'wpUnsupportedMimeTypes',
 	'bodyPlaceholder',
 	'canLockBlocks',
 	'canUpdateBlockBindings',

packages/editor/src/utils/media-upload/index.js

@@ -46,7 +46,7 @@ export default function mediaUpload( {
 		unlockPostSaving,
 	} = dispatch( editorStore );
 
-	const wpAllowedMimeTypes = getEditorSettings().allowedMimeTypes;
+	const { wpAllowedMimeTypes, wpUnsupportedMimeTypes } = getEditorSettings();
 	const lockKey = `image-upload-${ uuid() }`;
 	let imageIsUploading = false;
 	maxUploadFileSize =
@@ -92,5 +92,6 @@ export default function mediaUpload( {
 			onError( message );
 		},
 		wpAllowedMimeTypes,
+		wpUnsupportedMimeTypes,
 	} );
 }

packages/media-utils/README.md

@@ -56,6 +56,7 @@ _Parameters_
 -   _$0.onFileChange_ `UploadMediaArgs[ 'onFileChange' ]`: Function called each time a file or a temporary representation of the file is available.
 -   _$0.wpAllowedMimeTypes_ `UploadMediaArgs[ 'wpAllowedMimeTypes' ]`: List of allowed mime types and file extensions.
 -   _$0.signal_ `UploadMediaArgs[ 'signal' ]`: Abort signal.
+-   _$0.wpUnsupportedMimeTypes_ `UploadMediaArgs[ 'wpUnsupportedMimeTypes' ]`: List of image types not supported by the server.
 
 ### validateFileSize
 

packages/media-utils/src/utils/test/validate-mime-type-for-server.ts

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { validateMimeTypeForServer } from '../validate-mime-type-for-server';
+import { UploadError } from '../upload-error';
+
+const imageFile = new window.File( [ 'fake_file' ], 'test.avif', {
+	type: 'image/avif',
+} );
+
+describe( 'validateMimeTypeForServer', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should error if file type is not supported by the server', async () => {
+		expect( () => {
+			validateMimeTypeForServer( imageFile, [ 'image/avif' ] );
+		} ).toThrow(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED_BY_SERVER',
+				message:
+					'test.avif: The web server cannot generate responsive image sizes for this image. Convert it to JPEG or PNG before uploading.',
+				file: imageFile,
+			} )
+		);
+	} );
+} );

packages/media-utils/src/utils/upload-media.ts

@@ -17,6 +17,7 @@ import { uploadToServer } from './upload-to-server';
 import { validateMimeType } from './validate-mime-type';
 import { validateMimeTypeForUser } from './validate-mime-type-for-user';
 import { validateFileSize } from './validate-file-size';
+import { validateMimeTypeForServer } from './validate-mime-type-for-server';
 import { UploadError } from './upload-error';
 
 declare global {
@@ -42,21 +43,23 @@ interface UploadMediaArgs {
 	wpAllowedMimeTypes?: Record< string, string > | null;
 	// Abort signal.
 	signal?: AbortSignal;
+	// List of image types not supported by the server.
+	wpUnsupportedMimeTypes?: string[];
 }
-
 /**
  * Upload a media file when the file upload button is activated
  * or when adding a file to the editor via drag & drop.
  *
- * @param $0                    Parameters object passed to the function.
- * @param $0.allowedTypes       Array with the types of media that can be uploaded, if unset all types are allowed.
- * @param $0.additionalData     Additional data to include in the request.
- * @param $0.filesList          List of files.
- * @param $0.maxUploadFileSize  Maximum upload size in bytes allowed for the site.
- * @param $0.onError            Function called when an error happens.
- * @param $0.onFileChange       Function called each time a file or a temporary representation of the file is available.
- * @param $0.wpAllowedMimeTypes List of allowed mime types and file extensions.
- * @param $0.signal             Abort signal.
+ * @param $0                        Parameters object passed to the function.
+ * @param $0.allowedTypes           Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param $0.additionalData         Additional data to include in the request.
+ * @param $0.filesList              List of files.
+ * @param $0.maxUploadFileSize      Maximum upload size in bytes allowed for the site.
+ * @param $0.onError                Function called when an error happens.
+ * @param $0.onFileChange           Function called each time a file or a temporary representation of the file is available.
+ * @param $0.wpAllowedMimeTypes     List of allowed mime types and file extensions.
+ * @param $0.signal                 Abort signal.
+ * @param $0.wpUnsupportedMimeTypes List of image types not supported by the server.
  */
 export function uploadMedia( {
 	wpAllowedMimeTypes,
@@ -67,6 +70,7 @@ export function uploadMedia( {
 	onError,
 	onFileChange,
 	signal,
+	wpUnsupportedMimeTypes,
 }: UploadMediaArgs ) {
 	const validFiles = [];
 
@@ -94,6 +98,14 @@ export function uploadMedia( {
 			continue;
 		}
 
+		// Verify the server is able to process this mime type.
+		try {
+			validateMimeTypeForServer( mediaFile, wpUnsupportedMimeTypes );
+		} catch ( error: unknown ) {
+			onError?.( error as Error );
+			continue;
+		}
+
 		// Check if the caller (e.g. a block) supports this mime type.
 		// Defer to the server when type not detected.
 		try {

packages/media-utils/src/utils/validate-mime-type-for-server.ts

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { UploadError } from './upload-error';
+
+/**
+ * Verifies if the mime type is allowed on the server.
+ *
+ * @param file                   File object.
+ * @param wpUnsupportedMimeTypes List of allowed mime types and file extensions.
+ */
+export function validateMimeTypeForServer(
+	file: File,
+	wpUnsupportedMimeTypes?: string[]
+) {
+	if (
+		wpUnsupportedMimeTypes &&
+		file.type &&
+		wpUnsupportedMimeTypes.includes( file.type )
+	) {
+		throw new UploadError( {
+			code: 'MIME_TYPE_NOT_SUPPORTED_BY_SERVER',
+			message: sprintf(
+				// translators: %s: file name.
+				__(
+					'%s: The web server cannot generate responsive image sizes for this image. Convert it to JPEG or PNG before uploading.'
+				),
+				file.name
+			),
+			file,
+		} );
+	}
+}