WordPress Gutenberg自定义块属性未在编辑器侧边栏显示求助

你遇到的核心问题是：PHP中注册块属性仅定义了块的数据结构，不会自动生成编辑器侧边栏的UI控件，需要在块的JS编辑器代码中手动添加属性控制面板。

具体解决步骤 #

1. 在JS编辑器脚本中添加侧边栏控件 #

打开对应edeventblocks的JS文件，在块的edit函数中使用InspectorControls组件添加属性面板，以你的when属性为例：

wp.blocks.registerBlockType('ed/eventlist', {
    title: '活动列表', // 替换为你的块标题
    attributes: {
        when: {
            type: 'string',
            enum: ['past', 'future'],
            default: 'future' // 可选：设置属性默认值
        }
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const { when } = attributes;

        return (
            <>
                {/* 块在编辑器中的预览内容 */}
                <div>活动列表预览</div>
                
                {/* 侧边栏属性控制面板 */}
                <wp.blockEditor.InspectorControls>
                    <wp.components.PanelBody title="活动设置">
                        <wp.components.SelectControl
                            label="显示活动类型"
                            value={when}
                            options={[
                                { label: '未来活动', value: 'future' },
                                { label: '过往活动', value: 'past' }
                            ]}
                            onChange={(newVal) => setAttributes({ when: newVal })}
                        />
                    </wp.components.PanelBody>
                </wp.blockEditor.InspectorControls>
            </>
        );
    },
    save: () => {
        // 若使用PHP的render_callback渲染前端，此处返回null即可
        return null;
    }
});

2. 确保JS脚本依赖正确 #

在PHP中注册编辑器脚本时，必须依赖Gutenberg核心JS包，否则组件无法正常加载：

wp_enqueue_script(
    'edeventblocks',
    plugin_dir_url(__FILE__) . 'js/editor.js', // 替换为你的JS文件实际路径
    array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components'), // 必须的核心依赖
    filemtime(plugin_dir_path(__FILE__) . 'js/editor.js') // 用文件修改时间做版本号，避免缓存问题
);

3. 保持PHP与JS的属性定义一致 #

确保PHP中register_block_type的attributes配置和JS中的attributes完全匹配，避免数据同步异常。

关键说明 #

Gutenberg块开发分为数据层（PHP/JS的attributes定义）和UI层（JS的edit/save函数），属性不会自动生成编辑UI，必须手动在edit函数中添加对应控件，才能在侧边栏显示可编辑选项。

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