如何访问古腾堡块中的高级自定义字段值？

Question

我有一个带有一些高级自定义字段的自定义帖子类型。我正在尝试从古腾堡块内访问这些自定义字段值。

我已将以下内容添加到我的register_post_type函数中

    'show_in_rest' => true,
    'supports' => array( 'title', 'editor', 'custom-fields' ),

我可以使用以下命令成功地从我的古腾堡块中检索自定义帖子：

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>;
  }),
});

有没有办法在编辑器端访问自定义帖子的高级字段值或将该数据传递到块？

Answer 1

由于您已经在使用高级自定义字段，您是否可以使用而不是独立注册自己的块acf_register_block？这样您就可以在基于 PHP 的模板中访问 ACF 中的字段。

\n\n

以下是一些关于此的有用链接：

\n\n

\n
• ACF 5.8 \xe2\x80\x93 引入古腾堡 ACF 块
\n
• acf_register_block()
\n

\n\n

此代码取自上面的 ACF 博客文章，并发布在此处以确保完整性，以防上述链接发生更改。

\n\n

注册 ACF 块：

\n\n

add_action(\'acf/init\', \'my_acf_init\');\nfunction my_acf_init() {\n\n    // check function exists\n    if( function_exists(\'acf_register_block\') ) {\n\n        // register a testimonial block\n        acf_register_block(array(\n            \'name\'              => \'testimonial\',\n            \'title\'             => __(\'Testimonial\'),\n            \'description\'       => __(\'A custom testimonial block.\'),\n            \'render_callback\'   => \'my_acf_block_render_callback\',\n            \'category\'          => \'formatting\',\n            \'icon\'              => \'admin-comments\',\n            \'keywords\'          => array( \'testimonial\', \'quote\' ),\n        ));\n    }\n}\n

\n\n

包含块模板的回调函数：

\n\n

function my_acf_block_render_callback( $block ) {\n\n    // convert name ("acf/testimonial") into path friendly slug ("testimonial")\n    $slug = str_replace(\'acf/\', \'\', $block[\'name\']);\n\n    // include a template part from within the "template-parts/block" folder\n    if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {\n        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );\n    }\n}\n

\n\n

您的块的 HTML：

\n\n

<?php\n/**\n * Block Name: Testimonial\n *\n * This is the template that displays the testimonial block.\n */\n\n// get image field (array)\n$avatar = get_field(\'avatar\');\n\n// create id attribute for specific styling\n$id = \'testimonial-\' . $block[\'id\'];\n\n// create align class ("alignwide") from block setting ("wide")\n$align_class = $block[\'align\'] ? \'align\' . $block[\'align\'] : \'\';\n\n?>\n<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">\n    <p><?php the_field(\'testimonial\'); ?></p>\n    <cite>\n        <img src="<?php echo $avatar[\'url\']; ?>" alt="<?php echo $avatar[\'alt\']; ?>" />\n        <span><?php the_field(\'author\'); ?></span>\n    </cite>\n</blockquote>\n<style type="text/css">\n    #<?php echo $id; ?> {\n        background: <?php the_field(\'background_color\'); ?>;\n        color: <?php the_field(\'text_color\'); ?>;\n    }\n</style>\n

\n\n

这将创建一个基本的推荐块作为简单的起点。ACF 负责 Gutenberg 内的 JavaScript 处理，因此您所要做的就是担心 PHP 方面的事情。

\n\n

这意味着您可以像我们（ACF 粉丝）习惯的那样使用get_field()和运行。在不使用这种本机方式的情况下混合 ACF 和古腾堡可能会引起麻烦，并且可能需要插件通过 WordPress REST API 访问字段。the_field()

\n\n

注意：ACF 对古腾堡块的支持需要 ACF 版本 5.8 或更高版本。

\n