Word Press富文本控件的保存

新建富文本编辑器，并编写save方法如下：

edit方法：

export default function Edit({ attributes, setAttributes }) {return (<><div { ...useBlockProps() }><RichTexttagName='p'onChange={ (value) => setAttributes({ noteContent: value })}value={attributes.noteContent}placeholder='输入你的内容...'></RichText><div>自定义的按钮</div></div></>);
}

save方法：

import { useBlockProps } from '@wordpress/block-editor';export default function save({ attributes }) {const { noteContent } = attributes;return (<div { ...useBlockProps.save() }>{ noteContent }</div>);
}

看上去很好理解，将RichText标签解析成div，将内容保存在div内部。

报错

此时保存刷新：

报错内容：

区块包含未预料的或无效的内容。

此时打开控制台能够看到报错的log：

Content generated by `save` function:<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">测试&lt;/div></div>Content retrieved from post body:<div class="wp-block-ht-ht-note">测试</div>

现象

出现这种报错通常原因是save方法和edit方法结果没有对上。本来是一个挺常见的bug。通常需要简单修改一下就能正常使用了。

但这次有些不太一样。仔细观察报错日志：

save()方法保存的内容：
<div class="wp-block-ht-ht-note">
<div class="wp-block-ht-ht-note">
测试
</div>
</div>edit()方法保存的内容：
<div class="wp-block-ht-ht-note">
测试
</div>

也就是save()方法保存了两次{ ...useBlockProps() }

原因

保存了两次，我们要搞清楚是从哪里来的。

第一次的div

这个很好理解，毕竟save方法使用了<div { ...useBlockProps.save() }>。使用这种方式就会解析成<div class="wp-block-ht-ht-note">

第二次的div

剩下的那也就能正常推断出来了：除了save方法使用的，就只可能是{noteContent}中本身的内容了。通过<div class="wp-block-ht-ht-note">&lt;div class="wp-block-ht-ht-note">测试&lt;/div></div>的转义内容也能够推断出，{noteContent}是包含着一个<div class="wp-block-ht-ht-note">的

解决方案

知道原因就好解决了，既然保存时就带上了，那save()方法就不需要再添加一次了。
修改save()方法：

export default function save({ attributes }) {const { noteContent } = attributes;return (<>{ noteContent }</>);
}

保存刷新，解决。