gutenberg blockListBlock 过滤器块控件呈现多次

Question

我不知道为什么 Gutenberg 渲染我添加的 BlockControl 3 次，以及其他不是 'core/paragraph' 的组件。我的代码：

const filter_text_highlight_color = createHigherOrderComponent( (BlockListBlock) => {
    return (props) => {

            if (props.name === 'core/paragraph') {

                const startEditing = () => {
                    console.log('hello!');
                }

                return ([
                
                    
                    <BlockListBlock {...props} />,
                    <BlockControls>
                        <ToolbarButton
                            name="link"
                            icon="text-page"
                            title={ __('Highlight Text') }
                            onClick={ startEditing }
                        />
                    </BlockControls>,
                  
                  
                ])

            } else {

                return (
                    <BlockListBlock {...props} />
                )
            }
    }
}, 'filter_text_highlight_color'
); 

addFilter(
    'editor.BlockListBlock',
    'bwwpcode/text-highlight-color',
    filter_text_highlight_color,
)

对于发生这种情况的原因以及解决方法的任何建议，我将不胜感激。

Answer 1

我想通了！ BlockListBlock 不能不用于向块添加控件。该过滤器的工作原理与 BlockEdit 过滤器完全不同。

更改为 BlockEdit 过滤器后一切正常！

gutenberg blockListBlock 过滤器块控件呈现多次

gutenberg blockListBlock filter block control renders multiple times

wordpress

block

filter

wordpress-gutenberg