Gutenberg编辑器中自定义区块附加CSS类不显示问题求助

核心原因 #

自定义区块默认支持附加CSS类，但未显式声明supports.className，或编辑器缓存导致类名未同步，会出现编辑器内不显示类名但前端正常的情况。

解决方案 #

1. 显式开启附加CSS类支持 #

在区块配置中添加supports字段，明确声明支持自定义类名：

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

export default {
    name: 'erik-dekker/button',
    title: 'Knop',
    icon: 'button',
    category: 'erik-dekker',
    // 添加supports配置，开启className支持
    supports: {
        className: true,
    },
    edit: () => {
        const blockProps = useBlockProps();

        return (
            <div { ...blockProps }>hello world!</div>
        );
    },
    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <div { ...blockProps }>hello world!</div>
        );
    }
}

2. 同步编辑器缓存 #

• 刷新Gutenberg编辑器页面
• 强制清除浏览器缓存（快捷键：Ctrl+Shift+R / Cmd+Shift+R）
• 本地开发环境需重启服务并重新构建区块代码

验证方式 #

修改后重新添加区块，通过浏览器开发者工具查看编辑器内区块的HTML结构，确认附加CSS类已出现在最外层div元素上。

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