为WordPress核心RSS Gutenberg区块加自定义属性遇崩溃求解决方案

问题根源 #

RSS这类核心小工具区块的属性存在严格的服务器端校验，自定义属性未在区块的属性Schema中注册时，Block Renderer API会返回400错误；而编辑器未正确处理该错误，将错误对象直接作为React子元素渲染，最终导致区块崩溃。

最佳实现步骤 #

1. 在PHP端注册自定义属性（关键） #

服务器端的区块渲染会校验属性合法性，必须通过block_type_metadata_settings过滤器在PHP端扩展RSS区块的属性定义：

add_filter('block_type_metadata_settings', function($settings, $metadata) {
    if ($metadata['name'] !== 'core/rss') {
        return $settings;
    }
    $settings['attributes']['datatext'] = [
        'type' => 'string',
        'default' => '',
        'source' => 'attribute',
        'selector' => '.wp-block-rss',
        'attribute' => 'data-text'
    ];
    return $settings;
}, 10, 2);

2. 在JS端扩展区块属性定义 #

通过blocks.registerBlockType过滤器同步更新编辑器端的区块属性配置：

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'your-plugin/rss-add-custom-attribute',
    (settings, name) => {
        if (name !== 'core/rss') return settings;
        return {
            ...settings,
            attributes: {
                ...settings.attributes,
                datatext: {
                    type: 'string',
                    default: '',
                    source: 'attribute',
                    selector: '.wp-block-rss',
                    attribute: 'data-text'
                }
            }
        };
    }
);

3. 添加编辑器切换按钮并处理属性更新 #

使用editor.BlockEdit过滤器注入自定义按钮，点击时更新datatext属性：

wp.hooks.addFilter(
    'editor.BlockEdit',
    'your-plugin/rss-add-edit-button',
    (BlockEdit, props) => {
        if (props.name !== 'core/rss') return BlockEdit;
        return wp.element.createElement(
            wp.element.Fragment,
            null,
            BlockEdit,
            wp.element.createElement(wp.editor.BlockControls, {
                controls: [
                    {
                        icon: 'edit',
                        title: '设置自定义文本',
                        onClick: () => {
                            const newDatatext = `el${Date.now()}`;
                            props.setAttributes({ datatext: newDatatext });
                        }
                    }
                ]
            })
        );
    }
);

4. 保存自定义属性到区块标记 #

通过blocks.getSaveContent.extraProps过滤器，将自定义属性添加到区块的保存HTML中：

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'your-plugin/rss-save-custom-attribute',
    (extraProps, blockType, attributes) => {
        if (blockType.name !== 'core/rss') return extraProps;
        return {
            ...extraProps,
            'data-text': attributes.datatext
        };
    }
);

关键说明 #

• 必须同时在PHP和JS端注册属性，确保前后端校验一致，避免API报错
• 自定义属性的source配置要和保存的HTML属性对应，保证属性能正确序列化/反序列化
• 若不需要前端显示该属性，可去掉source配置，仅保留type和default

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