WordPress区块设置默认背景色后不生成标准样式类，如何解决？

在block.json中为自定义区块设置默认背景色属性：

"attributes": {
    "backgroundColor": {
        "type": "string",
        "default": "rose-red"
    }
}

其中rose-red是theme.json调色板中定义的颜色别名。此时区块前端不会自动生成has-background has-rose-red-background-color标准样式类，但移除默认属性后手动在后台选择颜色，或选择非默认颜色时，这些样式类能正常生成。需要实现既应用默认颜色，又自动生成对应标准样式类的效果。

1. 确保区块支持背景色配置 #

首先在block.json的supports字段中开启背景色支持，这是自动生成样式类的前提：

"supports": {
    "color": {
        "background": true
    }
}

2. 方法一：通过PHP渲染回调手动添加类 #

如果你的区块使用PHP渲染，在注册区块时指定render_callback函数，在函数中根据backgroundColor属性生成对应样式类：

function render_custom_block($attributes, $content) {
    // 基础区块类名
    $classes = 'wp-block-custom-block';
    
    // 若存在背景色属性（包括默认值），添加标准样式类
    if (isset($attributes['backgroundColor'])) {
        $classes .= ' has-background has-' . esc_attr($attributes['backgroundColor']) . '-background-color';
    }
    
    return '<div class="' . esc_attr($classes) . '">' . $content . '</div>';
}

// 注册区块时关联渲染回调
register_block_type('namespace/custom-block', array(
    'render_callback' => 'render_custom_block',
    // 其他配置...
));

3. 方法二：通过JavaScript编辑器与保存组件处理 #

如果是基于React的区块，在edit.js和save.js中手动为区块容器添加样式类：

edit.js 编辑器组件

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit({ attributes }) {
    const blockProps = useBlockProps({
        className: attributes.backgroundColor 
            ? `has-background has-${attributes.backgroundColor}-background-color` 
            : ''
    });

    return (
        <div {...blockProps}>
            {/* 区块编辑内容 */}
        </div>
    );
}

save.js 保存组件

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const blockProps = useBlockProps.save({
        className: attributes.backgroundColor 
            ? `has-background has-${attributes.backgroundColor}-background-color` 
            : ''
    });

    return (
        <div {...blockProps}>
            {/* 区块保存内容 */}
        </div>
    );
}

WordPress区块自动生成has-*样式类的逻辑中，block.json里定义的默认属性不会被标记为「用户主动设置的值」，因此不会自动触发样式类的生成。通过手动在渲染或编辑器组件中处理属性值，就能强制生成对应的标准样式类。

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