Gutenberg RichText自定义块属性。 “数组和子项”还是“字符串和HTML”？

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。borayeris正在寻找来自信誉良好的来源的答案。

我正在尝试使用“ RichText”制作动态自定义块，并想知道如何设置其属性。通过检查Internet上的示例，有些人将其属性设置为“ Array＆Children”，但我还通过“ HTML＆Class Name”找到了示例。

我尝试了两种模式（下面的模式A和B），但它们在前端的结果完全相同。我想知道它们之间的区别，哪种更好。

模式A

attributes: {
    message: {
        type: 'array',
        source: 'children',
        selector: '.message',
    }
},

模式B

attributes: {
    message: {
        type: 'string',
        source: 'html',
        selector: '.message',
    }
},

编辑和保存功能

edit: props => {
    const {attributes:{message}, className, setAttributes} = props;
    const onChangeMessage = message => {
        setAttributes({message});
    }
    return(
        <div className={ className }>
            <RichText
                tagName = "div"
                multiline = "p"
                onChange = {onChangeMessage}
                value = {message}
            />
        </div>
    );
},
save: props => {
    const {attributes:{message}} = props;
    return (
        <div>
            <div class="message">
                <RichText.Content
                    value = {message}
                />
            </div>
        </div>
    );

},

Answer 1

属性源用于定义如何从已保存的帖子内容中提取块属性值。它们提供了一种机制，可以从保存的标记映射到块的JavaScript表示形式。

Gutenberg使用属性和属性源来解析HTML并从中提取数据。为此，古腾堡（Gutenberg）利用了hpq library，它是恰好进行这种解析的助手。每个来源属性都描述了与用于解析HTML块的hpq不同的功能。

这些属性将传递到保存和编辑功能。

属性来源取决于您的用例：

html：一个html源将从标记返回您的innerHTML。

children：使用children来源属性会将DOM节点作为孩子数组返回]

children属性更灵活，可以从块中提取复杂的HTML并对其进行编辑，并且在大多数情况下，这是必须的使用。

您可以查看另一个hpq library，也可以真正引用此list of attributes provided by RichText here