I can't upload webp file into Media Library

[wojtekn]

Quick summary

Users can't upload webp files in Studio. It looks like it doesn't work in https://playground.wordpress.net/, too.

Steps to reproduce

1. Download webp file from https://developers.google.com/speed/webp/gallery1
2. Create a site in Studio and open WP Admin
3. Navigate to Media -> Add New Media File
4. Drag the downloaded file to upload it

What you expected to happen

The file is uploaded.

What actually happened

Error is displauyed

displayed

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

Platform

Mac Silicon

Logs or notes

No response

[sejas]

Currently, there is a workaround to upload webp files:
If a user renames the file from .webp to .jpg, then the file uploads correctly and with the correct extension (webp).

This workaround works in Playground and Studio.

Screencast

Here you can see the error and the workaround:

webp-error-and-workaround.mp4

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Studio - Partially

📌 FINDINGS/SCREENSHOTS/VIDEO

• Uploading directly to the media library - fails ❌
• Dragging into the editor - works ✅
• Uploading through the editor via Image Block - works ✅

CleanShot.2024-05-14.at.12.26.04.mp4

📌 ACTIONS

• Triaged

[derekblank]

Just following up on this one - it seems like WebP support in Studio would be resolved when the changes from WordPress/wordpress-playground#1393 are published (and the @php-wasm/node dependency can be updated in Studio).

@sejas Does that sound correct? Anything else that can be done to help?

[sejas]

Exactly! That's correct! 👌
If you want, you can ask the Playground team to release a new version. If not, I can do it tomorrow morning.
Thanks!

[sejas]

@derekblank , php-wasm/node has been released with v0.7.20 https://www.npmjs.com/package/@php-wasm/node 👍

[sejas]

This has been fixed after updating the playground dependencies: #491
Kudos to @kozer and @jeroenpf ! 🎉

It will be available in the next Studio release.

I tested trunk, and I've been able to upload a webp image: