Gutenberg Block Validation Failed ( not expecting children )

依然范特西╮ 提交于 2020-01-04 13:59:07

问题


I am developing a gutenberg Testimonials block, however when saving and trying to reload it gives me block validation failure, it seems to be expecting a block without children in the carousel-inner etc.

Expected:

<div class="wp-block-wf-testimonials"><div class="slideshow carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"></div><a class="carousel-control carousel-control-prev" href="#undefined" role="button" data-slide="prev"><span class="carousel-icon carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control carousel-control-next" href="#undefined" role="button" data-slide="next"><span class="carousel-icon carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>

Actual:

<div class="wp-block-wf-testimonials"><div class="slideshow carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"><div class="carousel-item active"><div class="quote"> sdfas </div><div class="byline"> sdf </div></div><div class="carousel-item false"><div class="quote"> fsadfa </div><div class="byline"> asdfassdfadf </div></div><div class="carousel-item false"><div class="quote"> fdsafas </div><div class="byline"> sdfasdfas </div></div></div><a class="carousel-control carousel-control-prev" href="#undefined" role="button" data-slide="prev"><span class="carousel-icon carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control carousel-control-next" href="#undefined" role="button" data-slide="next"><span class="carousel-icon carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>

Here is the attributes

attributes = {
        interval: {
            type: 'text',
            selector: '.slideshow',
            source: 'attribute',
            attribute: 'data-interval',
            default: 'false'
        },
        hideIndicators: {
            type: 'text',
            default: 'false'
        },
        viewMode: {
            type: 'text',
            default: 'edit',
        },
        testimonials: {
            source: "query",
            default: [{index:0, quote:"", byline:""}],
            selector: ".carousel-inner .carousel",
            query: {
                index: {
                    source: "attribute",
                    selector: ".quote",
                    attribute: "index"
                },
                image: {
                    source: "attribute",
                    selector: "img",
                    attribute: "src"
                },
                quote: {
                    source: "text",
                    selector: ".quote"
                },
                byline: {
                    source: "text",
                    selector: ".byline"
                }
            }
        }
    }

Full block code: https://github.com/Panguino/WF_Testimonial

Any help would be greatly appreciated, I am new to Gutenberg, a bit new to react as well. Go easy on me =).


回答1:


I think you found the solution, answering for future readers.

The Actual in the console error expects the previous HTML we saved in the save() method which is stored in the database currently and our block's save() method contains the new code. So, WordPress can't match the output thus resulting in a validation error.

Solution: You've to remove the current instance of the block and make a new one, it'll work. Though it's annoying, I hope the Gutenberg team would find a fix around this



来源:https://stackoverflow.com/questions/53459420/gutenberg-block-validation-failed-not-expecting-children

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