古腾堡块验证失败(不期待孩子) [英] Gutenberg Block Validation Failed ( not expecting children )

问题描述

我正在开发一个古腾堡的推荐块，但是当保存并尝试重新加载它时，我的块验证失败，它似乎期待在旋转木马等中没有孩子的块.

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>

这里是属性

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

完整区块代码: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 =).

推荐答案

我认为您找到了解决方案，为未来的读者解答.

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

控制台错误中的实际需要我们在save()方法中保存的先前HTML，该方法当前存储在数据库中，以及我们块的save() 方法包含新代码.因此，WordPress 无法匹配输出，从而导致验证错误.

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.

解决方案:您必须删除块的当前实例并创建一个新实例，它会起作用.虽然这很烦人，但我希望 Gutenberg 团队能够解决这个问题

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

这篇关于古腾堡块验证失败(不期待孩子)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！