AdvancedCustomFields / AdvancedCustomFields/acf

ACF Blocks: Initial Gutenberg Preview Empty Despite Default Field Values (Timber + render_callback)

Open
#1,010 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
When registering a custom ACF block using acf_register_block_type() with a render_callback, the Gutenberg editor preview is blank on the very first load after inserting the block — even though default field values are defined. The data object passed to render_callback is empty on this initial render. As soon as any field value is changed in the inspector controls, the preview updates correctly and continues to work from that point on.

To Reproduce

  1. Register a custom ACF block using acf_register_block_type() with a render_callback
  2. Define default values for the block's fields in ACF
  3. Open a page or post in the Gutenberg editor
  4. Insert the custom block for the first time
  5. Observe that the block preview is blank — the render_callback receives an empty data object

Expected behavior
On initial insertion of the block into the editor, the render_callback should receive the defined default field values and render an accurate preview immediately, without requiring any user interaction.

Screenshots or Video
https://www.youtube.com/watch?v=ldLwg3o8PPY

Code

We use a central GutenbergHelper class to register and render all ACF blocks for Gutenberg.

GutenbergHelper.php — handles block registration and the shared render_callback:

<?php

namespace Flynt\Utils;

use ACFComposer\ACFComposer;
use Flynt\ComponentManager;
use Timber\Timber;

class GutenbergHelper
{
    public static function acfRenderCallback($block, $content, $is_preview = false, $post_id = 0)
    {
        $componentName = str_replace('acf/', '', $block['name']);

        $componentManager = ComponentManager::getInstance();
        $filePath = $componentManager->getComponentFilePath($block['filePath'], 'index.twig');

        $relativeFilePath = ltrim(str_replace(get_template_directory(), '', $filePath), '/');

        if (!is_file($filePath)) {
            trigger_error("Template not found: {$filePath}", E_USER_WARNING);
            return '';
        }

        $fields = \get_fields() ?? [];
        $fields['is_preview'] = $is_preview;

        $fields = apply_filters(
           "Flynt/addComponentData?name={$componentName}",
            $fields,
            $componentName
        );

        $fields['block'] = $block;

        Timber::render($relativeFilePath, $fields);
    }

    public static function registerGutenbergBlock($component)
    {
        ACFComposer::registerFieldGroup([
            'name' => $component['name'],
            'title' => $component['label'],
            'fields' => $component['sub_fields'] ?? [],
            'location' => array(
                array(
                    array(
                        'param' => 'block',
                        'operator' => '==',
                        'value' => 'acf/' . strtolower($component['name']),
                    ),
                ),
            ),
        ]);

        if (function_exists('acf_register_block_type')) {
            $componentName = $component['name'];
            $componentLabel = $component['label'] ?? $componentName;
            $gutenbergConfig = self::getComponentGutenbergConfig($componentName);

            $blockConfig = array(
                'name' => $componentName,
                'title' => $componentLabel,
                'filePath' => $component['filePath'] ?? $componentLabel,
                'render_callback' => [self::class, 'acfRenderCallback'],
                'category' => $gutenbergConfig['category'] ?? 'custom-blocks',
                'icon' => $gutenbergConfig['icon'] ?? 'grid-view',
                'keywords' => $gutenbergConfig['keywords'] ?? ['content'],
                'supports' => $gutenbergConfig['supports'] ?? array(
                    'align' => array( 'wide', 'full' ),
                    'anchor' => true,
                    'customClassName' => true,
                    'color' => array('text' => true, 'background' => true),
                    'layout' => array('allowInheriting' => true),
                    'typography' => array(
                        'fontSize' => false,
                        'lineHeight' => false,
                        'fontWeight' => false,
                    ),
                    'spacing' => array('margin' => true, 'padding' => true),
                ),
            );

            acf_register_block_type($blockConfig);
        }
    }

    private static function getComponentGutenbergConfig($componentName): array
    {
        $functionName = "Flynt\\Components\\{$componentName}\\getGutenbergConfig";
        if (function_exists($functionName)) {
            return call_user_func($functionName);
        }
        return [];
    }
}

BlockLinkTiles/functions.php — example block registration with field definitions including default_value:

<?php

namespace Flynt\Components\BlockLinkTiles;

use Flynt\FieldVariables;
use Flynt\Utils\GutenbergHelper;

function getACFLayout()
{
    return [
        'name' => 'blockLinkTiles',
        'label' => __('Link Tiles', 'flynt'),
        'filePath' => 'BlockLinkTiles',
        'sub_fields' => [
            [
                'label' => __('Content', 'flynt'),
                'name' => 'contentTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0,
            ],
            [
                'label' => __('Color', 'flynt'),
                'name' => 'color',
                'type' => 'select',
                'choices' => FieldVariables\getThemeColorChoices(),
                'default_value' => 'orange',
                'wrapper' => ['width' => 100],
            ],
            [
                'label' => __('Links', 'flynt'),
                'name' => 'links',
                'type' => 'repeater',
                'layout' => 'block',
                'min' => 3,
                'max' => 4,
                'sub_fields' => [
                    [
                        'label' => __('Label', 'flynt'),
                        'name' => 'label',
                        'type' => 'text',
                        'default_value' => 'Title',
                    ],
                    [
                        'label' => __('Link', 'flynt'),
                        'name' => 'link',
                        'type' => 'link',
                        'required' => 0,
                    ],
                ],
            ],
        ],
    ];
}

function getGutenbergConfig(): array
{
    return [
        'icon' => 'screenoptions',
        'keywords' => ['links', 'tiles', 'gradient', 'cta'],
        'category' => 'custom-blocks',
    ];
}

add_action('acf/init', function () {
    if (function_exists('acf_register_block_type')) {
        $component = getACFLayout();
        GutenbergHelper::registerGutenbergBlock($component);
    }
});

BlockLinkTiles/index.twig — Timber template, relies on links and color being present in the context:

{% set componentOptions = {
    name: 'BlockLinkTiles',
    loadOn: 'visible',
    class: 'has-global-padding'
} %}

{% set content %}
  <div class="block-link-tiles-wrapper">
    {% if links and links|length > 0 %}
      {% set total = links|length %}
      <div class="flex flex-col gap-sm md:flex-row">
        {% for row in links %}
          {% include 'Components/BlockLinkTiles/Partials/_tile.twig' with {
            link: row.link,
            label: row.label|default(row.link.title),
            index: loop.index0,
            total: total,
            gradientSlugDesktop: gradientSlugDesktop|default('dark-sunset'),
            gradientSlugMobile: gradientSlugMobile|default('dark-sunset-vertical')
          } %}
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endset %}

{% include 'Components/_Containers/FlyntComponent.twig' with {
    content: content,
    componentOptions: componentOptions
} %}

Our question: what is the correct, supported way to access field default values inside render_callback on the very first render of a newly inserted block, before any data has been saved or interacted with?

Version Information:

  • WordPress Version: 6.9.4
  • PHP Version: 8.3
  • ACF Version: ACF PRO 6.8.0.1
  • Timber 2.2.0 for templating
  • Browser: Brave 1.88.136

Additional context

  • The block renders correctly on the website frontend
  • The issue only occurs on the very first render after inserting the block in the editor — subsequent loads of an already-saved block work fine

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with GutenbergHelper.php, especially acfRenderCallback(), then trace registration from BlockLinkTiles/functions.php and the data expected by BlockLinkTiles/index.twig. Reproduce first insertion in the Gutenberg editor and determine the supported default-value path; done means the initial render receives the configured values without field interaction and later renders remain correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.