Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get_block_wrapper_attributes missing align class #756

Open
cabrailsford opened this issue Nov 13, 2022 · 5 comments
Open

Get_block_wrapper_attributes missing align class #756

cabrailsford opened this issue Nov 13, 2022 · 5 comments

Comments

@cabrailsford
Copy link

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
Copy link
Collaborator

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
Copy link

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

@CreativeDive
Copy link
Collaborator

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
Copy link

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
Copy link

MadtownLems commented Sep 6, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants