Word Press富文本控件的保存

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

edit方法：

export default function Edit({ attributes, setAttributes }) {
	return (
		<>
		<div { ...useBlockProps() }>
			<RichText
				tagName='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 }
        </>
    );
}

保存刷新，解决。