ACF Blocks not Rendering Correctly in Editor

• chandlerwarren

• June 17, 2022 at 1:23 pm

I have a number of custom blocks made with ACF’s acf_register_block_type() that are no longer displaying correctly in editor views (page/post/theme, etc). When using Preview and editing the fields in the sidebar, styling is correct. But when I change to the editor view, all styling is stripped away. It also seems like values entered into ACF fields in Edit mode do not persist, and I need to enter them while in Preview mode for them to actually be entered. Ideally I’d like to turn Preview mode off, so I had ‘mode’ set to ‘Edit’ during registration, with the ‘mode’ Supports option set to false. I’ve tried different permutations of changing these settings and nothing seems to fix it. Here’s my registration function for this specific block in case that helps.

add_action('acf/init', 'accordion_block_type_register');
function accordion_block_type_register()
{

    // Check function exists.
    if (function_exists('acf_register_block_type')) {

        acf_register_block_type(array(
            'name'              => 'accordion',
            'title'             => __('UC Accordion'),
            'description'       => __('Create an accordion block with informational panels inside '),
            'category'          => 'formatting',
            'render_template'   => 'template-parts/blocks/accordion/accordion-render.php',
            'icon'              => '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
            <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
          </svg>',
            'mode'              => 'edit',
            'keywords'          => array('accordion'),
            'enqueue_assets'    => function () {
                wp_enqueue_style('uc-accordion-style', get_template_directory_uri() . '/template-parts/blocks/accordion/uc-accordion.css');
                wp_enqueue_script('accordion-script', get_template_directory_uri() . '/template-parts/blocks/accordion/uc-accordions.js', array('jquery'), '', true);
            },
            'supports'          => array(
                'mode'          => true,
                'align'         => false
            )
        ));
    }
}

I’ve attached screenshots of each view as well. I am using WordPress 6.0 without Gutenberg plugin installed. These were all working normally earlier this week so I’m wondering if it’s related to the WordPress 6.0 update?

Any help would be great, thanks!

editor_view.....png

preview_view....png

• almostinevitable

• January 9, 2023 at 4:23 am

I have this same issue, does anybody know what’s going on? It didn’t used to be like this before.

• jamesswann

• January 11, 2024 at 1:09 pm

I’m also seeing the same issue here!