块验证：块验证失败 - 自定义 Wordpress Gutenberg 块在编辑器中重新加载时失败

Question

我对 Wordpress 很陌生，对 Gutenberg Blocks 也很陌生。我使用 npm Gutenburg 生成器创建了一些简单的块。在我的 package.json 文件中，我在 package.json 文件中创建了以下属性

"attributes": {
    "quote": {
      "type": "string"
    },
    "source": {
      "type": "string"
    }
  }

在我的 edit.js 文件中，我有以下块结构

export default function Edit(props) {
    return (
            <div { ...useBlockProps() } className="testimonial">
                <div className="testimonial__wrapper">
                    <div className="testimonial__header">
                        <i className="testimonial__quote__left"></i>
                            <RichText
                                tagName="blockquote"
                                value={props.attributes.quote}
                                onChange={(content) => props.setAttributes({ quote: content })}
                                placeholder='Enter Quote'
                                keepPlaceholderOnFocus={true}
                            />
                        <i className="testimonial__quote__right"></i>
                            <RichText
                                tagName="figcaption"
                                value={props.attributes.source}
                                onChange={(content) => props.setAttributes({source: content })}
                                placeholder='Enter Quotee / Source'
                                keepPlaceholderOnFocus={true}
                            />
                    </div>
                </div>
            </div>
    );
}

这是我在 save.js 文件中的保存功能

export default function save(props) {
    return (
        <div className="testimonial">
            <div className="testimonial__wrapper">
                <div className="testimonial__header">
                    <i className="testimonial__quote__left"></i>
                    <RichText.Content tagName="blockquote" value={ props.attributes.quote } />
                    <i className="testimonial__quote__right"></i>
                    <RichText.Content tagName="figcaption" value={ props.attributes.source } />
                </div>
            </div>
        </div>
    );
}

当我将自定义块添加到编辑器中时，效果很好。我应该更新然后查看包含它有效的块的页面吗！但是，如果我刷新或重新加载包含我的块的编辑器，我会收到以下错误：

Block validation: Block validation failed for `create-block/einzweidinge-testimonial` ({name: 'create-block/einzweidinge-testimonial', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote></blockquote><i class="testimonial__quote__right"></i><figcaption></figcaption></div></div></div>

Content retrieved from post body:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote>ffff</blockquote><i class="testimonial__quote__right"></i><figcaption>fffff</figcaption></div></div></div>

我注意到如果我添加一个块而不向 RichText 组件输入任何数据，则不会引发验证错误！我不确定这是否有助于解决问题，但我还在控制台中看到以下警告。

blocks.min.js?ver=69022aed79bfd45b3b1d:10 Block validation: Expected token of type `EndTag` ({type: 'EndTag', tagName: 'blockquote'}), instead saw `Chars` ({type: 'Chars', chars: 'ffff'}).

我被难住了，不确定我做错了什么？我已经研究了几个小时了！任何帮助或指导将不胜感激。

** 更新 **

检查编辑器中的错误时，我注意到 word press 似乎添加了额外的内容 - 在这种情况下

p

标签