时间戳

首页 > 解决方案 > 古腾堡区块验证失败（不期待孩子）

wordpress - 古腾堡区块验证失败（不期待孩子）

问题描述

我正在开发一个 Gutenberg Testimonials 块，但是当保存并尝试重新加载它时，我的块验证失败，它似乎期待一个没有孩子的块在 carousel-inner 等。

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

任何帮助将不胜感激，我是古腾堡的新手，也有点新反应。对我放轻松=)。

标签： wordpresswordpress-gutenberg

解决方案

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

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

解决方案：您必须删除该块的当前实例并创建一个新实例，它会起作用。虽然很烦人，但我希望古腾堡团队能找到解决这个问题的方法

推荐阅读