image - ACF 古腾堡块中的预览图像

Question

使用 ACF 注册块时，是否可以将图像添加到 Gutenber 块预览中？

这是注册块的代码：

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'),
));

悬停块时会出现预览。

谢谢 ！

Answer 1

我终于找到了解决方案。

我不知道你是否使用 Twig (Timber)。

如果不检查这个：https ://stackoverflow.com/a/67846162/6696150

就我而言，木材

当您声明您的块时，添加示例属性：

$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',
            ),
        )
    )
);

当你声明你的回调时：

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 );
}