Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#58402 new defect (bug)

Featured Image Preview breaks when an SVG image is uploaded.

Reported by: deepakvijayan's profile deepakvijayan Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Post Thumbnails Keywords: 2nd-opinion has-testing-info
Focuses: Cc:

Description

Steps to reproduce.

Add a new post - set a featured image. Use an SVG as the featured image.
The layout breaks inside InspectorControls

It seems to be because the image tag returns 0 as its naturalWidth/naturalHeight.

Reference for what seems to be the issue with SVG.
https://bugzilla.mozilla.org/show_bug.cgi?id=1607081

Note: This can only be reproduced if, SVG image upload is enabled via functions.php. Since by default, WordPress doesn’t allow SVG upload.

Attachments (1)

Screenshot 2023-05-24 at 4.19.25 PM.png (173.5 KB) - added by deepakvijayan 9 months ago.

Download all attachments as: .zip

Change History (2)

#1 @Ankit K Gupta
9 months ago

  • Keywords 2nd-opinion has-testing-info added

I have been able to reproduce this issue after adding a function to the functions.php file. By default, WordPress does not allow the uploading of SVG images, and only administrators can enable SVG uploads by adding a function to the functions.php file.
Therefore, I am wondering if this is indeed an issue in the core of WordPress and it should be addressed and fixed within the core itself.

https://i.imgur.com/f3aqrEv.jpg

Steps to Reproduce -

  1. Edit the theme's function.php and add below function to add SVG image as Featured Image
    <?php
    function allow_svg_upload_featured_image($mimes) {
        $mimes['svg'] = 'image/svg+xml';
        return $mimes;
    }
    add_filter('upload_mimes', 'allow_svg_upload_featured_image');
    
  1. Log in to your WordPress admin dashboard.
  2. Add a new post and upload SVG image as the featured image
  3. Image will look broken as shown in screenshot.
Note: See TracTickets for help on using tickets.