ACF 古腾堡块中的预览图像答案

【问题标题】：Preview image in ACF gutenberg blockACF 古腾堡块中的预览图像
【发布时间】：2021-06-22 09:07:23
【问题描述】：

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

悬停块时会出现预览。

谢谢！

【问题讨论】：

您好，您找到解决方案了吗？我很有趣
不幸的是……

标签： image preview acf-gutenberg

【解决方案1】：

我终于找到了解决办法。

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

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

我对 Timber 的看法

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

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

【讨论】：