Text formatting applying to individual characters

[NicktheGeek]

Description

This appears to be a bug introduced in WordPress 5.9. I have a plugin that adds a screen reader only text format and then highlights the content with the markup in the WordPress editor while hiding the content visually on the front end.

This worked previously, but it was reported to me last night that this has started highlighting each individual character. It seems this happens when selecting the screen reader text format, then typing. If one types the content, highlights it, then selects the text format, it applies to the whole block of text.

Step-by-step reproduction instructions

1. Install the Screen Reader Text Format plugin
2. Activate the plugin
3. Go to the block editor with a new or existing post
4. Type some content
5. Highlight the content
6. Select screen reader text format
7. Add a new block
8. Select screen reader text format
9. Type content

The first content will be wrapped in a single span and highlight the content correctly.
The second content will wrap each character individually.

Screenshots, screen recording, code snippet

Screen Recording

Environment info

• WordPress 5.9
• Theme: TwentyTwentyTwo
• Only plugin active is Screen Reader Text Format

note: Did not check "Please confirm that you have tested with all plugins deactivated except Gutenberg." because Gutenberg is not active and the Screen Reader Text Format plugin is highlighting the issue with the text format applying the span to individual characters.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[aurooba]

Does this happen with the other built-in text formats, @NicktheGeek?

[NicktheGeek]

@aurooba it does not, but they are all using different HTML tags while this relies on a span with a class.

It may be that something changed in registering the text format as well, and I can update that in the plugin.
https://github.com/reaktivstudios/screen-reader-text-format/blob/primary/src/sr-only/index.js#L41

[ndiego]

This issue was reviewed in today's Editor Bug Scrub. Are you able to confirm if this is still an issue in the latest version of Gutenberg and WordPress?

[kathrynwp]

@NicktheGeek Just checking in once more to see if this issue can still be replicated with the latest version of WordPress and Gutenberg, otherwise we'll go ahead and close it out. Thanks!

[ndiego]

This issue was reviewed in today's Editor Bug Scrub. We have been unable to replicate using the latest versions of Gutenberg and WordPress. See the screenshot below. It appears everything is working correctly. Therefore, I am going to close this issue. If anyone can replicate it in the future, please feel free to reopen this issue with additional information.

[amberhinds]

@ndiego This is the issue that I mentioned to you. I was just now able to reproduce this same issue in 6.5.5 and Twenty Twenty-Four.

Here's an updated screen recording.

It may just be a bug with the Screen Reader Text Format plugin. I compared it to the Lang Attribute for the Block Editor plugin which also uses spans, but it doesn't have this problem, so there must be something different about the implementation.

[ndiego]

Thanks @amberhinds, I am going to reopen this for further investigation.

[ndiego]

I was able to replicate by building a demo plugin that registers a rich text format using a span, which is the same as the Screen Reader Text Format plugin. Still investigating, but my guess is that it's something specific to the span element.

[ndiego]

After some further testing, I have narrowed down the issue. It appears to happen whenever a text format includes additional attributes like class, lang, etc. The interesting thing is that the formatting breaks only when the text if first formatted. If you save and refresh the page, everything works as expected.

This is difficult to explain in words, so check out the video walkthrough below. Note that this issue can be replicated with custom text formats as well as specific Core-provided text formats that use additional attributes like the Langauge option.

text-formatting-bug.mp4

Testing

• Use the following code to register a text format that utilizes a class.

wp.domReady(() => {
    const { registerFormatType } = wp.richText;
    const { toggleFormat } = wp.richText;
    const { RichTextToolbarButton } = wp.editor;

    registerFormatType( 'my-custom-format/testing', {
        title: 'Testing',
        tagName: 'span',
        className: 'testing',
        edit( { isActive, value, onChange } ) {
            return (
                <RichTextToolbarButton
                    icon="editor-code"
                    title="Testing"
                    onClick={ () => onChange( 
                        toggleFormat( 
                            value, 
                            { type: 'my-custom-format/testing' } 
                        )
                    ) }
                    isActive={isActive}
                />
            );
        },
    } );
} );

• Apply the formatting to some text.
• Insert your cursor into the middle of the formatted text and start typing
• Notice that the formatting breaks and the Editor wraps each new character in the text formatting. (see video for reference)
• Now use the Core Language format and repeat the same process of some other text.
• Insert your cursor into the middle of the formatted text and start typing
• Notice that the formatting breaks again

cc @ellatrix