Wordpress gutenberg块-未保存jquery生成的内容

我是Wordpress Gutenberg blocks的新手。我创建了一个图库插件，我希望用户能够通过从弹出窗口选择所需的图库来插入图库短代码。我使用jQuery文本函数成功地从弹出窗口插入短代码，但内容不会被保存。然而，当我输入一些文本时，一切都正常

这是我的古腾堡js：

var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
RichText = wp.editor.RichText,
blockStyle = { backgroundColor: '#0000cc', color: '#fff', padding: '1%', margin: '1%', border: 'none', boxShadow: '5px 5px 5px #000', cursor: 'pointer' };

registerBlockType( 'prtxgal/block', {
    title: 'Protex gallery',

    icon: 'images-alt',

    category: 'common',

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'div',
        }
    },

    edit: function(props) {
        var content = props.attributes.content;

        function onChangeContent( newContent ) {
            props.setAttributes( { content: newContent } );
        }

        return[ el(
            'button', { className: 'button add_prtxgal', /*style: blockStyle*/}, 'Choose gallery'
            ),
            el (RichText,
            {
                tagName: 'div',
                className: props.className,
                onChange: onChangeContent,
                value: content,
            }
            ),
        ];
    },

    save: function(props) {
        var content = props.attributes.content;

        return el( RichText.Content, {
            tagName: 'div',
            className: props.className,
            value: content
        });
    },
});

jQuery和前端框架（如React.js）的组合实际上是一个库而不是框架，Angular不被认为是一个好的组合，因此建议不要使用它

原因 前端框架维护每个组件的状态，如果我们通过jQuery或使用JS访问节点来更改该组件，则这些状态不会在框架中更新。对于更新状态，框架在React中提供了自己的方法，方法是setStateobj，而在Gutenberg中，方法是setAttributesobj，它实际上是React.js setState的包装器

建议 考虑到这不是服务器端块，下面是我建议您如何制作此组件的一些建议

我将使用JSX而不是JavaScript的ES5语法。WordPress docs默认显示ES5的示例代码，但有一个选项卡可供选择 将其更改为JSX。 我将显示添加项目按钮，用于添加新的库项目。该按钮的实现可以与底部显示的core/gallery块相同，同时选择多个图像。 单击此添加项将在“我的属性”中添加一个新对象，该属性也会显示在前端，并且我会从前端将值添加到此新块中。Gutenberg组件对于操纵文本内容非常有用。 在上更新更改事件的状态。 类似地，可以实现更新和删除功能。 单击“更新”将获取整个新内容并保存它。 注: 为了更好地了解古腾堡生态系统，我建议您熟悉以下内容：

ES6语法也称为ES2015。 React.js。这是非常好的资源。 Redux不是完全的，而是如何使用纯函数更新对象逻辑纯函数是不改变输入的函数。 最后，看一下Gutenberg中现有的实现。先从简单的开始，如段落、引用、列表等。 始终使用setState或setAttributes更新状态，而不是直接访问this.props.attributes或this.props.state 奖金 您可以在React.js的ComponentDidMount生命周期中获取数据，然后更新状态。可以通过任何API甚至WordPress REST API获取数据。

---

这里有一个视频来形象化我的问题：你的欢迎。如果答案能解决你的问题，请接受。