Question

我正在开发gutenberg推荐区块，但是当保存并尝试重新加载它时，却使我无法通过区块验证，这似乎是希望该区块在轮播内部没有孩子。

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

任何帮助将不胜感激，我是古腾堡的新手，也对我有所反应。对我好一点=）。

Answer 1

我认为您找到了解决方案，为将来的读者作答。

控制台中的 Actual 错误期望我们在save()方法中保存的先前HTML（当前存储在数据库中）和我们块的save()方法包含新代码。因此，WordPress无法匹配输出，从而导致验证错误。

解决方案：您必须删除该块的当前实例并创建一个新实例，它才能正常工作。尽管很烦人，但我希望古腾堡（Gutenberg）小组可以解决此问题

Gutenberg块验证失败（不希望孩子）

1 个答案: