古腾堡富文本在编辑器中生成“”

Question

我使用了 Gutenberg 的富文本元素，在编辑器中我发现这种实体在我们编辑时出现 - https://prnt.sc/uqJZokTorIK _，当我们单击其显示的空白区域时，这会在布局中产生问题。

/**
 * 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>
    );
}

我在富文本中尝试了不同的标签而不是 span 标签，但问题是一样的。

Answer 1

我解决了这个问题，我发现这个字符也出现在核心块富文本元素中，我的代码中的问题是我使用了带有显示块 css 的 span 标签。