Isotope issues with Wordpress gutenberg API Version 3

[mostafa-abdelbari]

The Isotope Library was working correctly in my Gutenberg block under API version 2. However, after migrating to API version 3, the library's functionality has been affected. This is due to the itemSelector option's limitation to CSS selectors. As API version 3 embeds block content in an iframe, the library cannot accurately identify the target items. The same was for the container element but it had been solved by using a reference for the container as it accepts dom element.

This issue already exists in apiversion 2 but in Tablet and Mobile views as the content will also work inside an iframe.

Code:

const isotope = useRef()
useEffect(() => {
isotope.current = new Isotope('.filter-container', { itemSelector: '.filter-item', layoutMode: 'fitRows', });

// cleanup

return () => isotope.current.destroy() }, [])

Is there a way to solve this issue?

I've tried to select child elements and then pass them as a NodeList or array to itemSelector option but nothing works. Even by using another methods of isotope such as appended, insert, or AddItems.

[thesublimeobject]

@mostafa-abdelbari — this is a bit beyond my knowledge, but from a quick search i found this,

For now there is a built-in option that happens to keep the Post editor from being iframed. That's to turn on custom fields. The setting is under Options > Preferences > Panels > Custom fields.

within this thread.

does this help at all?

[digamber89]

@thesublimeobject the issue seems to be because the library is using global window instead of https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/

"Submit an issue or PR for the library to use ownerDocument and defaultView instead of the globals. Ideally, any library should allow initialisation with an element in an iframe as the target. It’s never impossible. Feel free to contact us to mention the issue."

Which seems to be the bane of the issue - what's happening is the container for Masonry elements are styled - but the items specified by the selector does not work.

[mostafa-abdelbari]

@thesublimeobject the issue seems to be because the library is using global window instead of https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/

"Submit an issue or PR for the library to use ownerDocument and defaultView instead of the globals. Ideally, any library should allow initialisation with an element in an iframe as the target. It’s never impossible. Feel free to contact us to mention the issue."

Which seems to be the bane of the issue - what's happening is the container for Masonry elements are styled - but the items specified by the selector does not work.

That's correct. The primary issue lies with the itemSelector option. Your documentation states that it only accepts CSS selectors, which are inherently limited to the global window context.

Is there anything I can assist with?

[thesublimeobject]

@mostafa-abdelbari — So, what you all are saying makes sense. I do wonder if there are other potential work-arounds, but perhaps this is the only good one. Without looking into it a lot further, I can't be sure.

To be clear, I am not the main library author; I mostly help with issues and occasionally some small fixes, but to get something fixed on this level you would probably have to contact the main author and/or submit a PR request yourself.