Support

Account

Home Forums Gutenberg How to make Custom Block load JS file only in the editor Reply To: How to make Custom Block load JS file only in the editor

  • I’ve been working recently with innerblocks within ACF blocks.
    Annoyingly, innerblocks creates additional markup within wp-admin which has been stuffing up my backend previews a bit due to my styling differences between the front and back end.

    I’ve been using JavaScript’s MutationObserver to detect changes to the DOM elements and then change some classes/data attributes around in such a way to make sure my styling aligns between the front and back end correctly (what a headache, but I think I’ve now gotten there).

    In my learning about MutationObserver, much more experienced people than I mentioned some concerns about performance when doing stuff like this, I still don’t know much about this, but for my usage this seems to work fine.

    Firstly I created and enqueued a wp-admin.js file to load within wp-admin which runs the following code snippets.

    I made the observer target the .interface-interface-skeleton__content class wrapping the Gutenberg editor (performance wise, I believe it’s better to have the MutationObserver target a parent closer to where the element will be, rather than going up the DOM making it look at body, for example).

    I am then looking for new block being added which I have assigned a class .flexible-content-layout.

    
    $(document).ready(function () {
    
        var target = document.querySelector('.interface-interface-skeleton__content');
    
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                $(mutation.addedNodes).find('.flexible-content-layout').each(function () {
    
                    console.log('.flexible-content-layout detected');
    
                });
            });
        });
    
        observer.observe(target, {childList: true, subtree: true});
    
    });
    

    Furthermore, here is more detailed code snippet, where I am using another MutationObserver within the first to then detect if changes to the classes have been made.

    
    $(document).ready(function () {
    
        var target = document.querySelector('.interface-interface-skeleton__content');
    
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                $(mutation.addedNodes).find('.flexible-content-layout').each(function () {
    
                  
                    console.log('.flexible-content-layout detected');
    
                    // Detect changes in .content-groups style
                    var observer = new MutationObserver(function (mutations) {
                        mutations.forEach(function (mutation) {
                            if (mutation.attributeName === "class") {
                                var attributeValue = $(mutation.target).prop(mutation.attributeName);
    
                                console.log(".flexible-content-layout classes changed to:", attributeValue);
    
                            }
                        });
                    });
    
                    observer.observe(self[0], {
                        attributes: true
                    });
    
                });
            });
        });
    
        observer.observe(target, {childList: true, subtree: true});
    
    });
    

    I hope that helps you or someone else.