Gutenberg RichText编辑器生成实体引发布局异常求助

使用Gutenberg的RichText组件时，编辑器中会生成（零宽空格）实体，导致布局异常，点击时出现空白区域。尝试更换RichText的tagName标签后问题仍存在。

相关代码如下：

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { RichText, useBlockProps } from "@wordpress/block-editor";
import { Platform } from "@wordpress/element";

export default function edit({ attributes, setAttributes }) {
  const {circleHeadline,circleText} = attributes;

  const blockProps = useBlockProps({
        className: 'visual-circle__item',
    });

  const onTitleChange = (value) => {
    const newTitle = { circleHeadline: value };
    setAttributes(newTitle);
  };

  const onTextChange = (value) => {
    const newText = { circleText: value };
    setAttributes(newText);
  };

  return (
    <li {...blockProps}>
      <RichText
        identifier="circleHeadline"
        tagName="span"
        className="visual-circle__title"
        value={circleHeadline}
        onChange={onTitleChange}
        withoutInteractiveFormatting={true}
        aria-label={__("Main Text")}
        placeholder={__("Lorem")}
        {...(Platform.isNative && { deleteEnter: true })} // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
        allowedFormats=[""]
      />
      <RichText
        identifier="circleText"
        tagName="span"
        className="visual-circle__text"
        value={circleText}
        onChange={onTextChange}
        withoutInteractiveFormatting={true}
        aria-label={__("Sub Text")}
        placeholder={__("Nullam dictum eu pede")}
        {...(Platform.isNative && { deleteEnter: true })} // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
        allowedFormats=[""]
      />
    </li>
    );
}

是零宽空格字符，多为RichText处理输入或占位符时自动插入，可通过以下方式解决：

• 在输入阶段过滤特殊字符
  修改onChange函数，直接清理内容中的零宽空格：

const onTitleChange = (value) => {
  const cleanedValue = value?.replace(/\uFEFF/g, '').replace(//g, '');
  setAttributes({ circleHeadline: cleanedValue });
};

const onTextChange = (value) => {
  const cleanedValue = value?.replace(/\uFEFF/g, '').replace(//g, '');
  setAttributes({ circleText: cleanedValue });
};

• 启用纯文本粘贴模式
  给RichText添加__unstablePastePlainText属性，强制粘贴纯文本，减少特殊字符插入：

<RichText
  // 其他属性保留
  __unstablePastePlainText={true}
/>

• 在保存环节统一清理
  若前端渲染仍有问题，可在区块的save函数中做最终处理：

export default function save({ attributes }) {
  const { circleHeadline, circleText } = attributes;
  const cleanedHeadline = circleHeadline?.replace(/\uFEFF/g, '').replace(//g, '');
  const cleanedText = circleText?.replace(/\uFEFF/g, '').replace(//g, '');
  
  return (
    <li className="visual-circle__item">
      <span className="visual-circle__title">{ cleanedHeadline }</span>
      <span className="visual-circle__text">{ cleanedText }</span>
    </li>
  );
}

• CSS临时修复（仅应急用）
  如果需要快速临时压制布局问题，可通过CSS屏蔽空白：

.visual-circle__title,
.visual-circle__text {
  white-space: nowrap;
}

内容的提问来源于stack exchange，提问作者vipul