显示自定义古腾堡块的预览图像

如何解决显示自定义古腾堡块的预览图像

我已经创建了一批自定义 ACF gutenberg 块，现在正在尝试分配预览图像。

问题：显示预览图像

下图显示了一个 paragraph 组件，它是一个默认块。

您可以在右侧看到，段落块旁边有一个图像和描述。以下是我的组件目前的显示方式（完整代码将在最后）

如您所见，尽管我已在代码中定义了两者，但它显示“无可用预览”且未添加任何说明。

acf-blocks/blocks.PHP

<?PHP
$img_root = "../../src/components";

$hero = array(
    'name' => 'hero','title' => __('Hero'),'description' => __('Hero section'),'render_callback' => 'block_render','category' => 'formatting','icon' => 'admin-comments','image' => $img_root . '/hero/hero.png','mode' => 'edit','keywords' => array(
        'hero'
    ),);

$blocks = [$hero];

return $blocks;

?>

acf-blocks/functions.PHP

<?PHP

function block_acf_init(){
  $path = get_template_directory().'/inc/acf-blocks/blocks.PHP';
  $blocks = require($path);
  foreach($blocks as $block) {
    acf_register_block_type($block);
  }
}

if( function_exists('acf_register_block_type') ) {
  add_action('acf/init','block_acf_init');
}


?>

我的文件夹结构如下：

theme
  inc
    acf-blocks
      blocks.PHP
      functions.PHP
  src
    components
      hero
        hero.js
        hero.scss
        hero.png

不确定为什么我的预览图片不显示？

编辑：

我已经添加了 block_render 函数，但仍然没有成功。这是我当前的 functions.PHP 文件：

<?PHP

$component_path = "../../src/components" . strtolower($block['title']) . strtolower($block['title']).".js";

function block_render( $block,$content = '',$is_preview = false ) {
  $context = get_context();
    $context['block'] = $block; // store block values
    $context['fields'] = get_fields(); // store field values
    $context['is_preview'] = $is_preview;
    render($component_path,$context ); // render the block
}

function block_acf_init(){
  $path = get_template_directory().'/inc/acf-blocks/blocks.PHP';
  $blocks = require($path);
  foreach($blocks as $block) {
    acf_register_block_type($block);
  }
}

if( function_exists('acf_register_block_type') ) {
  add_action('acf/init','block_acf_init');
}

?>

编辑 2：

<?PHP

$hero = array(
    'name' => 'hero','description' => __('Add hero section'),'category' => 'custom','post_types' => array(
        'page'
    ),'example' => array(
        'mode' => 'preview','data' => array(
            'field' => 'value' // sample data
        )
    )
);


function block_render($block,$is_preview = false)
{
    if ($is_preview && !empty($block['data'])) {
        echo '<img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2irsELemo2mRl4zVXzhjFyxtj3GTVZ8xo">';
        return;
    } elseif ($is_preview) {
        echo 'A Hero block using ACF';
        return;
    }
    
    echo 'A Hero block using ACF.';
}


?>

甚至尝试过：

<?PHP

function block_render( $block,$is_preview = false ) {
  if($is_preview):
    echo '<img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2irsELemo2mRl4zVXzhjFyxtj3GTVZ8xo">';
  else:
    echo '<img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2irsELemo2mRl4zVXzhjFyxtj3GTVZ8xo">';
  endif;
}


?>

在这两种情况下，当尝试显示图像（不是块预览）时，我看到的是块的 ACF 字段，而不是定义的虚拟图像：

解决方法

它说“没有可用的预览”并且没有添加描述，即使我已经在代码中定义了

它说“没有预览可用”，因为确实如此，并且您定义的内容不是 ACF 甚至 WordPress 支持的内容，即 image arg ('image' => $img_root . '/hero/hero.png') 将不执行任何操作- 盒子。

您可以在右侧看到，段落块旁边有一个图像和描述。

不，那不是图像。

它是由块的渲染回调（在您的情况下为 block_render() 函数）或在 ACF 块类型的情况下的模板返回的 块输出 的预览.

那个（核心）段落块，它实际上定义了 example property，然后启用块预览即使属性为空（即没有定义属性）。使用 registerBlockType() 的工作示例：

registerBlockType( 'my-blocks/foo-bar',{
    title: 'My Foo Bar block',category: 'formatting',description: 'Sample description.',// Just define this property and there'll be a preview.
    example: {},// And the preview is the one coming from this callback.
    edit: () => <p>just testing the block previews :)</p>,save: () => null,} );

有了这个，你就会得到这个预览：

但我提供该示例只是为了让您知道如何向非动态块添加预览。

那么如何通过ACF

添加块预览

简单，如其他答案以及 acf_register_block_type() documentation 所示，使用 example 参数：

example
（数组）（可选）用于构建块插入器中显示的预览的结构化数据数组。所有值输入“数据”属性数组将在块渲染模板/回调通过 $block['data'] 或 get_field()。

因此，在您的情况下，您可以将该 arg 添加到您的 $hero 数组中：

$hero = array(
    'name'            => 'hero','title'           => __( 'Hero' ),'description'     => __( 'Hero section' ),'render_callback' => 'block_render','category'        => 'formatting','icon'            => 'admin-comments','keywords'        => array( 'hero' ),// Just add this and you'll get the block preview:
    'example'         => array(
        'attributes' => array(
            'mode' => 'preview',),);

基本上，无论渲染回调/模板输出如何，当您通过块插入器 UI 添加块时，您在预览中会看到什么。

但是，如果您在预览模式下想要不同的输出——无论是在通过 UI 插入块时还是在将块添加到编辑器后，您都可以使用传递给渲染器的 $is_preview 参数回调：

function block_render( $block,$content = '',$is_preview = false ) {
    // back-end preview
    if ( $is_preview ) {
        echo 'A Hero block using ACF — In preview mode.';
        return;
    }

    // front-end output
    echo 'A Hero block using ACF.';
}

如果您想在插入器 UI 和编辑器中使用不同的预览，请在 data 参数中设置 example 参数，并在渲染回调中检查 {{1} } 不为空：

data

实际上，您可以通过这些 /* In $hero,add example.attributes.data: $hero = array( 'name' => 'hero',... 'example' => array( 'attributes' => array( 'mode' => 'preview','data' => array( 'my_field' => 'Sample value',); */ function block_render( $block,$is_preview = false ) { // back-end previews if ( $is_preview && ! empty( $block['data'] ) ) { echo 'A Hero block using ACF — In preview mode — In the block inserter UI.'; return; } elseif ( $is_preview ) { echo 'A Hero block using ACF — In preview mode — In the editor.'; return; } // front-end output echo 'A Hero block using ACF.'; } 显示实际图像：

if

然后为您提供如下所示的预览：

所以我希望这有帮助？ :)

请注意，这些示例已经在 ACF Pro 5.9.4 和 WordPress 5.6 上进行了尝试和测试，这两个版本都是撰写本文时的最新版本。

我没有在文档 (https://www.advancedcustomfields.com/resources/acf_register_block_type/) 的 # default user model or custom user model class User(): ... def __str__(self): return self.username class Group(models.Model): title = models.CharField(max_length=100) description = models.TextField(blank=True,null=True) users = models.ManyToManyField(User) class Meta: ordering = ['-id'] def __str__(self): return self.title 函数中找到任何有关“图像”的信息。

如果您使用此函数并将 acf_register_block_type() 设置为 mode，则在块编辑器中将鼠标悬停在块上时，您将获得渲染模板的预览。

functions.php

preview

如果您为块使用自定义字段，则需要确保在古腾堡块模板文件的预览中显示一个值。

block_template.php

acf_register_block_type(array(
    'name' => 'name-of-block','title' => __('Your Title'),'description' => __('Your description'),'post_types' => array('page'),'category' => 'common','render_template' => '../your/path/block_template.php',// your template file
    'enqueue_style' => get_template_directory_uri() . '/style.css',// path to css file
    'icon' => '',// svg code for icon
    'keywords' => array('Keyword','another'),'example'  => array(
        'attributes' => array(
            'mode' => 'preview' // this needs to be set to preview (!)
        )
    ),));

这样，预览将成为您渲染的块模板。它不是您想要的图像，但它显示了您的块的外观。这就是预览的目的。

在互联网上阅读了无数关于如何在自定义 ACF 块中添加图像作为预览的帖子后，我找到了解决方案：

您需要在注册 ACF 块时添加“示例”，将“模式”属性添加为“预览”以及您要传递的任何特定数据。

acf_register_block_type(
        array(
            'name' => 'name-of-block',// your template
            'icon' => '',// svg code for icon
            'keywords' => array('Keyword','example'  => array(
                'attributes' => array(
                    'mode' => 'preview','data' => array(
                        'preview_image_help' => '../your/dir/block-image-preview.jpg',)
                )
            )
        )
    );

警告：字段“preview_image_help”需要是唯一的名称，并且不能存在于块字段中。

块将在 2 个地方以预览模式呈现，即编辑器和块插入器预览（当您将鼠标悬停在块名称上时）。在编辑器中渲染时，它将包含您在块中定义的所有字段。当在插入器预览中呈现时，将只有“preview_image_help”字段。

现在是渲染部分（在您的模板中），检查唯一字段，您将知道渲染发生的位置：

<?       
        if( isset( $block['data']['preview_image_help'] )  ) :    /* rendering in inserter preview  */

            echo '<img src="'. $block['data']['preview_image_help'] .'" style="width:100%; height:auto;">';
    
        
        else : /* rendering in editor body */
            
            $text   = get_field('text');
            $author = get_field('author');
            $title  = get_field('title');
            ?>
            <div class="my-class">
                <span class="class-title"><?=$title?></span>
                <span class="class-text"><?=$text?></span>
                <span class="class-author"><?=$author?></span>
            </div>
            <?
            
        endif;