[Block] File: Embedded PDF fails to render

[cuemarie]

Description

Embedded PDF files fail to render in Safari Version 17.0 when using Gutenberg 16.7.0 and higher. GB 16.6.0 works as expected.

Step-by-step reproduction instructions

1. Site with Gutenberg 16.7.0+ active
2. Add the File Block to a page or post and embed a PDF
3. Enable "Show Inline Embed"
4. Publish the page
5. View the page in a Safari browser

Screenshots, screen recording, code snippet

Comparing GB 16.6.0 and GB 16.8.1 in Firefox (left) and Safari (right)

Screen.Capture.on.2023-10-19.at.11-32-40.mp4

GB 16.6.0

GB 16.7.0 and up

Safari failure to reload

I also find if I leave the page long enough, the page fails to reload, and I have trouble viewing anything in the browser console:

Environment info

• WordPress 6.3.2
• Gutenberg 16.8.1, 16.8.0, 16.7.1, 16.7.0
• Theme in tests: Twenty Twenty-Three
• PDF file I used: https://www.africau.edu/images/default/sample.pdf

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

[apeatling]

Confirmed this to be an issue in trunk with Safari latest. I noticed that the first render of the PDF in the editor works correctly, but if you toggle the inline embed setting it breaks. It did not work in the front end.

[ironprogrammer]

Test Report

I am able to reproduce this issue. Removing Needs Testing. Upgrading from GB 16.6.0 to 16.7.0+ presents this issue.

Also noteworthy: With GB deactivated, WP 6.4-beta/RC and wordpress-develop:trunk also exhibit this issue. Upgrading from WP <= 6.3 to WP 6.4-beta/RC presents this issue on existing posts with File block.

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 13.6
• Browser: Safari 17.0, Google Chrome 118.0.5993.88, Mozilla Firefox 118.0.2
• Server: nginx/1.25.2
• PHP: 8.2.11
• WordPress: 6.5-alpha-56966-src, 6.3.1
• Theme: twentytwentythree v1.2, twentytwentyfour v1.0
• Active Plugins:
  • gutenberg v16.9.0-rc.1, v16.6.0, v16.7.0, v16.8.1

Actual Results

• ✅ PDF is not displayed correctly on frontend with GB 16.7.0+ or trunk. Observed the following permutations of this issue:
  • Page loads with gray box in place of the PDF.
  • Page displays with blank area in place of PDF, and eventually times out with error from issue description.
  • Page does not display anything, and eventually times out with error.

[tomandersen]

Is this happening again? I have this exact problem on Version 17.4.1 Safari desktop, and WordPress 6.5.3. Only on safari desktop, and toggling the PDF "Show inline embed " OFF fixes the problem.

[ironprogrammer]

I've since updated to Safari 17.5 and cannot reproduce the frontend inline embed issue (testing 6.5.3/trunk with GB on/off).

HOWEVER, there is still a rendering issue in the editor after toggling "Show inline embed" off and back on (as noted in #55493 (comment) above). Since the originally reported issue and patch focused on the frontend, I've opened a separate ticket that focuses on the backend behavior, #62120.

[annezazu]

Reopening this as I cannot get a PDF to show a preview in both chrome and safari using WP 6.6.1 and Gutenberg 19.1. I'm using a simple WordPress playground setup and it just shows as an empty frame both in the editor and on the front end:

[ironprogrammer]

Hi, @annezazu 👋🏻 I confirmed that in Playground, the embed isn't showing up as you've reported. This looks like that might be related to WordPress/wordpress-playground#1314, where the iframe with the embed is blocked by Chrome and Safari.

However, for a fresh local install of 6.6.2 w/ and w/o Gutenberg, the PDF does appear for me in the editor and front end:

Should this be closed back up?

[annezazu]

Amazing sleuthing. Foiled again by Playground. Yes, closing!