Astra theme customise tab is not loading

[maryc1632]

I used the following URL: https://translate.wordpress.org/projects/wp-themes/astra/pl/default/playground/

[adamziel]

Definitely a bug, thank you for reporting @maryc1632!

I poked around and here's what I found:

• The first time the customizer is loaded, the request times out and the entire Playground iframe shows the gray page with a sad face.
  • When I go to https://playground.wordpress.net/?theme=astra&language=pl_PL, the customizer loads, but the Astra theme is not translated to Polish.
    • Problem 1: Requesting the translations returns 404: https://downloads.wordpress.org/translation/theme/astra/4.8.7/pl_PL.zip
    • Problem 2: CORS error Access to fetch at 'https://downloads.wordpress.org/translation/theme/astra/4.8.7/pl_PL.zip' from origin 'https://playground.wordpress.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  • @akirk would you be up for debugging the translations setup locally? I'm interested in visiting the customizer with the Astra theme with and without the .mo translations. I wonder if it's another part of the Blueprint that causes the slowdown, e.g. something in Local Glotpress.
• The second time the customizer is loaded it's slow but actually loads, but then the website iframe won't load. This is likely related to the Devtools talks about a CSP error.
  • Refused to frame 'https://playground.wordpress.net/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
  • Interestingly, the mentioned frame-ancestors flag is server as a response header by https://playground.wordpress.net/scope:0.2251249291638462/?customize_changeset_uuid=9862540b-edaa-413a-adf6-cb283d65c012&customize_theme=astra&customize_messenger_channel=preview-0
  • The CSP flag is also present in the same request on https://playground.wordpress.net/?theme=astra&language=pl_PL and https://playground.wordpress.net/?theme=twentynineteen which tells me it's a WordPress core thing.
  • This is a problem for embedding Playground in general. We could filter that CSP value out in the service worker in Playground web. @brandonpayton can you see any downsides?

[akirk]

would you be up for debugging the translations setup locally? I'm interested in visiting the customizer with the Astra theme with and without the .mo translations. I wonder if it's another part of the Blueprint that causes the slowdown, e.g. something in Local Glotpress.

It 404s because there is no Polish language pack because of a low translation percentage (42%). Not sure if it's worth CORS-enabling 404 pages on downloads.wordpress.org.

[akirk]

Oh, I first didn't realize it was about Translate Live. This actually additionally loads translations without language pack, which does work for me. For me in Firefox it works decently, although the iFrame also doesn't load which might be a WordPress Core limitation to not allow iframed iframes.

The "meat" for the translation is in the Customizer sidebar which does load fine for me:

[adamziel]

Would you say there's a next step for Playground here @akirk ?

[akirk]

It would be great if @maryc1632 could have another look. I am not sure if we can get the IFrame to load (it says "blocked:other") but the sidebar works as intended

Since the main functionality in Translate Live works (you can right click and translate), I'd be ok with just closing it as is.