在WordPress Gutenberg中注册归档文章状态并添加后台设置按钮

问题描述 #

需要给旧文章创建一个「归档（Archived）」状态，这类文章不对外展示但暂不删除。已通过以下代码完成状态注册：

function register_archived_post_status() {
    register_post_status('archived', array(
        'label'                     => _x('Archived', 'post'),
        'public'                    => true,
        'exclude_from_search'       => true,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop('Archived <span class="count">(%s)</span>', 'Archived <span class="count">(%s)</span>'),
    ));
}
add_action('init', 'register_archived_post_status');

但在Gutenberg编辑器里找不到设置该状态的按钮——当前WordPress改用按钮形式展示文章状态，且官方文档提到自定义状态的后台界面支持仍在开发中，需实现Gutenberg中设置该状态的功能。

已尝试操作 #

完成文章状态的注册，需要创建对应的后台设置按钮。

解决方案 #

要让自定义状态在Gutenberg中显示，需补充状态注册的REST支持，同时添加编辑器端的状态选项：

1. 完善自定义状态注册代码 #

在原注册函数中添加show_in_rest和capability参数，确保Gutenberg能通过REST API识别该状态：

function register_archived_post_status() {
    register_post_status('archived', array(
        'label'                     => _x('Archived', 'post'),
        'public'                    => true,
        'exclude_from_search'       => true,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop('Archived <span class="count">(%s)</span>', 'Archived <span class="count">(%s)</span>'),
        // 新增：支持REST API（Gutenberg依赖）
        'show_in_rest'              => true,
        'rest_base'                 => 'archived',
        // 新增：设置修改状态的权限
        'capability'                => 'edit_posts',
    ));
}
add_action('init', 'register_archived_post_status');

2. 添加Gutenberg编辑器的状态按钮 #

通过JavaScript将自定义状态添加到编辑器的状态选择器中，步骤如下：

步骤1：创建JS文件（示例路径：主题目录/js/custom-post-status.js）

// 将自定义状态添加到编辑器的状态下拉选项
wp.hooks.addFilter(
    'editor.PostStatusList',
    'custom/archived-status',
    (statusList) => {
        statusList.push({
            name: 'archived',
            label: '归档',
            className: 'editor-post-status-archived'
        });
        return statusList;
    }
);

// 注册状态切换按钮
wp.plugins.registerPlugin('custom-archived-status', {
    render: () => {
        const currentStatus = wp.data.select('core/editor').getEditedPostAttribute('status');
        
        return wp.element.createElement(
            wp.components.Button,
            {
                isPrimary: currentStatus === 'archived',
                onClick: () => {
                    wp.data.dispatch('core/editor').editPost({
                        status: currentStatus === 'archived' ? 'publish' : 'archived'
                    });
                },
                className: 'editor-post-status__button'
            },
            currentStatus === 'archived' ? '已归档' : '设为归档'
        );
    }
});

步骤2：通过PHP加载该JS文件

在主题的functions.php中添加代码，将JS文件加载到Gutenberg编辑器：

function enqueue_custom_post_status_script() {
    if (is_admin() && get_current_screen()->is_block_editor()) {
        wp_enqueue_script(
            'custom-post-status',
            get_template_directory_uri() . '/js/custom-post-status.js',
            array('wp-editor', 'wp-data', 'wp-components', 'wp-hooks'),
            wp_get_theme()->get('Version'),
            true
        );
    }
}
add_action('admin_enqueue_scripts', 'enqueue_custom_post_status_script');

3. 可选：添加快速编辑支持（批量操作） #

如果需要在文章列表的快速编辑中设置归档状态，添加以下代码：

// 快速编辑添加归档状态选项
function add_archived_status_quick_edit($actions, $post) {
    if ($post->post_type === 'post' && current_user_can('edit_posts')) {
        $selected = ($post->post_status === 'archived') ? ' selected="selected"' : '';
        $actions .= '<select name="post_status" class="post_status">';
        $actions .= '<option value="publish"' . selected($post->post_status, 'publish', false) . '>发布</option>';
        $actions .= '<option value="draft"' . selected($post->post_status, 'draft', false) . '>草稿</option>';
        $actions .= '<option value="archived"' . $selected . '>归档</option>';
        $actions .= '</select>';
    }
    return $actions;
}
add_filter('quick_edit_custom_box', 'add_archived_status_quick_edit', 10, 2);

// 保存快速编辑的状态修改
function save_archived_status_quick_edit($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    if (isset($_POST['post_status']) && $_POST['post_status'] === 'archived') {
        wp_update_post(array(
            'ID' => $post_id,
            'post_status' => 'archived'
        ));
    }
}
add_action('save_post', 'save_archived_status_quick_edit');

内容的提问来源于stack exchange，提问作者Tom Haxell