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

Question

我是 Wordpress Gutenberg 块的新手。我创建了一个画廊插件，我希望用户能够通过简单地从弹出窗口中选择所需的画廊来插入画廊简码 window。我使用 jQuery text() 函数成功地从弹出窗口 window 中注入短代码，但内容不会被保存。但是，当我输入一些文本时，一切正常。

这是我的古腾堡 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
        });
    },
});

Answer 1

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

原因

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

建议

以下是我建议您制作此组件的一些建议（考虑到这不是服务器端块）。

我将使用 JSX 而不是 JavaScript 的 ES5 语法。 WordPress的默认情况下，文档显示 ES5 的示例代码，但有一个选项卡可以将其更改为 JSX.
我将显示添加新图库项目的添加项目按钮。该按钮的实现可以像 core/gallery 块一样（选择多个图像时出现在底部）。
单击此添加项目会将一个新对象添加到我的 attributes 中，该对象也出现在前端，我从前端向这个新块添加值。 Gutenberg <RichText/> 组件对操作文本内容很有帮助。
更新您在 <RichText/> 上声明 onChange 事件。
同样可以实现更新和删除功能。
点击更新将采用全新的内容并保存。

注：

为了更好地了解古腾堡生态系统，我建议您熟悉以下内容：

ES6 语法也称为 ES2015。
React.js.React Documentation 是非常好的资源。
Redux 不完全，只是如何使用纯函数逻辑更新对象（纯函数是不改变输入的函数）。 Some Examples from Redux Docs
最后看看 Gutenberg 中 core blocks 的实现。从简单的开始，如段落、引用、列表等。
始终使用 setState() 或 setAttributes() 更新状态，而不是直接通过访问 this.props.attributes 或 this.props.state

奖金

您可以在 React.js 的 ComponentDidMount 生命周期中获取数据，然后更新状态。可以通过任何 API 甚至 WordPress REST API.

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

Wordpress gutenberg block - jquery generated content not saved

wordpress

jquery

block

save

wordpress-gutenberg

原因

建议

注：

奖金