wordpress 添加自定义属性到核心RSS块 gutenberg

yhuiod9q  于 2023-05-16  发布在  WordPress
关注(0)|答案(1)|浏览(141)

bounty已结束。回答此问题可获得+50声望奖励。赏金宽限期20小时后结束。raju_odi正在寻找规范答案:请给予一个明确的解决方案。

我正试图添加额外的切换按钮,核心 gutenberg 块和所有的工作正常,除了小部件块,特别是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}的对象)。如果你想呈现一个子元素的集合,请使用数组。

请建议我最好的方法来添加额外的属性到核心/RSS WordPress块。

e5nqia27

e5nqia271#

我在core/rss块上复制了WP 6.2中的错误。通过过滤器blocks.registerBlockType使用新属性扩展块,然后编辑,然后保存,直到添加feedURL
由于RSS块使用服务器端渲染,我查看了render_callback代码,因为ServerSideRender错误读取:添加feedURL后的Error loading block: Invalid parameter(s): attributes,例如:

无错误

<!-- 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过滤器覆盖block默认值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
);

相关问题