Isotope itemSelector issue with API Version 3

The issue arises because Isotope’s itemSelector option, which is limited to CSS selectors, fails to correctly reference the items inside an iframe. Since the container element issue was resolved using a DOM reference, a similar approach can be applied to itemSelector. Here’s how you can address this problem:Solution: Use the iframe’s document to target elements

1. Obtain a reference to the iframe’s document: When working with Gutenberg blocks in API version 3, you can access the iframe’s contentDocument to query the .filter-container and .filter-item elements.
2. Pass DOM references instead of CSS selectors: Modify your itemSelector initialization to work with actual DOM elements retrieved from the iframe’s context.

Here’s how your code can be adjusted:

import { useRef, useEffect } from 'react';
import Isotope from 'isotope-layout';

const MyComponent = () => {
    const isotope = useRef();

    useEffect(() => {
        // Wait for the iframe to load
        const iframe = document.querySelector('iframe[name="editor-canvas"]'); // Update the selector as needed
        if (iframe && iframe.contentDocument) {
            const iframeDocument = iframe.contentDocument;
            const container = iframeDocument.querySelector('.filter-container');
            const items = iframeDocument.querySelectorAll('.filter-item');

            if (container) {
                isotope.current = new Isotope(container, {
                    itemSelector: items,
                    layoutMode: 'fitRows',
                });
            }
        }

        // Cleanup
        return () => {
            if (isotope.current) {
                isotope.current.destroy();
            }
        };
    }, []);

    return null; // Your component's JSX here
};

Key Points in the Solution

1. Iframe Selection: Use document.querySelector to target the iframe hosting the Gutenberg block content. The name attribute of the iframe might vary depending on your setup (e.g., editor-canvas or similar).
2. Accessing the DOM: Retrieve elements from the iframe’s contentDocument. This ensures Isotope is aware of the elements within the iframe.
3. DOM Element References: Pass the container and itemSelector as DOM elements rather than relying on CSS selectors.

Notes

• Performance: Ensure the iframe has finished loading before trying to access its content. You may need to handle iframe load events for dynamic initialization.
• Error Handling: Safeguard against scenarios where the iframe or expected elements are unavailable.
• Cross-Browser Testing: Verify that this approach works across all target browsers, as iframe handling can sometimes vary.

By directly passing DOM elements from the iframe context, you should be able to restore the Isotope functionality under Gutenberg API version 3, even when content is embedded in an iframe.