Php 显示自定义Gutenberg块的预览图像

我已经创建了一批自定义

ACF gutenberg

块，现在正在尝试分配预览图像

问题：获取要显示的预览图像

下图显示了一个

段落

组件，它是一个默认块

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

正如您所看到的，它说“没有可用的预览”，并且没有添加任何描述，尽管我在代码中已经定义了这两者

方法：

acf blocks/blocks.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 (!)
        )
    ),
));

$myfield = get_field( 'my_field' );

<p><?php if ($myfield) { echo $myfield; } else { echo "my fallback paragraph"; } ?></p>

---

我没有在文档（）中的

acf\u register\u block\u type（）函数中找到任何有关“image”的内容

如果使用此功能并将
模式
设置为
预览
，则如果在块编辑器中用鼠标悬停块，将获得渲染模板的预览

functions.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 (!)
        )
    ),
));

$myfield = get_field( 'my_field' );

<p><?php if ($myfield) { echo $myfield; } else { echo "my fallback paragraph"; } ?></p>

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

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 (!)
        )
    ),
));

$myfield = get_field( 'my_field' );

<p><?php if ($myfield) { echo $myfield; } else { echo "my fallback paragraph"; } ?></p>

$myfield=get_字段（'my_字段'）；


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

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

它说“没有可用的预览”，因为它确实是这样，而且您定义的内容不是ACF甚至WordPress支持的，即
图像
参数（
'image'=>$img_root./hero/hero.png'
）将不会立即执行任何操作

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

不，那不是图像

相反，它是块的渲染回调（在您的情况下是
block\u render（）
函数）或模板（在ACF块类型的情况下）返回的块输出的预览

而该（核心）段落块实际上定义了，即使属性为空（即未定义属性），它也会启用块预览。使用registerBlockType（）的工作示例
：

registerBlockType（'my blocks/foo bar'{
标题：“我的富吧街区”，
类别：“格式化”，
描述：“样本描述”，
//只要定义这个属性，就会有一个预览。
例如：{}，
//预览就是这个回调的结果。
编辑：（）=>仅测试块预览：）
，
保存：（）=>null，
} );

有了这些，您将获得以下预览：


但我提供这个示例只是为了让您知道如何将预览添加到非动态块

那么如何通过ACF添加块预览呢
简单，如另一个答案以及
acf\u register\u block\u type（）
中所示，使用
示例
参数：

示例
（数组）（可选）用于构建块插入器中显示的预览的结构化数据数组。所有价值观
输入到“数据”属性数组中的数据将在
通过
$block['data']
或
获取字段（）

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

$hero=array(
“名称”=>“英雄”，
“标题”=>“（“英雄”），
“说明”=>“（“英雄部分”），
“渲染回调”=>“块渲染”，
“类别”=>“格式”，
'图标'=>'管理员评论'，
'关键字'=>数组（'英雄'），
//只需添加此项，即可获得块预览：
'示例'=>数组(
'属性'=>数组(
“模式”=>“预览”，
),
),
);

基本上，无论渲染回调/模板输出什么，都是通过块插入器UI添加块时在预览中看到的

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

function block\u render（$block，$content=''，$is\u preview=false）{
//后端预览
如果（$is\U预览）{
回显“使用ACF的英雄区块-处于预览模式”；
返回；
}
//前端输出
回音“使用ACF的英雄方块”；
}

如果您希望在插入器UI和编辑器中进行不同的预览，则在
示例中设置
数据
参数，并在渲染回调中检查
数据是否为空：

/*在$hero中，添加example.attributes.data：
$hero=阵列(
“名称”=>“英雄”，
...
'示例'=>数组(
'属性'=>数组(
“模式”=>“预览”，
“数据”=>数组(
“我的_字段”=>“样本值”，
),
),
),
);
*/
函数块\u呈现（$block，$content=''，$is\u preview=false）{
//后端预览
如果（$is_preview&&！empty（$block['data']））{
回显“使用ACF的英雄块-在预览模式下-在块插入器UI中”；
返回；
}elseif（$is_预览版）{
回显“使用ACF的英雄块-在预览模式下-在编辑器中”；
返回；
}
//前端输出
回音“使用ACF的英雄方块”；
}

实际上，如果
，您可以通过这些
显示实际图像：

if（$is_preview&&！empty（$block['data']））{
回声'；
雷图