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
Site Editor: Blocks can be manipulated in browse mode #47190
Comments
My guess is that in FireFox, the |
Yeah weird, I'm pretty sure I tested firefox when I originally added the "inert" attribute but maybe some things changed. |
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. |
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. |
From what I have been able to find out, it appears that the inert polyfill doesnot take into account the elements inside the iframe.
<!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>
<!DOCTYPE html>
<html>
<body inert>
<!-- Need to inject polyfill in iframe -->
<script src="https://unpkg.com/wicg-inert"></script>
<input type="text">
</body>
</html> |
yes, that sounds like a decent approach. |
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
The text was updated successfully, but these errors were encountered: