• paulm

• in reply to: get_field() is empty in WP_Query inside Gutenberg block
• February 17, 2021 at 11:32 am

I can’t explain, but I am using Sage + ACF Blocks and this helped, thanks @marijan !

• paulm

• in reply to: How to make Custom Block load JS file only in the editor
• 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.

• paulm

• in reply to: How to allow Inner Blocks with ACF in Gutenberg
• April 22, 2020 at 7:01 pm

Same here. I feel like this is a required feature too.