Support

Account

Home Forums Gutenberg acf_register_block_type styles problem in ACF 5.10.x

Unread

acf_register_block_type styles problem in ACF 5.10.x

  • 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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.