Question

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

这是我的古腾堡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)，而在古腾堡中，方法为setAttributes(obj)，实际上是React.js setState()的包装器。

建议

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

我将使用JSX代替JavaScript的ES5语法。 WordPress的默认情况下，文档显示示例代码ES5，但是有一个选项卡将其更改为JSX。
我将显示添加项目按钮，该按钮将添加新的图库项目。该按钮的实现可以像core/gallery块一样（选择多个图像时显示在底部）。
单击此添加项会将一个新对象添加到我的attributes中，该对象也出现在前端，然后从前端将值添加到该新块中。古腾堡<RichText/>组件对于处理文本内容非常有帮助。
更新您在onChange上的<RichText/>事件状态。
可以实现类似的更新和删除功能。
单击更新将获取全部新内容并保存。

注意：

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

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生成的内容未保存

1 个答案:

原因

建议

注意：

奖金