elem instanceof HTMLDivElement fails in iframe editor

[andreaslindahl]

Description

I'm using https://masonry.desandro.com in some of my blocks, both on frontend and in the editor. Trying out the new iframed editor in Wordpress 6.3, I noticed that Masonry in the editor isn't working anymore - no items are added to the masonry and the layout fails.

Turns out that this line hidden in the Masonry code is the reason:

if ( !( elem instanceof HTMLDivElement ) ) {
      return;
}

For some reason, elem instanceof HTMLDivElement always fails when this code is loaded in the iframed editor. Now, if I check the type of elem it indeed is HTMLDivElement. I'm guessing this is some kind of scoping issue, i.e. that the HTMLDivElement type of the iframe is not equal to the type of the HTMLDivElement in the parent document?

Is there a fix for this in Wordpress/Gutenberg, apart from hoping the Masonry will update their code?

Step-by-step reproduction instructions

Run editor javascript code that checks if an html element is an instance of HTMLDivElement

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[ellatrix]

Are you enqueuing Masonry outside or inside the iframe? In this particular case, you should enqueue it inside the iframe because it's a script that should run both in the editor and front-end. We actually used Masonry in an e2e test:

gutenberg/packages/e2e-tests/plugins/iframed-masonry-block/editor.js

Lines 33 to 57 in c7ff22a

	registerBlockType( 'test/iframed-masonry-block', {
	apiVersion: 3,
	edit: function Edit() {
	const ref = useRefEffect( ( node ) => {
	const { ownerDocument } = node;
	const { defaultView } = ownerDocument;
	if ( ! defaultView.Masonry ) {
	return;
	}
	const masonry = new defaultView.Masonry( node, {
	itemSelector: '.grid-item',
	} );
	return () => {
	masonry.destroy();
	};
	} );
	return el( 'div', useBlockProps( { ref } ), ...content );
	},
	save: function Save() {
	return el( 'div', useBlockProps.save(), ...content );
	},
	} );

[andreaslindahl]

I'm importing it in my edit.js file:

import Masonry from 'masonry-layout';

[nielsjensen]

I am having the same issue. I wanted to use keen-slider in my edit function, which also checks for elem instanceof HTMLElement. I agree that this is should be a scoping issue.

import { useEffect, useRef } from '@wordpress/element';

export default function Edit() {
	const myRef = useRef();

	useEffect( () => {
		if ( myRef.current ) {
			console.log( myRef.current.constructor.name ); // => HTMLDivElement
			console.log( myRef.current instanceof HTMLDivElement ); // => false

			const refDocumnent = myRef.current.ownerDocument;
			const refDocumnentParent = refDocumnent.defaultView.parent.document;
			console.log( refDocumnent === window.document ); // => false
			console.log( refDocumnentParent === window.document ); // => true
		}
	}, [ ] );

	return <div ref={ myRef }>Test</div>;
}

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[ellatrix]

If you want to use instanceOf HTMLElement, it's always better to check the context you're in:

element instanceOf element.ownerDocument.defaultView.HTMLDivElement

In the case of Masonry it's better to load it in the iframe instead of the editor frame, because it's a front-end script. #53867 (comment)

[mrleemon]

Has anyone managed to make Masonry work in the iFrame editor using the code posted by @ellatrix? In my case, it's not loaded at all.

[mrleemon]

In case anyone is having problems with this, you need to add the Masonry lib to the script prop (instead of the editorScript prop) in block.json. Otherwise it gets loaded outside the iframe. This might be a bug on Gutenberg's side because it makes no sense.