Wordpress Gutenberg块-jQuery生成的内容未保存 [英] Wordpress gutenberg block - jquery generated content not saved

问题描述

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

I am new to Wordpress Gutenberg blocks. I created a gallery plugin and I want a user to be able to insert gallery shortcode by simply choosing the desired gallery from a popup window. I use jQuery text() function to inject shortcodes from the popup window with success but the content will not be saved. However, when I type in some text everything works fine.

这是我的古腾堡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的组合被认为不是很好的组合，因此建议不要使用它.

The combination of jQuery and front end frameworks like React.js (in reality a library not framework) and Angular isn't considered a good combinations so it is recommended not to use it.

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

Frontend frameworks maintains the state of each component and if we change that component via jQuery or by accessing nodes with JS then those states aren't updated in framework. For updating states framework provides their own methods in React the method is setState(obj) while in Gutenberg the method is setAttributes(obj) which is actually a wrapper around React.js setState().

以下是一些建议，我建议您制作此组件(考虑到这不是服务器端块).

Here are the few suggestions how I suggest you to make this component (considering this is not a Server Side Block).

1. 我将使用JSX而不是JavaScript的ES5语法. WordPress的 默认情况下，docs显示ES5的示例代码，但是有一个选项卡 将其更改为JSX.
2. 我将显示添加项目"按钮，该按钮将添加新的图库项目.该按钮的实现可以与core/gallery块相同(选择多个图像时显示在底部).
3. 单击此添加项会将一个新对象添加到我的attributes中，该对象也出现在前端，从前端我将值添加到此新块中.古腾堡<RichText/>组件对于处理文本内容非常有帮助.
4. 更新您声明<RichText/>上的onChange事件.
5. 可以类似地更新和删除功能.
6. 单击更新将获取全部新内容并保存.

1. I will use JSX instead of ES5 syntax of JavaScript. WordPress docs by default shows sample code of ES5 but there is a tab to change it to JSX.
2. I will show the Add Item button which adds new Gallery Item. The implementation of that button can be same like core/gallery block (present on bottom while selecting more than one image).
3. Clicking on this Add Item will add a new object in to my attributes which also appear on frontend and from frontend I add values into this new block. Gutenberg <RichText/> component is very helpful for manipulating text content.
4. Update you state onChange event on <RichText/>.
5. Similarly updating and deleting functionalities can be implemented.
6. Clicking on update will take that whole new content and save it.

注意:

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

Note:

For better understanding of Gutenberg ecosystem I recommend you to familiarize yourself with following things:

• ES6语法也称为ES2015.
• React.js.反应文档是非常好的资源.
• 不是完全使用Redux，而是使用纯函数逻辑来更新对象(纯函数是不会更改输入的函数). 来自Redux文档的一些示例
• 最后看看核心块的实现存在于古腾堡.从简单的第一个开始，例如段落，引用，列表等.
• 始终使用setState()或setAttributes()更新状态，而不直接访问this.props.attributes或this.props.state

• ES6 syntax also knows as ES2015.
• React.js.React Documentation is very good resource for this.
• Redux not completely but just how to update object using pure functions logic (pure functions are functions that don't change input). Some Examples from Redux Docs
• In the end look at the implementations of core blocks present in Gutenberg. Starts from easy one first like paragraph, quote, list etc.
• Always update state using setState() or setAttributes() not directly by accessing this.props.attributesor this.props.state

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

• You can make fetch data in ComponentDidMount lifecycle of React.js and then update the states. Data can be fetch through any API or even WordPress REST API.

这篇关于Wordpress Gutenberg块-jQuery生成的内容未保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！