加载编辑器时 WP Blocks 保存功能与编辑功能不匹配答案

【问题标题】：WP Blocks save function doesn't match edit function when editor loads加载编辑器时 WP Blocks 保存功能与编辑功能不匹配
【发布时间】：2019-12-23 17:30:58
【问题描述】：

我正在开发一个基于 https://github.com/JimSchofield/Guty-Blocks-2 的 WP Gutenberg 块，我遇到了一个问题，即加载时保存的内容与编辑器不匹配，因此我看到一个错误“此块包含意外或无效内容”。

我尝试在浏览器控制台中查看，但无法确定差异在哪里，编辑和保存功能都引用了图像，但保存功能没有存储它们。

值得注意的是，一旦第一次加载块，使用并保存帖子，它就可以在前端正常工作。当您返回编辑器时，它就不再起作用了。

import './__block__.view.scss';
import './__block__.editor.scss';

const {
    registerBlockType,
    getBlockDefaultClassName
} = wp.blocks;

const { 
    InspectorControls,
    MediaUpload
} = wp.editor;

const {
    Button
} = wp.components;

registerBlockType('__namespace__/__block__', {
    title: '__prettyname__(noCase)',
    icon: '__icon__',
    category: '__category__',

    attributes: {
        imgUrl: {
            type: 'array',
            source: 'children',
            selector: 'img',
        },
    },

    edit({ attributes, className, setAttributes }) {

        //Destructuring the images array attribute
        const {images = []} = attributes;

        // This removes an image from the gallery
        const removeImage = (removeImage) => {
            //filter the images
            const newImages = images.filter( (image) => {
                //If the current image is equal to removeImage the image will be returnd
                if(image.id != removeImage.id) {
                    return image;
                }
            });

            //Saves the new state
            setAttributes({
                images:newImages,
            })
        }

        //Displays the images
        const displayImages = (images) => {
            return (
                //Loops throug the images
                images.map( (image) => {
                    return (
                    <div className="gallery-item-container">
                            <img className='gallery-item' src={image.url} key={ images.id } />
                            <div className='remove-item' onClick={() => removeImage(image)}><span class="dashicons dashicons-trash"></span></div>
                            <div className='caption-text'>{image.caption[0]}</div>
                    </div>
                    )
                })

            )
        }

        //JSX to return
        return (
            <div>
                <MediaUpload
                    onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
                    type="image"
                    multiple={true}
                    value={images}
                    render={({open}) => (
                        <Button className="select-images-button is-button is-default is-large" onClick={open}>
                            Add images
                        </Button>
                    )}
                />
                <br />
                <div class="modal__img">
                    <div class="flexslider">
                        <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                    </div>
                </div>
            </div>
        );
    },

    save({attributes}) {
        // Destructuring the images array attribute
        const { images = [] } = attributes;

        // Displays the images
        const displayImages = (images) => {
            return (
                images.map( (image,index) => {
                    return (
                            <li><img
                                className='lazy'
                                key={images.id}
                                data-src={image.url}
                                data-slide-no={index}
                                data-caption={image.caption[0]}
                                alt={image.alt}
                                /></li>
                    )
                })
            )
        }

        //JSX to return
        return (
            <div class="modal__img">
                <div class="flexslider">
                    <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                </div>
            </div>
        );

    },
});

我希望该块在返回编辑器时输出原始 HTML，但这种行为不起作用。

【问题讨论】：

您需要确保save函数返回的HTML结构与save函数保存到数据库的HTML结构相同。
比较两个版本帮助我找到了很多类似的错误，并且为了比较我使用了diffchecker.com

标签： javascript wordpress wordpress-gutenberg

【解决方案1】：

尝试在编辑和保存函数中传递props而不是属性，然后简单地使用

var attributes = props.attributes;

更多参考请阅读这些examples中的代码。

【讨论】：

【解决方案2】：

在保存和编辑功能中，您都从属性道具中引用图像。然而，当您注册您的块并设置属性时，您只有 imageUrl 作为属性。这意味着图像永远不会存储在数据库中，并且在您返回编辑时也不存在。

添加图片作为属性应该可以解决这个问题。

你有什么

attributes: {
    imgUrl: {
        type: 'array',
        source: 'children',
        selector: 'img',
    },
},

应该是什么

attributes: {
    images: {
        type: 'array',
        default: []
    },
},

【讨论】：