Gutenberg Selectors API无法生效，是否存在功能理解偏差？

你的核心问题在于对Selectors API的作用理解有偏差，加上代码里的小错误导致功能失效。以下是具体修正方案：

1. 先修正代码中的明显错误 #

你的index.js里useBlockProps.()多了一个多余的点，正确调用应该是useBlockProps()：

edit: () => {
    return (
        <div {...useBlockProps()}>
            <h2>I should have color</h2>
            <p>I should have background</p>
        </div>
    );
}
save: () => {
    return (
        <div {...useBlockProps.save()}>
            <h2>I should have color</h2>
            <p>I should have background</p>
        </div>
    );
}

2. 正确理解Selectors API的作用 #

Selectors API不是自动把样式类注入到子元素，而是用来修改Gutenberg自动生成的CSS规则的目标选择器。比如你配置了color.text的选择器为.wp-block-example-test > h2，Gutenberg会生成这样的CSS：

.wp-block-example-test.has-blue-color > h2 {
    color: #0000ff;
}

样式类（比如has-blue-color）仍然会添加在区块的根元素上，CSS通过根类定位到子元素。你之前误以为类会直接加到h2/p上，这是对功能的误解。

3. 修正后的block.json配置 #

不需要手动指定root选择器（默认就是.wp-block-example-test），保持配置简洁：

{
    "apiVersion": 3,
    "name": "example/test",
    "title": "Test Block",
    "category": "widgets",
    "supports": {
        "html": false,
        "color": {
            "text": true,
            "background": true
        }
    },
    "selectors": {
        "color": {
            "text": ".wp-block-example-test > h2",
            "background": ".wp-block-example-test > p"
        }
    }
}

4. 验证生效步骤 #

1. 在编辑器中添加这个测试区块
2. 打开颜色面板，设置文本颜色和背景色
3. 查看页面的CSS样式，应该能看到针对h2和p的颜色规则
4. 前端页面中，根元素会带有has-{color}-color和has-{color}-background-color类，对应的子元素会应用样式

常见误区提醒 #

• 不要随意设置__experimentalSkipSerialization: true，这会阻止Gutenberg生成默认的样式类，导致CSS规则无法匹配
• Selectors API仅作用于Gutenberg自动生成的全局样式，如果你需要给子元素单独添加类，应该手动处理（比如使用useColorProps获取颜色类，然后传递给子元素）

内容的提问来源于stack exchange，提问作者Chris Morris