[Editor preview]: Use unmapped hostname for the preview

[ramonjd]

Changes proposed in this Pull Request

This PR is a test to see whether using the unmapped site urls for the preview window iframe urls will prevent re-occurring 404s. See: p58i-89x-p2

Safari, it is reported, suffers from the 404 preview bug the most.

Naughty Safari!

Testing instructions

1. In Calypso, and using a custom domain (*.blog or *.com or something), create a new post over at /block-editor/post/YOUR_SWEET_SWEET_CUSTOM_SITE
2. Type some stuff and preview immediately
3. Do you get a 404?

Fixes #30145 (I hope)

[matticbot]

Test live: https://calypso.live/?branch=try/use-unmapped-blog-url-in-editor-preview

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~50 bytes added 📈 [gzipped])

name              parsed_size           gzip_size
gutenberg-editor       +120 B  (+0.0%)      +50 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[andrewserong]

Just had a quick look with a private site in Chrome where I ran into the issue with previewing, and I can't replicate the issue on this PR. I'm not quite sure how to test on Safari though because I'm blocked by not being able to log in on calypso.localhost:3000 or calypso.live. Also did a quick test to make sure that the preview on a Jetpack site is still working as expected, and didn't run into any issues.

[ramonjd]

because I'm blocked by not being able to log in on calypso.localhost:3000 or calypso.live.

Thanks @andrewserong

Testing in Safari locally is becoming a real pain. I hope it will be addressed by the ITP squad. There are some interesting ideas over at p58i-8wz-p2#comment-44673

[noahtallen]

I hope it will be addressed by the ITP squad

Do we have one now? Seems like there weren't many volunteers on the original post.

[ramonjd]

Do we have one now? Seems like there weren't many volunteers on the original post.

Good question. The comments aren't exactly active as I expected them to be.

I've been (mostly unsuccessfully) experimenting with document.requestStorageAccess in the proxy iframe's index file, but I feel like I'm just throwing sand around a sandless pit, and all the kids have taken their toys home already.

[sirreal]

In my testing, this seems to be an improvement 👍

Tested with a private site in Safari with production and calypso.live (this branch).

I also attempted to test an Atomic site, but I couldn't get visit block-editor in Calypso for the Atomic site, I was redirected to WP Admin (plugins page 😕). I'm not sure if this is true of all atomic sites, but the unmapped URL will not be a wordpress.com URL in those cases.

[ramonjd]

Tested with a private site in Safari with production and calypso.live (this branch).

Thanks for testing @sirreal !!!

You got further than I did with Safari, hence the reason behind the feature flag. I was going to try out Atomic et. al., on wpcalypso since Safari was giving me so much grief.

[ramonjd]

since Safari was giving me so much grief.

Forgot to login to WordPress.com first, then test on calypso.live 😊

I also attempted to test an Atomic site

This PR only affects WordPress.com.

I created an Atomic site, and creating a draft post + preview worked only. I was only testing via https://hash-9578bc560b5b8723624e02c8ffcf5334f742431f.calypso.live/block-editor/post/SITE_SLUG/SITE_ID however

[lancewillett]

Testing in Safari desktop version 13.0.5 on macOS Catalina.

Using a mapped domain on a WordPress.com Simple site:

First, in production:

1. Create a new post, save, and click "Preview" button in block editor
2. The page flashes an overlay quickly, but it disappears with no warning
3. JS console shows an error like this:

[Error] Refused to display '[YOUR_SWEET_SWEET_CUSTOM_SITE/?p=767&preview=true&frame-nonce=1234&iframe=true&calypso_token=1234' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Next, on the live branch from this pull request:

1. Create a new post, save, and click "Preview" button in block editor
2. The preview overlay launches successfully 🎉

I do see a JS console error, but it doesn't seem to block the preview action.

[Error] Preflight response is not successful
[Error] XMLHttpRequest cannot load http://YOUR_SWEET_SWEET_CUSTOM_SITE/?get-xpost-data due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (YOUR_SWEET_SWEET_CUSTOM_SITE, line 0)

Extra note — this WordPress.com Simple site is also marked "Private" in "Settings > Privacy."

[michaeldcain]

:vegemite:

[lancewillett]

🚢