Merge pull request #6565 from ampproject/enhancement/6536-add-featured-image-mime-types

Add WebP and SVG as accepted image formats for a post featured image

Author: westonruter

assets/src/common/components/higher-order/with-featured-image-notice.js

@@ -40,7 +40,7 @@ export default createHigherOrderComponent(
 			return (
 				<>
 					<Notice
-						status="notice"
+						status="warning"
 						isDismissible={ false }
 					>
 						{ errors.map( ( errorMessage, index ) => {

assets/src/common/helpers/index.js

@@ -87,10 +87,10 @@ export const validateFeaturedImage = ( media, dimensions, required ) => {
 
 	const errors = [];
 
-	if ( ! [ 'image/png', 'image/gif', 'image/jpeg' ].includes( media.mime_type ) ) {
+	if ( ! [ 'image/png', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml' ].includes( media.mime_type ) ) {
 		errors.push(
-			/* translators: 1: .jpg, 2: .png. 3: .gif */
-			sprintf( __( 'The featured image must be in %1$s, %2$s, or %3$s format.', 'amp' ), '.jpg', '.png', '.gif' ),
+			/* translators: List of image formats */
+			sprintf( __( 'The featured image must be of either %1$s, %2$s, %3$s, %4$s, or %5$s format.', 'amp' ), 'JPEG', 'PNG', 'GIF', 'WebP', 'SVG' ),
 		);
 	}
 

assets/src/common/helpers/test/validateFeaturedImage.js

@@ -20,7 +20,7 @@ describe( 'validateFeaturedImage', () => {
 			{ width: 10, height: 10 },
 			false,
 		);
-		expect( isValid ).toStrictEqual( [ 'The featured image must be in .jpg, .png, or .gif format.' ] );
+		expect( isValid ).toStrictEqual( [ 'The featured image must be of either JPEG, PNG, GIF, WebP, or SVG format.' ] );
 	} );
 
 	it( 'returns an error if the featured image is too small', () => {