根据自定义属性在编辑器中为块添加自定义类

时间:2020-08-26 作者:matthew

我已经能够向core/heading 阻止使用blocks.getSaveContent.extraProps 过滤器,但是,这只会在前端添加类,我还希望该自定义类应用于编辑器中的块元素,如下所示。

enter image description here

我知道我可以使用blocks.getBlockDefaultClassName 过滤,但不知道是否可以根据指定给块的自定义属性进行过滤。如果您能在这里帮忙,我们将不胜感激。

1 个回复
最合适的回答,由SO网友:ndiego 整理而成

您可以使用editor.BlockListBlock 滤器更多信息here. 这允许您执行以下操作:

const withCustomAttributeClass = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        const { attributes } = props;
        const { yourCustomAttribute } = attributes;
        const class = yourCustomAttribute ? \'my_custom_class\' : \'\';

        return <BlockListBlock { ...props } className={ class } />;
    };
}, \'withCustomAttributeClass\' );

addFilter(
    \'editor.BlockListBlock\',
    \'your-plugin/custom-attribute-class\',
    withCustomAttributeClass
);
在上面,我只是检查属性是否存在,然后应用一个类,但是您可以在这里做各种更复杂的事情。请注意,此过滤器将该类应用于具有该自定义属性的每个块。然而props 包含所有块信息,因此如果需要,可以根据需要排除某些块。