Preview image in ACF gutenberg block

Question

Is it possible to add an image to the gutenber block preview when using ACF to register the block ?

Here's the code to register the block:

acf_register_block(array(
    'name'              => 'bk-raisons',
    'title'             => __('Les raisons', 'diezel'),
    'description'       => __('Les raisons', 'diezel'),
    'render_callback'   => 'my_acf_block_render_callback',
    'category'          => 'spira-custom',
    'icon'              => 'align-wide',
    'keywords'          => array('bk-raisons'),
));

The preview appears when hovering the block.

Thank you !

Answer 1

I finally found a solution.

I don't know if you use Twig (Timber) or not.

If not check this : https://stackoverflow.com/a/67846162/6696150

For my part with Timber

When you declared your block add example attributes :

$img_quadruple = array(
    'name'              => 'img-quadruple',
    'title'             => __('Quatre images'),
    'title_for_render'  => 'img-quadruple',
    'description'       => __(''),
    'render_callback'   => 'ccn_acf_block_render_callback',
    'category'          => 'imgs',
    'icon'              => '',
    'mode'              => 'edit',
    'keywords'          => array( 'quatre images' ),
    'example'           => array(
        'attributes'        => array(
            'mode' => 'preview',
            'data' => array(
                'preview_image_help' => get_template_directory_uri().'/assets/img/preview/preview_img_quadruple.jpg',
            ),
        )
    )
);

And when your declared your callback :

function ccn_acf_block_render_callback( $block, $content = '', $is_preview = false ) {
    $context = Timber::context();

    // Store block values.
    $context['block'] = $block;

    // Store field values.
    $context['fields'] = get_fields();

    // back-end previews
    if ( $is_preview && ! empty( $block['data'] ) ) {
        echo '<img src="'. $block['data']['preview_image_help'] .'" style="width:100%; height:auto;">';
        return;
    } elseif ( $is_preview ) {
        echo 'Other condition';
        return;
    }

    // Store $is_preview value.
    $context['is_preview'] = $is_preview;

    // Render the block.
    Timber::render('gutenberg/gut_' . strtolower($block['title_for_render']) . '.twig', $context );
}