Inconsistency with block support classes in ACF blocks

[CreativeDive]

Hey @lgladdy,

currently I'm running some tests to work without the additional block wrapper div so that the frontend result is even more possible in the editor view.

This could be solved if we only use the ACF block wrapper TEMPLATE div for the frontend and prevent the output of this div in the block editor. While working on this, I noticed some inconsistencies with how ACF adds block classes.

Using the block align like "wide" or "full" adds a class name "alignwide" and "alignfull" to the "block-editor-block-list__block" div.

However, this does not work in the case of block alignContent and alignText. If an option is set, class names like has-text-align-left will not be output to the block-editor-block-list__block div. There seems to be an inconsistency here.

Why it's working correct for align but not for alignContent and alignText? It's possible to fix this for us?

[lgladdy]

alignContent and alignText aren't native WordPress attributes; they're custom things provided by ACF.

We can take a look if we have any options to hook into that functions that build those wrappers, but that's why it's not working at least!

[warudin]

Would be great if ACF would hook into get_block_wrapper_attributes() to implement classes for the added attributes.

[CreativeDive]

There is a filter we can use to affect the class names themselves. I find the solution sufficient. I'm not sure now if ACF should automatically add other attributes like alignContent and alignText because so far the user could choose how the class names are printed.

var {
    createHigherOrderComponent,
} = wp.compose;

var {
    createElement,
} = wp.element;

var el = createElement;

/*
* BlockListBlock filter modifications
*/

var blockListBlockFilter = createHigherOrderComponent( function ( BlockListBlock ) {
    
    return function( props ) {
        
        const blockName = props.block.name ? props.block.name : null;
        const blockAlign = props.attributes.align ? props.attributes.align : null;
        const originalListBlock = el( BlockListBlock, props );
        
        // We modify this for our acf blocks only
        if( ! blockName || ! blockName.includes('acf/') ) {
            // Return unmodified block wrapper
            return originalListBlock;
        }
        
        if( ! blockAlign ) {
            // Return unmodified block wrapper
            return originalListBlock;
        }
        
        // Set the block align class name to the ACF block wrapper
        var newProps = {
            ...props,
            className: 'align' + props.attributes.align,
        };
        
        return el( BlockListBlock, newProps );
        
    };
    
}, 'blockListBlockFilter' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/blockListBlockFilter', blockListBlockFilter );