向核心 Rss 块 Gutenberg 添加自定义属性

Question

我正在尝试向核心古腾堡块添加额外的切换按钮，除了小部件块和特别是 rss 块之外，所有功能都工作正常。

• 添加一键
• 在按钮上单击添加新属性
• 该属性未保存并阻止崩溃

这是渲染API路径：

domain.com/wp-json/wp/v2/block-renderer/core/rss?context=edit&attributes%5Bcolumns%5D=2&attributes%5BblockLayout%5D=list&attributes%5BfeedURL%5D=https%3A%2F%domain.com%2Fblog%2F&attributes%5BitemsToShow%5D=5&attributes%5BdisplayExcerpt%5D=false&attributes%5BdisplayAuthor%5D=false&attributes%5BdisplayDate%5D=false&attributes%5BexcerptLength%5D=55&attributes%5Bdatatext%5D=el1683204085047&post_id=2&_locale=user

它显示 400 Bad request，如果您检查 Rest API URL，则有 datatext 属性，这是我正在尝试添加的自定义属性。

错误：react.js?ver=18.2.0:1120 未捕获错误：对象作为 React 子对象无效（找到：带有键 {error, errorMsg} 的对象）。如果您打算渲染子集合，请改用数组。

请建议我向 core/rss wordpress 块添加额外属性的最佳方法。

Answer 1

我在 WP 6.2 的

core/rss

块上复制了您的错误。通过过滤器

blocks.registerBlockType

使用新属性扩展块，然后进行编辑然后保存，直到添加

feedURL

为止。

由于 RSS 块使用服务器端渲染，我查看了 render_callback 代码，因为 ServerSideRender 错误如下：

加载块时出错：无效参数：属性

添加

feedURL

后，例如：

没有错误

<!-- wp:rss {"datatext":"test"} /-->

错误

<!-- wp:rss {"feedURL":"https://stackoverflow.com/feeds/tag?tagnames=wordpress-gutenberg\\u0026sort=newest","datatext":"test"} /-->

更新答案

在进一步测试中，我确认在 JavaScript 中使用

addFilter('blocks.registerBlockType', ...);

会直接导致

Invalid parameter(s)

错误。

当 PHP 在前端渲染动态块时，块验证失败，因为

block.json

属性与标记中保存的属性不匹配。

解决方案

使用 PHP 中的

register_block_type_args

过滤器覆盖块默认

render_callback

并同时注册额外参数。不要将 JavaScript

addFilter('blocks.registerBlockType', ...);

用于动态块。

PHP

/**
 * Customize register_block_type_args for 'core/rss' block
 */
function my_plugin_rss_block_type_args($args, $name)
{
    if ($name == 'core/rss') {
        // Replace render callback with our own function to fetch RSS 
        $args['render_callback'] = 'my_plugin_rss_render_callback';

        // Define extra 'datatext' attribute
        $extra_attributes = array(
            "datatext" => array(
                "type" => "string",
                "default" => "test"
            )
        );

        // Add the extra attribute to existing block attributes
        $args['attributes'] = array_merge($args['attributes'], $extra_attributes);
    }
    return $args;
}

add_filter('register_block_type_args', 'my_plugin_rss_block_type_args', null, 2);


/**
 * Custom render callback for RSS block
 */
function my_plugin_rss_render_callback($attributes)
{
    // Use the core implementation of render_block_core_rss( $attributes ) 
    // as your template then modify the code needed to retrieve the RSS feed
   
    // Access new 'datatext' attribute
    $datatext = $attributes['datatext'] ? $attributes['datatext'] : '';

    return sprintf('<h2>%s</h2><ul %s>%s</ul>', $datatext, $wrapper_attributes, $list_items);
}

参考：

core/rss

渲染回调函数。

JavaScript

// Add UI Control to edit extra attribute in Editor
const withDatatextControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

        if (props.name !== 'core/rss') {
            return (<BlockEdit {...props} />)
        }

        return (
            <>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody>
                        <TextControl
                            label="My Datatext"
                            value={props.attributes.datatext}
                            onChange={(value) => props.setAttributes({ datatext: value })}
                        />
                    </PanelBody>
                </InspectorControls>
            </>
        );
    };
}, 'withDatatextControl');

addFilter(
    'editor.BlockEdit',
    'core/rss',
    withDatatextControl
);