File Block: PDF preview not working on mobile devices iOS and Android

[sejas]

Description

Embedding a PDF file using the core/file block is not rendering an interactive preview on mobile devices.

Expected behavior

The PDF should be displayed as an embed with the ability to scroll through multi-page files, as it does on desktop. Alternatively, the whole preview could be hidden for mobile, displaying only the buttons to preview and download.

Actual behavior The PDF only displays the first page using a distorted image, without the option to scroll through the rest of the pages. Additionally, the content is displayed against the site's background, ignoring the PDF's original background, making it hard to identify it as a "preview".

Possible solutions

• iframe seems to render the pdf preview, but the UX is not the best.
• hide the preview if the device it's not supported, or the browser agent is a mobile device.
• Add an extra option to the file block to hide the preview for mobile devices. This is the best solution from my point of view.

Other notes

• https://github.com/WordPress/gutenberg/pull/24233#issuecomment-665493901
• Commit that hides the PDF preview for certain user agents: https://github.com/WordPress/gutenberg/commit/1c40e28cfb31116b2c795dab7914012b1b69b1b9
• Apple Forum: https://developer.apple.com/forums/thread/649982

Step-by-step reproduction instructions

1. Embed a PDF file on a post or page using the core/file block.
2. Open the page/post on an iOS or Android device.
3. Observe the PDF preview is not working, resulting in a bad UX.

Screenshots, screen recording, code snippet

iOS	Android

iOS with pink background

Environment info

• WP 6.1.1, Gutenberg 14.6.1
• Safari, Chrome
• iPhone 13 iOS 16.1, Android Galaxy S22

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[danielbachhuber]

hide the preview if the device it's not supported, or the browser agent is a mobile device.

We could potentially hide the preview and show a direct link to the file instead?

[sejas]

We could potentially hide the preview and show a direct link to the file instead?

The file component already has buttons to download the file. Hiding the preview would be enough.

[Thelmachido]

I am able to preview PDF files on my IOS, I am not sure if this is still relevant can you please check @sejas and @danielbachhuber

[sejas]

@Thelmachido , only the first page of the PDF is visible, appearing like a stretched "screenshot". It doesn't offer a multipage preview, unlike the desktop version which allows users to view the entire embedded PDF. Additionally, there are issues with the background, making it challenging to discern the PDF's boundaries. Both the filename/sample and Download buttons have identical functionality. They both link to the PDF, which subsequently opens in the same tab.

I could reproduce this behavior today.

I understand that this is the natural iOS behavior, but we can improve it by adding borders and a white background. And probably removing one button or allowing the Download button to actually download the PDF.

[michael-sumner]

The browserSupportsPdfs util function must be refactored to use the HTML Standard navigator.pdfViewerEnabled instead.

[!NOTE] This method replaces a number of legacy methods of inferring support for inline viewing of PDF files.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/pdfViewerEnabled

That way, we can avoid relying on User Agents, and allow modern browsers to dictate the display of the PDF viewer.