Skip to content

Blockeditor iFraming problems when switching Preview #52648

@pg-greyd

Description

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

gutenberg-16-bugreport-02.jpg
gutenberg-16-bugreport-02

gutenberg-16-bugreport-03.jpg
gutenberg-16-bugreport-03

gutenberg-16-bugreport-04.jpg
gutenberg-16-bugreport-04

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature does not function as intended[Type] RegressionRelated to a regression in the latest release

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions