如何在WordPress Gutenberg的JavaScript代码中使用PHP函数？

Gutenberg 运行在浏览器端，无法直接调用服务端的PHP函数，针对你提到的get_post_meta()、get_the_tags()这类需求，官方提供了两种成熟的实现方案：

方案1：调用Gutenberg内置核心数据选择器（推荐） #

WordPress已经把常用的文章数据通过REST API暴露，并封装到了wp.data对象的内置选择器中，不需要额外写复杂的PHP逻辑。

get_post_meta()的对应JS实现 #

首先需要先在服务端注册自定义字段时开启REST API暴露权限，在主题functions.php或自定义插件的PHP文件中添加以下代码：

function register_custom_meta_for_rest() {
    register_post_meta('post', '你的自定义字段名', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string', // 可根据字段实际类型调整为number/boolean/array等
    ]);
}
add_action('init', 'register_custom_meta_for_rest');

配置完成后就可以在JS中直接读取字段值：

// 获取当前文章所有已开放权限的自定义字段
const allPostMeta = wp.data.select('core/editor').getEditedPostAttribute('meta');
// 读取指定字段的值
const targetMetaValue = allPostMeta['你的自定义字段名'];

get_the_tags()的对应JS实现 #

标签属于内置分类法，不需要额外PHP配置，直接调用内置选择器即可获取：

// 获取当前编辑文章的ID
const currentPostId = wp.data.select('core/editor').getCurrentPostId();
// 获取当前文章关联的所有标签，返回结构与PHP`get_the_tags()`返回的标签对象数组一致
const postTags = wp.data.select('core').getEntityRecords('taxonomy', 'post_tag', { post: currentPostId });

方案2：通过wp_localize_script注入静态数据 #

如果需要调用的PHP函数没有对应内置选择器，可以通过服务端注入的方式，把PHP运行后的结果直接传递到JS全局变量中。
首先在PHP中注册区块脚本时添加注入逻辑：

function enqueue_custom_block_assets() {
    // 注册自定义区块的JS脚本，替换路径为你实际的JS文件路径
    wp_enqueue_script(
        'custom-block-js',
        get_template_directory_uri() . '/js/custom-block.js',
        [ 'wp-blocks', 'wp-element', 'wp-editor' ],
        filemtime( get_template_directory() . '/js/custom-block.js' )
    );

    // 注入PHP运行结果到JS全局对象
    global $post;
    wp_localize_script(
        'custom-block-js',
        'customBlockData', // JS中可以直接访问的全局变量名
        [
            'postMeta' => get_post_meta($post->ID, '你的自定义字段名', true),
            'postTags' => get_the_tags($post->ID),
            // 可在此处添加任意其他PHP函数的运行结果，都会同步到JS中
        ]
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_assets');

之后在JS中直接读取全局变量即可：

const targetMetaValue = customBlockData.postMeta;
const postTags = customBlockData.postTags;

注意：第二种方案注入的数据是页面加载时的静态数据，如果编辑过程中对应数据发生变更，需要自行做状态同步，实时性要求高的场景优先选择第一种方案。

内容的提问来源于stack exchange，提问作者Irfan Ahmed