WordPress核心查询块变体更新属性后回退至原生块问题求助

核心原因 #

1. 变体激活逻辑缺失：WordPress依赖isActive回调识别块变体，若未定义该回调，更新属性时系统无法判定当前块属于你的自定义变体，直接回退到原生Query Loop。
2. 属性浅覆盖丢失数据：直接通过setAttributes({query: {include: newInclude}})替换整个query对象，会丢失原生Query Loop必备的属性（如postType、perPage），触发块验证失败。
3. 服务器端未处理自定义参数：前端设置include后，若服务器端未读取该参数筛选文章，会导致前后端数据不匹配，持续显示加载状态。

具体修复步骤 #

1. 注册变体时添加isActive回调 #

明确变体激活条件，让WordPress能识别你的自定义变体：

wp.blocks.registerBlockVariation('core/query', {
    name: 'master-query-loop',
    title: 'Master Query Loop',
    attributes: {
        namespace: 'master-query-loop',
        query: {
            include: [],
            // 保留原生Query Loop的默认属性，避免覆盖
            postType: 'post',
            perPage: 10,
        },
    },
    // 关键：判断当前块是否属于你的变体
    isActive: (blockAttributes) => {
        return blockAttributes.namespace === 'master-query-loop';
    },
});

2. 深合并方式更新query属性 #

避免替换整个query对象，保留原有属性仅更新include：

const currentQuery = attributes.query;
const newInclude = [1];
// 深合并属性，防止丢失必要参数
setAttributes({
    query: {
        ...currentQuery,
        include: newInclude
    }
});

3. 服务器端处理include参数 #

通过钩子修改查询逻辑，让服务器识别include参数：

// 修改主查询逻辑
add_action('pre_get_posts', 'master_query_loop_modify_query');
function master_query_loop_modify_query($query) {
    if (!is_admin() && $query->is_main_query() && isset($query->query_vars['include'])) {
        $include_ids = $query->query_vars['include'];
        if (!empty($include_ids)) {
            $query->set('post__in', $include_ids);
            $query->set('orderby', 'post__in'); // 按指定ID顺序显示
        }
    }
    return $query;
}

// 或自定义块渲染逻辑
add_filter('render_block_core/query', 'master_query_loop_render', 10, 2);
function master_query_loop_render($block_content, $block) {
    if (isset($block['attrs']['namespace']) && $block['attrs']['namespace'] === 'master-query-loop') {
        $include = $block['attrs']['query']['include'] ?? [];
        if (!empty($include)) {
            $posts = get_posts([
                'post__in' => $include,
                'orderby' => 'post__in',
                'posts_per_page' => count($include),
            ]);
            // 构建自定义渲染内容
            $new_content = '<div class="master-query-loop">';
            foreach ($posts as $post) {
                setup_postdata($post);
                $new_content .= sprintf('<h3>%s</h3><div>%s</div>', get_the_title(), get_the_excerpt());
            }
            wp_reset_postdata();
            $new_content .= '</div>';
            return $new_content;
        }
    }
    return $block_content;
}

4. 验证块属性完整性 #

对照原生Query Loop的block.json文件（路径wp-includes/blocks/query/block.json），确保你的变体属性包含所有必填项，避免块验证失败。

额外排查点 #

• 查看浏览器控制台是否有Block validation failed错误，这类错误是块回退的直接诱因。
• 确认MASTER_QUERY_LOOP常量值是否正确，保证namespace属性设置无误。

内容的提问来源于stack exchange，提问作者Dales Vu