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.

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 [Feature] Site Editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature is broken.

Comments

@t-hamano
Copy link
Contributor

t-hamano commented Jan 16, 2023 •
edited

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 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

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.

@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.

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
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 [Feature] Site Editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature is broken.
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
2 participants
@youknowriad @t-hamano