Support

Account

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

Solving

How to make Custom Block load JS file only in the editor

    • city17

    • September 8, 2019 at 12:48 am

    Hi, I’m working a custom block where I want to have separate files Script files for the front-end and editor.

    I found that when making a completely custom block you can use the 'enqueue_block_editor_assets‘ hook, but I’m not sure how to apply this to ACF’s way of creating custom blocks.

    It seems like with ACF only enqueue script and enqueue style are supported, which always load the same file for the editor and the front-end.

    Is there a way to make this (or some other method) work with ACF custom blocks?

  • @city17 – Did you by any chance get any further with this?

    • city17

    • November 26, 2019 at 5:35 am

    I didn’t find a proper solution, but I found a way around it on Stackexchange: See the answer here: https://wordpress.stackexchange.com/questions/331774/load-script-after-block-is-inserted?rq=1 (basically onload event on an empty image….strange, but it works).

  • Ah… interesting + strange indeed! Will check it out. Thanks for your swift reply 🙂

    • paulm

    • November 16, 2020 at 11:23 am

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.