古登堡块无法保存富文本

时间:2020-02-11 作者:Astrid

我正在创建一个块并使用富文本保存一些文本这是我的编辑功能。

    edit: (props) => {

    const { attributes: { content, backgroundImage }, setAttributes } = props;

    const onImageSelect = (imageObject) => {
        setAttributes({ backgroundImage: imageObject.sizes.full.url });
    }

    const onChangeContent = (newContent) => {
        setAttributes({ content: newContent });
    };

    console.log(content);

    return (
        <div className={props.className}>

            <MediaUpload
                onSelect={onImageSelect}
                type="image"
                value={backgroundImage}
                render={({ open }) => (
                    <button onClick={open}>
                        Upload Image!
                    </button>
                )}
            />

            <img src={backgroundImage} alt="eherh" />



            <div className={\'caption\'}>
                <RichText
                    tagName={"p"}
                    className={\'imgCtaContent\'}
                    onChange={onChangeContent}
                    value={content}
                    placeholder="Enter text..."
                />
            </div>

        </div>
    );
},
这是我的保存功能:-

    save: (props) => {

    return (
        <div className={props.className}>

            <RichText.Content tagName={"p"} value={props.attributes.content} />

        </div>
    );
},
当我在编辑块时,我可以看到当我在块中键入时控制台。日志(内容)显示内容,但当我保存页面时,不会保存文本。

我哪里做错了?

1 个回复
SO网友:WebElaine

有两件事需要尝试-删除一些大括号{},因为只有在引用变量时才需要这些大括号,并尝试直接调用onChange:

        <div className={\'caption\'}>
            <RichText
                tagName="p"
                className=\'imgCtaContent\'
                onChange={ ( content ) => { setAttributes( { content } ) } }
                value={content}
                placeholder="Enter text..."
            />
        </div>
也在save(), 在RichText上设置值。内容不是必需的,可能会让人困惑。仅使用

return (
    <div className={props.className}>

        <RichText.Content />

    </div>
);

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件,它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作,我理解其中的一些原因。我已经更新了代码,现在需要一种方法来测试更新后的代码,然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装,但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装,以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式,还是有更快的测试环境可用。