Text formatting applying to individual characters

NicktheGeek commented 2 years ago

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

Install the Screen Reader Text Format plugin
Activate the plugin
Go to the block editor with a new or existing post
Type some content
Highlight the content
Select screen reader text format
Add a new block
Select screen reader text format
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 commented 2 years ago

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

NicktheGeek commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 3 months ago

@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 commented 3 months ago

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

ndiego commented 3 months ago

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 commented 3 months ago

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.

https://github.com/user-attachments/assets/d1501447-bc81-4548-853a-bcb1abb0246c

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

WordPress / gutenberg