Wordpress gutenberg block - jquery generated content not saved

故事扮演 提交于 2019-12-25 03:13:52

问题


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.

Here is my Gutenberg 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
        });
    },
});

回答1:


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.

Reason

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().

Suggestion

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

  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 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

Bonus

  • 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.


来源:https://stackoverflow.com/questions/54803789/wordpress-gutenberg-block-jquery-generated-content-not-saved

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!