Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Site Editor: Blocks can be manipulated in browse mode #47190

Closed
t-hamano opened this issue Jan 16, 2023 · 6 comments · Fixed by #47398
Closed

Site Editor: Blocks can be manipulated in browse mode #47190

t-hamano opened this issue Jan 16, 2023 · 6 comments · Fixed by #47398
Assignees
@t-hamano
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Bug An existing feature does not function as intended

Comments

@t-hamano
Copy link
Contributor

t-hamano commented Jan 16, 2023 •
edited
Loading

Description

In the FireFox browser, even if the site editor is in browse mode, it is possible to manipulate blocks unintentionally.
We can change text, insert blocks, delete blocks, etc.

Screenshots, screen recording, code snippet

c74b3a07c451e6bb9b519ffd2ad3d27b.mp4
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jan 16, 2023
@t-hamano t-hamano mentioned this issue Jan 16, 2023
Merged
@t-hamano
Copy link
Contributor Author

My guess is that in FireFox, the inert attribute that disables the operation doesn't appear to be functioning properly. The reason may be that the inert-polyfill.js is not loaded into the iframe instance.

@youknowriad
Copy link
Contributor

Yeah weird, I'm pretty sure I tested firefox when I originally added the "inert" attribute but maybe some things changed.

@t-hamano
Copy link
Contributor Author

t-hamano commented Jan 17, 2023 •
edited
Loading

Somehow, when the inert attribute is added to an element in the iframe, it doesn't seem to work correctly in Firefox.

In the browse mode of the site editor, the problem can be solved by making the following changes:

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index f9d7b96297..ffff183509 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -251,6 +251,7 @@ function Iframe( {
                                // content.
                                srcDoc={ srcDoc }
                                title={ __( 'Editor canvas' ) }
+                               inert={ readonly ? 'true' : undefined }
                        >
                                { iframeDocument &&
                                        createPortal(
@@ -284,7 +285,6 @@ function Iframe( {
                                                                        marginTop: frameSize,
                                                                        transform: `scale( ${ scale } )`,
                                                                } }
-                                                               inert={ readonly ? 'true' : undefined }
                                                        >
                                                                { contentResizeListener }
                                                                <StyleProvider document={ iframeDocument }>

However, there are cases, such as the table of contents block in edit mode, where you want to disable only certain elements within an iframe. So we may need to investigate the root cause.

@youknowriad
Copy link
Contributor

I guess you're maybe right that it comes down to loading the polyfill inside the iframe in this case. The reason I moved the attribute inside is because of the "scrolling". In other words, we should still be able to scroll the template even if disabled. That may be impacted by this PR though #47004 which may allow us to move the inert back outside the iframe.

@ndiego ndiego moved this to ❓ Triage in WordPress 6.2 Editor Tasks Jan 19, 2023
@t-hamano
Copy link
Contributor Author

From what I have been able to find out, it appears that the inert polyfill doesnot take into account the elements inside the iframe.
We might need to add a polyfill script inside the iframe.

index.html

<!DOCTYPE html>
<html>
<body>

<!-- This Polyfill does not appear to be applied within an iframe in FireFox. -->
<script src="https://unpkg.com/wicg-inert"></script>

<iframe src="frame.html"></iframe>
</body>
</html>

frame.html

<!DOCTYPE html>
<html>
<body inert>

<!-- Need to inject polyfill in iframe -->
<script src="https://unpkg.com/wicg-inert"></script>

<input type="text">
</body>
</html>

@youknowriad
Copy link
Contributor

yes, that sounds like a decent approach.

@ndiego ndiego moved this to ❓ Triage in WordPress 6.2 Editor Tasks Jan 24, 2023
This was referenced Jan 24, 2023
Closed
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 25, 2023
@github-project-automation github-project-automation bot moved this from ❓ Triage to 🔎 Needs Review in WordPress 6.2 Editor Tasks Jan 25, 2023
@ntsekouras ntsekouras moved this from 🔎 Needs Review to ✅ Done in WordPress 6.2 Editor Tasks Jan 25, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t-hamano t-hamano

Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Bug An existing feature does not function as intended
Projects
No open projects
WordPress 6.2 Editor Tasks
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Block Editor: Add inert polyfill to iframe WordPress/gutenberg
3 participants
@youknowriad @priethor @t-hamano