Blockeditor iFraming problems when switching Preview

[pg-greyd]

Description

There seem to be some problems when switching the Blockeditor Preview which result from the new iFraming functions introduced in #50091 and #48286 .

When using WP 6.2.2 with Gutenberg 16.1.1 and original Twenty Twenty-Three Theme, everything works as expected. The Blockeditor is fully iFramed and no console warnings are shown.

According to #48286 the fully iFramed Editor is used when "all blocks are v3". However, by adding a single add_meta_boxes action (see snippet), the Editor is back its old behaviour with Tablet and Mobile previews in iFrames and Desktop without. From that point on, switching the preview to Tablet or Mobile shows console warnings from #50091 even with the Twenty Twenty-Three Theme (see gutenberg-16-bugreport-03.jpg). The actual problem occurs when switching back to Desktop while a block is selected. In that case, a fatal javascript error is thrown and the block is broken with the message "This block has encountered an error and cannot be previewed." (see gutenberg-16-bugreport-04.jpg).

Firefox prints a bit more info in the console:
e.ownerDocument.defaultView is null in wp/packages/block-editor/build-module/hooks/@wordpress/block-editor/src/hooks/padding.js:14.
As far a I understand, this happens because while switching the preview, the iFrame is destroyed to be replaced by the non-iFramed Desktop preview.

A secondary bug I noticed when making the screenshots:
In Tablet and Mobile preview, the Toolbar is missing.

Step-by-step reproduction instructions

• Add snippet to theme or custom plugin functions.php
• Open example page (gutenberg-16-bugreport-01.jpg)
• Select a paragraph block (gutenberg-16-bugreport-02.jpg)
• Switch to "Tablet" preview (gutenberg-16-bugreport-03.jpg)
  • Notice console warnings
  • Toolbar is missing
• Switch back to "Desktop" preview (gutenberg-16-bugreport-04.jpg)
  • console error e.ownerDocument.defaultView is null
  • Selected block is broken

Screenshots, screen recording, code snippet

snippet

add_action( 'add_meta_boxes', function() {
	add_meta_box(
		'custom_meta_box',
		__('Test', 'core'),
		function() { /* empty */ },
		null,
		'side'
	);
} );

gutenberg-16-bugreport-01.jpg

gutenberg-16-bugreport-02.jpg

gutenberg-16-bugreport-03.jpg

gutenberg-16-bugreport-04.jpg

Environment info

• WP 6.2.2
• Gutenberg 16.1.1
• Twenty Twenty-Three
• Chrome, Firefox Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[swissspidy]

cc @ellatrix

[ndiego]

I am not able to replicate the block crashing, but I do see a ton of console warning when a metabox is present. I tested using Yoast.

It is expected that that Editor is not iframed when a metabox is present, but I do not know why all of the console warnings are displaying. 🤔

[tellthemachines]

The block error was fixed in #52588 and there's #52640 in progress to fix the warnings.

[ndiego]

The block error was fixed in #52588 and there's #52640 in progress to fix the warnings.

Thanks for the update @tellthemachines. I just linked this to #52640

[ramonjd]

I can confirm that #52640 removes those warnings when following the steps in this issue

[pg-greyd]

Thanks for your help! :)
I have a question though:

It is expected that that Editor is not iframed when a metabox is present

Why is this expected behaviour?
A metabox has nothing to do with the block api - I don't understand.

[pg-greyd]

I just tested the Build from #52640 and can confirm that the error and warnings are fixed.

One bug is still there though:

In Tablet and Mobile preview, the Toolbar is missing.

[bph]

One bug is still there though:

In Tablet and Mobile preview, the Toolbar is missing.

Howdy, @pg-greyd I wasn't able to reproduce the missing toolbar in a WP 6.3 Beta 4 + Gutenberg Nightly from today. (v-16.4.20230717)

Would you mind double-checking on that as well? It doesn't seem to be related to this issue, but we also want to not have it fall through the cracks.

[pg-greyd]

Yes, I still have the toolbar issue with WP 6.3 Beta 4 + Gutenberg Nightly.
In my tests the Tablet and Mobile previews of the Post Editor behave like this:

• when the option "Top toolbar" is not selected, the toolbar is completely hidden behind the "Editor top bar"
• when "Top toolbar" is selected and "Fullscreen mode" is not, the toolbar is visible, but weiredly overlaying the "Editor top bar", in fact overlaping the preview controls.
• when both "Top toolbar" and "Fullscreen mode" are selected, the toolbar is usable, but still strangely integrated into the "Editor top bar".
• when "Distraction free" is actived, you can see the overlapping of the the elements while transitioning by hovering.
• when you scale the browser to less than 782px (mobile/tablet size), the toolbar is back to its original position below the "Editor to bar" and usable again.

Seems to be related to #50378

[ndiego]

Thanks for the follow up @pg-greyd, I have added a separate issue for this here: #52688