innerblock with custom grid blocks

• fruchtfliege82

• February 9, 2023 at 9:03 am

Hi, since the innerblock function has been introduced, I try to build something like a grid system based on a row block and separate column block with innerblock functionality. The two blocks are working fine, but I got stuck while trying to set the column width classes based on an ACF select field. Outside the innerblock the classes are set correctly, but within the innerblock there are too many wrappers, as already mentioned in a dozen posts.

With this knowledge, I tried to “transport” the select value to the outer wrapper of the selected block ID with javascript:

jQuery(document).ready(function ($) {

    var instance = new acf.Model({
        events: {
            'change select': 'onChange',
        },
        onChange: function(e, $el){
            e.preventDefault();
            var val = $el.val();
            $('.is-selected').addClass(val)
        },
    });
});

This works as long the block is selected, but after leaving the selected block, the class gets removed (by react?). After that, I tried another approach by populating the native additional class input with the dropdown value, which only works for a second: It immediately gets removed (I guess again by any react stuff).

Long story short: I need to set the value of ACF select, which contains the column width classes as class for the outer innerblock wrapper. How can I pass ACF select value to the CURRENT block permanently?

I tried some other stuff which permanently saves an additional class by WP hook filter, but this class got assigned to all acf/column blocks:

function setBlockCustomClassName( className, blockName ) {
    var val = (val = acf.getFields({name:'my_field_name'}).shift()) ? val.val() : '';
    return blockName === 'acf/column' ? column : className;
}

// Adding the filter
wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'my-plugin/set-block-custom-class-name',
    setBlockCustomClassName
);

Thank you in advance!