acf_register_block_type styles problem in ACF 5.10.x

• roryashfordbentley

• September 28, 2021 at 1:38 pm

HI’m working on a simple-ish block that allows us to nest blocks within a container block using <InnerBlocks>. To apply different background colors I have passed in a styles array to the acf_register_block_type args and I can see each of the styles in the Block sidebar in the post editor, however to change the colour within the editor you have to select the colour you want first, and then select it another colour. I have this working on another site using ACF 5.9.6 and it works perfectly but something appears to have changed in the latest versions (tested with 5.10.2).

Here is my logic:

function register_my_block ($block, $content = '', $is_preview = false, $post_id = 0) {
    acf_register_block_type([
        'name' => 'content-group',
        'title' => 'Content Group',
        'description' => '',
        'category' => 'formatting',
        'icon' => 'excerpt-view',
        'mode' => 'preview',
        'styles' => [
            [
                'name' => 'pink',
                'label' => 'Pink'
            ], [
                'name' => 'green',
                'label' => 'Green'
            ], [
                'name' => 'navy',
                'label' => 'Navy'
            ], [
                'name' => 'orange',
                'label' => 'Orange'
            ]
        ],
        'supports' => [
            'align' => true,
            'mode' => false,
            'jsx' => true
        ],
        'render_callback' => function ($block) {
            echo '<section class="content-group ' . $block['className'] .'">
                <InnerBlocks />
            </section>';
        }
    ]);
}

So with the above, I can create the block in Gutenberg however all of the Styles previews int he sidebar display the same colour and to select Orange for example I have to select Orange and then select another colour afterwards which will make the block Orange. This only seems to be an issue in the Gutenberg sidebar Styles panel and renders as expected on the frontend.

• rubyaudio

• October 25, 2021 at 11:45 am

Something definitely changed from 5.9 to 5.10. I’ve been looking/waiting for a fix to this for weeks now. I also have a series of simple blocks that were all working fine prior to v5.10.x. I am using $block[‘backgroundColor’] and $block[‘textColor’] to apply the appropriate CSS classes to my blocks. Works fine on the front-end, but in the editor, it doesn’t work at all. Using my dev tools, it looks like everything inside of the “acf-block-preview” div is a click behind the div with a data-type of “acf/your-block-name”:

1. Insert Block
2. Select color-1. CSS class gets applied to wrapping div (with data-type), nothing get applied to div inside “wp-block-preview”.
3. Select color-2. Correct color css class gets applied to wrapping div, but the inner div gets the class for the LAST color you selected applied (color-1).
4. Proceed to bang head on desk

I’ve basically had to resort to writing CSS that forces the wrapper to be transparent (with an !important tag), and then use the class that gets applied to that to style the inner div the way it is supposed to be. Very frustrating. I hope there is a fix soon that hopefully doesn’t break the my hacky solution that I’ve had to use over the last six weeks moving forward. I haven’t even seen this problem reported in the forums, which is very surprising. This thread appears to have been posted about 4 weeks ago and it is marked as “Unread.”