search

WordPress / wordpress-playground

Run WordPress in the browser via WebAssembly PHP
https://w.org/playground/
GNU General Public License v2.0
1.6k stars 235 forks source link

Playground embeds WordPress site within iframe without including the allow-top-navigation HTML attribute #1383

Open miriamelementor opened 3 months ago

miriamelementor commented 3 months ago

Elementor's "puzzle piece" is looking good, but there's a technical issue towards the end of the user onboarding process. It appears to be related to the playground embedding the WordPress site within an iframe without including the allow-top-navigation HTML attribute. This attribute, when set to true, allows the embedded content to change the URL of the parent window, but if missing or set to false, it restricts this navigation for security reasons. Unfortunately, we lack control over the HTML attributes of the playground iframe.

Is there someway this behavior can be changed?

Thanks!

bgrgicak commented 3 months ago

I tested this with allow-top-navigation but it didn't resolve the problem. When I fully removed sandbox attributes clicks started working, but this isn't an option for us. It also ended up on an error page (see screenshot).

Screenshot from 2024-05-14 11-46-48

bgrgicak commented 3 months ago

@miriamelementor in case we can't resolve this before WCEU, we could disable the onboarding flow and open a different page. In general I think that it would be a good idea to disable it for the puzzle app because it takes over the admin UI which hides the fact that multiple pieces were scanned.

adamziel commented 3 months ago

@miriamelementor there's multiple places in WordPress where a link or a form uses target="top". One of the intentions behind the current set of iframe attributes is to protect the user from reloading the website as that would destroy the running Playground – it lives only as long as the top-level page. Could Elementor onboarding be adjusted to avoid taking over the top level page?

bgrgicak commented 3 months ago

Great catch @adamziel I missed this.

miriamelementor commented 2 months ago

@adamziel @bgrgicak Our team has resolved this issue, and can release it to Elementor's beta version (v3.22.0 beta 5) on June 3. Can Playground pull from a beta version? If not, GA is scheduled for June 9 which may be ok, it's just really close to WCEU so if there are issues we may not have time to resolve them.

bgrgicak commented 2 months ago

Thank you for fixing this @miriamelementor!

Can Playground pull from a beta version?

We can install the plugin from any URL. Could you provide us with a URL to that ZIP?

Also related to WCEU, we need to disable the onboarding flow so that Elementor players nicely with other puzzle pieces. Would you be able to provide us with a PHP snippet that can disable the onboarding flow?

miriamelementor commented 2 months ago

@bgrgicak I'm sharing what our dev team shared with me:

The PHP snippet direction didn't work, so it seems we must create a custom build for the playground. When do we need to send it by?

Should the zip of the custom build plugin be hosted on our end, or somewhere else?

davseve commented 2 months ago

@bgrgicak, assuming we'll need to send you a URL to a ZIP file. What is the best location for us to upload the ZIP file? Would Google Drive work?

bgrgicak commented 2 months ago

What is the best location for us to upload the ZIP file? Would Google Drive work?

It must be hosted on a server where any browser can download it. You will also need to make sure that the server has CORS enabled.

bgrgicak commented 2 months ago

The PHP snippet direction didn't work, so it seems we must create a custom build for the playground. When do we need to send it by?

I'm available on the 10th and 11th to make changes to the blueprint. Also, feel free to open PRs with changes to the blueprint file I'm happy to review and merge them.

davseve commented 2 months ago

@bgrgicak I am from Elementor :) I want to know where can I store the plugin Zip file in case we will provide URL address.

bgrgicak commented 2 months ago

I want to know where can I store the plugin Zip file in case we will provide URL address.

We don't have dedicated storage for Playground. You will either need to store it on your servers, or push a new version to WordPress.org.

Feel free to DM me on the Making WordPress Slack if that would help.

miriamelementor commented 2 months ago

@bgrgicak unfortunately we can't get our plugin to work in the iframe being used for this.

bgrgicak commented 2 months ago

@bgrgicak unfortunately we can't get our plugin to work in the iframe being used for this.

Is this a Playground issue that I could help you debug?

The onboarding flow won't be an issue for WCEU. I disabled it in the puzzle app.