gutenberg attributes

时间:2019-02-15 作者:honk31

嗨,谢谢你过来。

我尝试开发可重复使用的古腾堡积木,虽然我取得了长足的进步,但我确实缺乏理解,如何。。

所以我想用两个文本字段创建一个块。这很好,我可以编辑和保存它们,但当我重新加载编辑器时,它会抛出一个错误,即块验证失败,expected 不同于actual.

(function (blocks, editor, components, i18n, element) {
    const
        {registerBlockType} = blocks,
        {Fragment} = element,
        {RichText} = editor;

    registerBlockType(\'wu/text-image-block\', {
        title: i18n.__(\'whatever\'),
        description: i18n.__(\'yada yada\'),
        icon: \'businessman\',
        category: \'common\',
        attributes: {
            main_text: {
                type: \'array\',
                source: \'children\',
                selector: \'p\'
            },
            more_text: {
                type: \'array\',
                source: \'children\',
                selector: \'p\'
            },
        },

        edit({attributes, className, setAttributes}) {
            const { main_text, more_text } = attributes;

            return (
                <Fragment>
                    <div>
                        <div className=\'wu-ti-text\'>
                            <RichText
                                key=\'editable\'
                                tagName=\'p\'
                                placeholder={ i18n.__(\'Write some text...\') }
                                keepPlaceholderOnFocus={ true }
                                value={ main_text }
                                onChange={ function ( new_text ) {
                                    setAttributes({
                                        main_text: new_text
                                    })
                                } }
                            />
                            <RichText
                                key=\'editable\'
                                tagName=\'p\'
                                placeholder={ i18n.__(\'Optional text...\') }
                                keepPlaceholderOnFocus={ true }
                                value={ more_text }
                                onChange={ function ( new_more_text ) {
                                    setAttributes({
                                        more_text: new_more_text
                                    })
                                } }
                            />
                        </div>
                    </div>
                </Fragment>
            );
        },

        save({ attributes }) {
            const { main_text, more_text } = attributes;

            return (
                <Fragment>
                    <div>
                        <div className=\'wu-ti-text\'>
                            <RichText.Content
                                tagName="p"
                                value={ main_text }
                            />
                            <RichText.Content
                                tagName="p"
                                value={ more_text }
                            />
                        </div>
                    </div>
                </Fragment>
            );
        }
    })

})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components,
    window.wp.i18n,
    window.wp.element
);
结果很好,但当我重新加载时,块希望在richtext2中从richtext1中找到相同的内容,当然我不想要,我想要1/1和2/2,保存作品,重新编辑不需要。而且它在属性的深处,我没有传递正确的源?选择器?什么那到底是什么,我不明白。。

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

从文档中:

如果指定了选择器,则源行为将针对块中包含的相应元素运行。

您告诉您的块在同一个元素中查看两个属性的值。(第一个p标签)

将第二个选择器更改为

p: 类型的最后一个

或者给你的p标签一个id。

相关推荐