显示自定义古腾堡块的预览图像 [英] Show preview image for custom Gutenberg blocks
问题描述
我已经创建了一批自定义 ACF 古腾堡 块，现在正在尝试分配预览图像.
问题:显示预览图像
下图显示了一个 paragraph 组件，它是一个默认块.
您可以在右侧看到，段落块旁边有一个图像和描述.以下是我的组件目前的显示方式(完整代码将在最后)
如您所见，它显示没有可用的预览"；并且没有添加任何描述，即使我在代码中都定义了.
方法:
acf-blocks/blocks.php
'英雄'，'标题' =>__('英雄') ，'说明' =>__('英雄部分') ,'render_callback' =>'block_render','类别' =>'格式化','图标' =>'管理员评论','图像' =>$img_root .'/英雄/英雄.png','模式' =>'编辑'，'关键字' =>大批('英雄') ,);$blocks = [$hero];返回 $blocks;?>acf-blocks/functions.php
我的文件夹结构如下:
主题公司acf 块块.php函数.php源文件成分英雄英雄.js英雄.scsshero.png不确定为什么我的预览图片不显示?
我已经添加了 block_render 函数，但仍然没有成功.这是我当前的 functions.php 文件:
编辑 2:
'英雄'，'标题' =>__('英雄')，'说明' =>__('添加英雄部分'),'render_callback' =>'block_render','类别' =>'格式化','图标' =>'管理员评论','模式' =>'编辑'，'类别' =>'风俗'，'post_types' =>大批('页'),'关键字' =>大批('英雄'),'示例' =>大批('模式' =>'预览'，'数据' =>大批('字段' =>'value'//样本数据)));功能块_渲染($block，$content = ''，$is_preview = false){如果 ($is_preview && !empty($block['data'])) {echo '<img src="https://i.picsum.photos/id/1021/536/354.jpg?hmac=XeUbyCXoxX2IrSELemo2mRl4zVXzhjFyxtj3GTVZ8xo">';返回;} elseif ($is_preview) {echo '使用 ACF 的英雄方块';返回;}echo '一个使用 ACF 的英雄块.';}?>甚至尝试过:
在这两种情况下，当尝试显示图像(不是块预览)时，我看到的是块的 ACF 字段，而不是定义的虚拟图像:
它说没有可用的预览"；并且没有添加任何描述，即使我在代码中都定义了
它说没有可用的预览"；因为确实如此，而且你定义的不是 ACF 甚至 WordPress 支持的东西，即 image arg ('image' => $img_root . '/hero/hero.png') 不会立即执行任何操作.
您可以在右侧看到，段落块旁边有一个图像和描述.
不，那不是图像.
它是由块的渲染回调(在您的案例中为 block_render() 函数)或模板返回的 块输出 的预览ACF 块类型.
那个(核心)段落块，它实际上定义了
但我提供该示例只是为了让您知道如何向非动态块添加预览.
那么如何通过ACF
添加块预览简单，如另一个答案以及 acf_register_block_type()
所以我希望这有帮助?:)
并注意这些例子已经尝试过&使用 ACF Pro 5.9.4 和 WordPress 5.6 进行了测试，这两个版本都是撰写本文时的最新版本.
I've created a batch of custom ACF gutenberg blocks and now trying to assign a preview image.
Issue: Getting the preview image to show
The below image here shows a paragraph component which is a default block.
You can see on the right hand side, that the paragraph block has an image and description alongside it. Below is how my component is currently appearing (full code will be at the end)
As you can see, it says "no preview available" and no description is added, even though I've defined both in the code.
Approach:
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');
}
?>
My folder structure is as follows:
theme
inc
acf-blocks
blocks.php
functions.php
src
components
hero
hero.js
hero.scss
hero.png
Unsure why my preview image doesn't show?
Edit:
I've added the block_render function but still no success. Here is my current functions.php file:
<?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');
}
?>
Edit 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.';
}
?>
Have even tried:
<?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;
}
?>
In both cases, when trying to show the image (not the block preview), I see the ACF fields for the block, not the dummy image defined:
it says "no preview available" and no description is added, even though I've defined both in the code
It says "no preview available" because it's indeed so, and what you defined is not something that ACF or even WordPress supports, i.e. the image arg ('image' => $img_root . '/hero/hero.png') will do nothing out-of-the-box.
You can see on the right hand side, that the paragraph block has an image and description alongside it.
No, that is not an image.
It is instead a preview of the block output as returned by the block's render callback (which is the block_render() function in your case) or template in the case of an ACF block type.
And that (core) Paragraph block, it actually defines the example property which then enables the block preview even if the property is empty (i.e. no attributes defined). Working example using 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,
} );
And with that, you'd get this preview:
But I provided that example just to let you know how would you add a preview to a non-dynamic block.
So how to add the block preview via ACF
Simple, and as shown in the other answer as well as the acf_register_block_type() documentation, use the example arg:
example
(Array) (Optional) An array of structured data used to construct a preview shown within the block-inserter. All values entered into the ‘data’ attribute array will become available within the block render template/callback via$block['data']orget_field().
So in your case, you would add that arg to your $hero array:
$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',
),
),
);
And basically, whatever the render callback/template outputs, would be what you see in the preview when adding the block via the block inserter UI.
But if you want a different output when on preview mode — both when inserting the block via the UI and after the block is added into the editor, then you can make use of the $is_preview parameter passed to the render callback:
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.';
}
And if you want a different preview in the inserter UI and the editor, then set the data arg in the example arg, and in the render callback, just check if the data is not empty:
/* 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, $content = '', $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.';
}
And actually, you could show an actual image via those if:
if ( $is_preview && ! empty( $block['data'] ) ) {
echo '<img src="https://example.com/path/to/image-file-name.png">';
return;
}
which then gives you a preview that looks like:
So I hope that helps? :)
And note that the examples have been tried & tested working with ACF Pro 5.9.4 and WordPress 5.6, which both are the latest releases as of writing.
这篇关于显示自定义古腾堡块的预览图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
