Get_block_wrapper_attributes missing align class

[cabrailsford]

This may be similar to #739, but when creating a simple ACF block test using the get_block_wrapper_attributes function in my render file, it outputs the top level class for my block name (.wp-block-cab-test), but doesn't output the wide alignment class that I've set on the block by default. It shows wide on the backend, but when I change it to alignnone, on the frontend it now outputs an extra class of just align.

Doing the same test in a custom (non-ACF) WP block outputs the align class correctly, so I wanted to see if I was missing something here or merely _doing_it_wrong.

Here's a simplified test block for reference.

[CreativeDive]

There is this filter with which we can determine the output of the class names ourselves.

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 );

[vibrains]

I'm running into the same issue but with the textAlign support. Have you found a solution yet?

[CreativeDive]

The only way ACF could go is to provide a filter where the user can specify the class names themselves. There is no guideline as to what the class names should be. The user can influence this. I mentioned above one way how we could do that.

In the PHP template, the user can already independently influence the output of the classes. If you also output these classes to the surrounding wrapper, the classes are then also available twice.

[tresorama]

Same problem! Giving a fast look while debuggingget_block_wrapper_attributes it seems that the problem is because when "get_block_wrapper_attributes" runs, the block attributes array don't contains them.

Because native block attributes are missing, the get_block_wrapper_attributes function correctly doesn't apply align classes.

A solution would be to include "native" attributes to block. If possibile

[MadtownLems]

I'm running into the same issue but with the textAlign support. Have you found a solution yet?

While it surely isn't intuitive, textAlign isn't actually supposed to be here because it isn't part of the core block supports: https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-supports.md

If you look at some of the core blocks that support textAlign, you can see how this is handled. For example, in post-title.php:

`$classes = array();

if ( isset( $attributes['textAlign'] ) ) {

    $classes[] = 'has-text-align-' . $attributes['textAlign'];

}

if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {

    $classes[] = 'has-link-color';

}

$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );`