Gutenberg开发：如何在编辑器的JavaScript文件中获取文章浏览量

你遇到的问题核心原因是Gutenberg编辑器通过WordPress REST API获取文章数据，默认不会返回自定义的文章元字段，需要主动注册字段到REST API才能在JS侧调用，完整实现流程如下：

实现步骤 #

1. 注册自定义字段到REST API #

在主题的functions.php文件或者自定义插件的主文件中添加以下代码，假设你存储文章浏览量的自定义字段键名为post_views_count，可根据实际情况修改：

add_action('init', function () {
    // 仅对post文章类型生效，如需支持自定义文章类型可替换对应post type名称
    register_post_meta('post', 'post_views_count', [
        'show_in_rest' => true, // 核心配置：允许REST API返回该字段
        'single' => true,
        'type' => 'number', // 字段类型，浏览量为数字类型
        // 可选配置：如果需要允许编辑器端修改浏览量，添加权限校验
        'auth_callback' => function () {
            return current_user_can('edit_posts');
        }
    ]);
});

2. 在editor.js中调取浏览量数据 #

Gutenberg内置的useSelect钩子可以直接获取当前编辑文章的元数据，在你的自定义区块编辑组件中直接调用即可：

import { useSelect } from '@wordpress/data';

const Edit = () => {
    // 获取当前文章的浏览量数据
    const postViews = useSelect((select) => {
        const postMeta = select('core/editor').getEditedPostAttribute('meta');
        // 字段不存在时默认返回0避免渲染报错
        return postMeta?.post_views_count || 0;
    }, []);

    return (
        <div className="custom-views-block">
            <p>文章总浏览量：{postViews}</p>
        </div>
    );
};

注意事项 #

• 如果你使用的是WordPress 6.0以上的站点编辑器场景，可将select('core/editor')替换为select('core/post')适配新的存储结构
• 注册字段时填写的键名必须和你用get_post_meta读取时的键名完全一致，注意大小写区分
• 如果需要在编辑器端修改浏览量数值，可配合useDispatch钩子调用editPost方法更新meta字段值

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