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.
