• Resolved worldofvipul

    (@worldofvipul)


    I have used rich text element of Gutenberg, in editor i found this kind of entity coming when we are editing – https://prnt.sc/uqJZokTorIK_ , that is creating issue in layout, when we click its showing blank space.

    /**
     * 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>
        );
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Have you maybe copy and pasted something into this element?

    This character is a zero width, no-break space. They sometimes are hidden in some codes to cause trouble when copy pasting.

    Thread Starter worldofvipul

    (@worldofvipul)

    @benniledl , Hi thanks for replay.

    I have tried to remove all things and rewrite code but still its coming, also i have checked this file to notepad++ for zero width, but no issue found it is UTF without BOM, one thing i marked that when i remove placeholder text and put default text in attributes its not showing this character.

    also i tried to use fresh richtext element from wordpress sample code but i found same issue.

    • This reply was modified 1 year, 2 months ago by worldofvipul.
    Thread Starter worldofvipul

    (@worldofvipul)

    I fixed this issue, i found that this character is coming in core blocks rich text element also, the issue in my code is i used span tag with display block css.

    @worldofvipul

    Hi,
    I am having exactly the same problem. (WordPress 6.1.1)
    It happened with tagName=“h2”.
    The problem is that
    If you are loading google font with enqueue_block_editor_assets
    and if a placeholder is specified.

    It seems to consider  as an input character.
    It looks like an input character even if it has not been entered yet.
    The first character is the only character that is not colored.

    (Only the first character is not hit by this default style for the first character.)


    This css does not reflect.

    .rich-text [data-rich-text-placeholder]:after {
        content: attr(data-rich-text-placeholder);
        opacity: .62;
    }

    I understand that you have fixed this problem, but if you don’t want to upload a version of wordpress.
    I would appreciate it if you could tell me how to turn it off, which files I should modify, etc.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Gutenberg Richtext generating “&#xFEFF” in editor’ is closed to new replies.