如何访问古腾堡块内的高级自定义字段值?
How to access advanced custom field values within a gutenberg block?
我有一个带有一些高级自定义字段的自定义 post 类型。我正在尝试从 Gutenberg 块中访问这些自定义字段值。
我已将以下内容添加到我的 register_post_type
函数中
'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'custom-fields' ),
我可以使用以下方法从我的 Gutenberg 块中成功检索自定义 posts:
select('core').getEntityRecords('postType', 'customType')
但我没有看到自定义字段或其值。
这是我的街区 JavaScript:
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { withSelect } = wp.data;
registerBlockType('cgb/block-press-block', {
title: __('Press Block'),
icon: 'awards',
category: 'common',
keywords: [
__('press-block'),
],
edit: withSelect((select) => {
return {
posts: select('core').getEntityRecords('postType', 'press')
};
})(({posts}) => {
return <p>Content</p>;
}),
});
有没有办法在编辑器端访问自定义 post 的高级字段值,或者有没有办法将该数据传递到块?
由于您已经在使用高级自定义字段,您是否可以不用独立注册自己的块,而是使用 acf_register_block
?这样您就可以在基于 PHP 的模板中从 ACF 访问字段。
这里有一些有用的 link:
此代码取自上面的 ACF 博客 post,为了完整起见,post 在此处编辑,以防上面 link 发生变化。
注册ACF块:
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// register a testimonial block
acf_register_block(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('A custom testimonial block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
包含您的块模板的回调函数:
function my_acf_block_render_callback( $block ) {
// convert name ("acf/testimonial") into path friendly slug ("testimonial")
$slug = str_replace('acf/', '', $block['name']);
// include a template part from within the "template-parts/block" folder
if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
}
}
你的区块HTML:
<?php
/**
* Block Name: Testimonial
*
* This is the template that displays the testimonial block.
*/
// get image field (array)
$avatar = get_field('avatar');
// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];
// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
<p><?php the_field('testimonial'); ?></p>
<cite>
<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
<span><?php the_field('author'); ?></span>
</cite>
</blockquote>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php the_field('background_color'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>
这将创建一个基本的 testimonials 块作为简单的起点。 ACF 在 Gutenberg 中处理 JavaScript 处理,因此您所要做的就是担心事情的 PHP 方面。
这意味着您可以像我们(ACF 粉丝)一样使用 get_field()
and the_field()
功能。在不使用这种本机方式的情况下混合使用 ACF 和 Gutenberg 可能会令人头疼,并且可能需要一个插件才能通过 WordPress REST API.
访问字段
注意:ACF 对 Gutenberg 块的支持需要 ACF 5.8 或更高版本。
我有一个带有一些高级自定义字段的自定义 post 类型。我正在尝试从 Gutenberg 块中访问这些自定义字段值。
我已将以下内容添加到我的 register_post_type
函数中
'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'custom-fields' ),
我可以使用以下方法从我的 Gutenberg 块中成功检索自定义 posts:
select('core').getEntityRecords('postType', 'customType')
但我没有看到自定义字段或其值。
这是我的街区 JavaScript:
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { withSelect } = wp.data;
registerBlockType('cgb/block-press-block', {
title: __('Press Block'),
icon: 'awards',
category: 'common',
keywords: [
__('press-block'),
],
edit: withSelect((select) => {
return {
posts: select('core').getEntityRecords('postType', 'press')
};
})(({posts}) => {
return <p>Content</p>;
}),
});
有没有办法在编辑器端访问自定义 post 的高级字段值,或者有没有办法将该数据传递到块?
由于您已经在使用高级自定义字段,您是否可以不用独立注册自己的块,而是使用 acf_register_block
?这样您就可以在基于 PHP 的模板中从 ACF 访问字段。
这里有一些有用的 link:
此代码取自上面的 ACF 博客 post,为了完整起见,post 在此处编辑,以防上面 link 发生变化。
注册ACF块:
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// register a testimonial block
acf_register_block(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('A custom testimonial block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
包含您的块模板的回调函数:
function my_acf_block_render_callback( $block ) {
// convert name ("acf/testimonial") into path friendly slug ("testimonial")
$slug = str_replace('acf/', '', $block['name']);
// include a template part from within the "template-parts/block" folder
if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
}
}
你的区块HTML:
<?php
/**
* Block Name: Testimonial
*
* This is the template that displays the testimonial block.
*/
// get image field (array)
$avatar = get_field('avatar');
// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];
// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
<p><?php the_field('testimonial'); ?></p>
<cite>
<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
<span><?php the_field('author'); ?></span>
</cite>
</blockquote>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php the_field('background_color'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>
这将创建一个基本的 testimonials 块作为简单的起点。 ACF 在 Gutenberg 中处理 JavaScript 处理,因此您所要做的就是担心事情的 PHP 方面。
这意味着您可以像我们(ACF 粉丝)一样使用 get_field()
and the_field()
功能。在不使用这种本机方式的情况下混合使用 ACF 和 Gutenberg 可能会令人头疼,并且可能需要一个插件才能通过 WordPress REST API.
注意:ACF 对 Gutenberg 块的支持需要 ACF 5.8 或更高版本。