古腾堡富文本块验证失败

时间：2021-05-01 作者：Kamil Brodziak

我在理解richtext元素方面有问题。我正在尝试使用可自定义的占位符和标签创建表单，但在保存和刷新页面时，出现以下错误：

blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 Block validation: Block validation failed for `kathy/contact-form` ({name: "kathy/contact-form", icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<form class="wp-block-kathy-contact-form kathyContactForm"><label class="kathyContactFormEmailLabel flexCenterCenter"><span class="kathyContactFormEmailLabelText flexCenterCenter">x</span><input class="kathyContactFormEmail flexCenterCenter" placeholder=""/></label></form>

Content retrieved from post body:

<form class="wp-block-kathy-contact-form kathyContactForm"><label class="kathyContactFormEmailLabel flexCenterCenter"><span class="kathyContactFormEmailLabelText flexCenterCenter">x</span><input class="kathyContactFormEmail flexCenterCenter" placeholder="z"/></label></form>

内容已保存并正确显示在网站上，但编辑器显示错误。

我的js：

registerBlockType(\'kathy/contact-form\', {
    title: \'Kathy Contact Form\',
    description: \'Contact form\',
    icon: \'format-image\',
    category: \'kathy\',

    attributes: {
        emailLabel: {
            type: \'string\',
            source: \'html\',
            selector: \'span.kathyContactFormEmailLabelText\'
        },
        emailPlaceholder: {
            type: \'string\',
            source: \'html\',
            selector: \'span.kathyContactFormEmail\'
        }
    },

    edit: ({attributes, setAttributes}) => {
        const {emailLabel, emailPlaceholder, nameLabel, namePlaceholder,  messageLabel, messagePlaceholder, submitText} = attributes;
        const updateEl = (el, val) => {
            switch(el) {
                case "emailLabel":
                    setAttributes({emailLabel: val});
                    break;
                case "emailPlaceholder":
                    console.log(val)
                    setAttributes({emailPlaceholder: val});
                    break;
            }
        }

        return ([
            <form className={\'kathyContactForm\'}>
                <label>
                    <RichText className={\'kathyContactFormEmailLabelText flexCenterCenter\'} key="editable"
                            tagName="span" placeholder="Label text" value={emailLabel}
                            onChange={(val) => updateEl("emailLabel", val)} /> 
                    <RichText className={\'kathyContactFormEmail flexCenterCenter\'} key="editable"
                            tagName="span" placeholder="Placeholder text" value={emailPlaceholder}
                            onChange={(val) => updateEl("emailPlaceholder", val)} /> 
                </label>
            </form>
        ]);
    },
    save: ({attributes}) => {
        const {emailLabel, emailPlaceholder} = attributes;
        return (
            <form className={\'kathyContactForm\'}>
                <label className={"kathyContactFormEmailLabel flexCenterCenter"}>
                    <span className={"kathyContactFormEmailLabelText flexCenterCenter"}>{emailLabel}</span>
                    <input className={"kathyContactFormEmail flexCenterCenter"} 
                           placeholder={emailPlaceholder}
                    />
            </form>
        );
    }
});

我知道（或我想我知道）显示错误是因为编辑中的span和保存中的输入，但当我将span替换为编辑和属性中的输入时，没有显示错误，但更新不起作用。我怎样才能修复它？

1 个回复

最合适的回答,由SO网友:Sally CJ 整理而成

您所在街区的问题是由于selector 您的emailPlaceholder 属性-将值设置为span.kathyContactFormEmail, 但实际上，在您的save() 函数（或函数返回的元素的标记/HTML）。

您所拥有的是kathyContactFormEmail 作为类，因此您需要更改emailPlaceholder\'sselector 到input.kathyContactFormEmail.

除此之外，您还应该更改source 从…起html 到attribute 和设置attribute 到placeholder 像这样：

emailPlaceholder: {
    type: \'string\',
    source: \'attribute\',      // change it from \'html\' to \'attribute\'
    attribute: \'placeholder\', // add add this
    selector: \'input.kathyContactFormEmail\'
}

首先，因为您将属性与输入的占位符一起使用，即。<input placeholder="{ emailPlaceholder }" />.

其次，input 元件是自动关闭的，即。<input /> 而不是<input></input>, 因此innerHTML 值为空。

所以html 源代码无法处理输入，因为块编辑器将从内部HTML读取属性值，但使用<input /> （甚至<input>foo</input> 无效..），编辑器将获得一个空字符串。

其他问题/注意事项，而不是使用RichText 用于编辑的元素emailPlaceholder 属性，我会使用一个简单的文本字段，例如使用TextControl 像这样：

<TextControl
    label="Placeholder text"
    value={ emailPlaceholder }
    onChange={ ( val ) => updateEl( \'emailPlaceholder\', val ) }
/>

PS：不要忘记导入或加载组件，例如。const { TextControl } = wp.components;.

如果您使用该组件，那么您需要使用div, 碎片(<> 和</>) 或者别的什么label 包装RichText 和TextControl 元素，例如。<div><RichText .../><TextControl .../></div>.

在RichText 参考says:

RichText.Content 应在中使用save 块的功能，以正确保存富文本内容。

因此<span className={"kathyContactFormEmailLabelText flexCenterCenter"}>{emailLabel}</span>, 您应该执行以下操作：

<RichText.Content
    tagName="span"
    className="kathyContactFormEmailLabelText flexCenterCenter"
    value={ emailLabel }
/>

<attribute>="<value>" 语法，例如className={\'kathyContactForm\'}, 使用className="kathyContactForm". 这样，您的代码将变得更简单。

在您的edit() 函数，我不知道为什么要返回数组，即。return ([<form>...</form>]), 但你应该设置一个key 每个最外层父元素的属性（例如，如果<p><b>foo <i>bar</i></b> baz</p>, 最外层的父级是p). 例如，你会return ([<form key="your-key">...</form>]).

并确保使用唯一的键-两个RichText 您的edit() 函数使用了相同的键（“可编辑”）。

小码农CODE

古腾堡富文本块验证失败

相关推荐

多国语言上的Gutenberg块JavaScript本地化不起作用