【发布时间】：2021-04-29 09:16:27
【问题描述】：
我创建了一批自定义 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',
'title' => __('Hero'),
'description' => __('Add hero section'),
'render_callback' => 'block_render',
'category' => 'formatting',
'icon' => 'admin-comments',
'mode' => 'edit',
'category' => 'custom',
'post_types' => array(
'page'
),
'keywords' => array(
'hero'
),
'example' => array(
'mode' => 'preview',
'data' => array(
'field' => 'value' // sample data
)
)
);
function block_render($block, $content = '', $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, $content = '', $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 字段，而不是定义的虚拟图像：
【问题讨论】：
-
嗨弗雷迪。您的 block.php 正在调用一个名为“block_render”的回调函数，但我看不到该函数在哪里。通常预览不可用，因为 acf 找不到您的块的视图。
-
嗨@MarcelloPerri - 我没有
block_render的函数。我的块显示在后端，如上图所示，例如，当我更改其标题或描述时，它也会在后端更新，它只是图像。你认为这与block_render有关？ -
尝试创建一个函数'block_render'并查看Wordpress是否在创建该类型的块后调用该函数，我认为该函数是强制性的，否则，您始终可以定义哪个文件是查看该块
-
@MarcelloPerri - 深入了解了
render_callback，从外观上看，它负责在管理员中显示内容。尽管如此，我已经添加了该功能（我已经在上面编辑了我的问题），不幸的是仍然没有预览图像
标签： php wordpress wordpress-gutenberg acf-gutenberg